Skip to content

Latest commit

 

History

History
294 lines (206 loc) · 11.1 KB

README.md

File metadata and controls

294 lines (206 loc) · 11.1 KB

chatgpt-engineer-prompts 👩‍💻🧑‍💻

image

English Version

为工程师总结的实用 Prompts,助力成为下一代 Prompt 工程师,使用工具不限于 ChatGPT,还有 Midjourney、Stable Diffusion 等。

终极目标:实现 99% 的工作 AI 化,剩下 1% 由你来掌控

覆盖范围:代码开发的各个环节、UI/UX 视觉交互设计、产品设计。

不断丰富中,欢迎关注,欢迎贡献 Idea。

ChatGPT 使用 Tips:

  1. 能够记录上下文,当一次提问没有得到理想答案,你可以继续追问
  2. 支持中英文混搭,在一个问题中可以灵活切换中英文表达

Table of Contents

  1. 代码生成
  2. 代码讲解
  3. 代码优化
  4. 代码转换
  5. 指定返回格式
  6. 正则表达式
  7. 生成 SQL
  8. 生成萌图 DALL·E
  9. 生成页面 UI-Midjourney
  10. 生成插图-Midjourney
  11. 生成Icon-Midjourney
  12. 生成吉祥物
  13. 生成配色
  14. 沟通
  15. 其他技巧

代码生成

使用 HTML 和 CSS 实现左中右三栏布局,左右定宽100px,中间撑满剩余空间

image

image

使用 React 生成一个 登录的 form,包含用户名,密码和确认密码。

image

代码讲解

解释一下这段代码:
export const useDeepMemo = <K, V>(memoFn: () => V, key: K): V => {
  const ref = useRef<{ key: K; value: V }>();

  if (!ref.current || !isEqual(key, ref.current.key)) {
    ref.current = { key, value: memoFn() };
  }

  return ref.current.value;
};

image

代码优化

优化以下代码:
function bottom(layout: Layout): number {
  let max = 0;
  let bottomY;
  for (let i = 0, len = layout.length; i < len; i += 1) {
    bottomY = layout[i].y + layout[i].h;
    if (bottomY > max) {
      max = bottomY;
    }
  }
  return max;
}

image

支持追问:

为什么这么优化?

image

代码转换:JS 转 TypeScript

把这段代码转成 TypeScript:
const useWrapperCallback = (callback, wrapperFunction) => {
  const wrapperRef = useRef({
    currentCall: callback,
    returnCall: wrapperFunction(function (...args) {
      return wrapperRef.current?.currentCall(...args);
    }),
  });

  wrapperRef.current.currentCall = useMemo(() => callback, [callback]);
  return wrapperRef;
}

image

指定返回格式

返回 JSON

生成3个测试用户的信息,以json对象数组格式,包含 name, phone, email

image

返回 XML

生成2个测试用户的信息,以xml格式返回,包含 name, phone, email

image

正则表达式

写一个 JS 的正则表达式,检查密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间。

image

也可以解释正则表达式

这个正则表达式是什么含义?
^[A-Z]:\\{1,2}[^/:\*\?<>\|]+\.(jpg|gif|png|bmp)$

image

生成 SQL

有一个工资表 emp_salary,包含员工号 emp_id, 部门名 dep_name,工资 salary,查询每个员工的工资和他部门的平均工资

生成结果如下,窗户函数也能熟练使用:

SELECT 
    emp_id, 
    dep_name, 
    salary, 
    AVG(salary) OVER (PARTITION BY dep_name) AS avg_salary
FROM 
    emp_salary;

image

还可以追问,生成测试数据及查看示例运行结果:

image

生成萌图 DALL·E

Cute, fluffy [ANIMAL], on a parachute, smiling, adorable, pixar animation style
Cute, fluffy mickey mouse, on a parachute, smiling, adorable, pixar animation style
image
Cute, fluffy panda, on a parachute, smiling, adorable, pixar animation style
image

生成页面 UI

Prompt 中使用 website 来生成 PC 页面。示例:

/imagine porsche car sales website, ui, ux, high-resolutionn website, website UI design, beautiful website, Figma awards, awards, Dribble, CSS design, usability, flat colors, Helvetica

image

使用 app 关键字,可以生成手机应用:如,一个订餐应用

/imagine food delivery app, user interface, Figma, Behance, HQ, 4k, clean UI

基于已有图生成新的效果图

首先去 dribble 搜索一张喜欢的图片,然后把图片地址粘贴到 prompt 中,再加上一些关键字即可。示例:

https://cdn.dribbble.com/userupload/3694651/file/original-894026fb660d8973c8324be7334e87e2.png?compress=1&resize=2048x1536 porsche car sales website, ui, ux, high-resolutionn website, website UI design, beautiful website, Figma awards, awwwards, Dribble,  Css design, usability, flat colors, Helvetica

image

基于已经生成的图做调整

/settings 后开启 remix,这样生成图片后,会有 Make Variations 按钮,点击可调整图片的 prompt 并重新生成图片。 image

生成插图

使用 google flat art style 来生成插画风格的图片,加上 transparent background 可以让背景变白,避免一些噪点。

/imagine a woman using a computer, google flat art style, transparent background 

image

上面第二个风格看起来还不错。

去除白背景的方法:有很多免费在线工具,试了一下,还是感觉 Adobe Express 对渐变色擦除做的最好

image

生成 Icon

使用 `icon for iOS app' 来移动端应用的图标

/imagine icon for ios App, burger, high quality, high resolution

这种情况下生成的图像过于逼真、拟物。

image

如果你想用流行的极简模式,加上 minimalism, flat design

/imagine icon for ios App, burger, high quality, high resolution, minimalism, flat design

image

生成吉祥物

使用 mascot 来生成一个企业的吉祥物,让别人更好的记住品牌。可以设置可爱的日系风格 Japanese style

simple mascot for a food delivery company, Japanese style

image

生成配色

一种较好的的配色方案应遵循「60-30-10」比例,60% Main 主色,30% Secondary 辅色,最后 10% Accent 使用与两种主要颜色形成强烈对比的强调色。以现实中的西服做类比:60 的外套和裤子颜色,30 是衬衣,10 是领带。 但还需要一些辅助色,整个设计起来并不容易。推荐几个工具:

https://aicolors.co/ 使用 GPT 来生成配色 image

https://palettemaker.com/app 手动调色的神器,覆盖 Web、App、Brand,还有一些色彩理论教学。 image

https://www.magicpattern.design/dashboard 快速生产渐变色,背景图素材,比如最近很流行的 Blurry Gradients image

https://colorffy.com/gradients 生成多焦点渐变色,功能比较单一。 image

沟通

给6岁的孩子解释,为什么要关注代码的质量

image

给不了解技术的老板解释,为什么要经常做代码的重构

image

其他技巧

看到一个喜欢的图片,如何找到 prompt,image-to-text