chatgpt-engineer-prompts 👩💻🧑💻
为工程师总结的实用 Prompts，助力成为下一代 Prompt 工程师，使用工具不限于 ChatGPT，还有 Midjourney、Stable Diffusion 等。
终极目标：实现 99% 的工作 AI 化，剩下 1% 由你来掌控
覆盖范围：代码开发的各个环节、UI/UX 视觉交互设计、产品设计。
不断丰富中，欢迎关注，欢迎贡献 Idea。
ChatGPT 使用 Tips：
- 能够记录上下文，当一次提问没有得到理想答案，你可以继续追问
- 支持中英文混搭，在一个问题中可以灵活切换中英文表达
Table of Contents
- 代码生成
- 代码讲解
- 代码优化
- 代码转换
- 指定返回格式
- 正则表达式
- 生成 SQL
- 生成页面 UI-Midjourney
- 生成插图-Midjourney
- 生成Icon-Midjourney
- 生成吉祥物
- 生成配色
- 沟通
- 其他技巧
代码生成
使用 HTML 和 CSS 实现左中右三栏布局，左右定宽100px，中间撑满剩余空间
使用 React 生成一个 登录的 form，包含用户名，密码和确认密码。
代码讲解
解释一下这段代码：
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;
};
代码优化
优化以下代码：
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;
}
支持追问：
为什么这么优化？
代码转换：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;
}
指定返回格式
返回 JSON
生成3个测试用户的信息，以json对象数组格式，包含 name, phone, email
返回 XML
生成2个测试用户的信息，以xml格式返回，包含 name, phone, email
正则表达式
写一个 JS 的正则表达式，检查密码的强度必须是包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间。
也可以解释正则表达式
这个正则表达式是什么含义？
^[A-Z]:\\{1,2}[^/:\*\?<>\|]+\.(jpg|gif|png|bmp)$
生成 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;
还可以追问，生成测试数据及查看示例运行结果：
生成页面 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
使用 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
基于已经生成的图做调整
/settings 后开启 remix，这样生成图片后，会有 Make Variations 按钮，点击可调整图片的 prompt 并重新生成图片。
生成插图
使用 google flat art style 来生成插画风格的图片，加上 transparent background 可以让背景变白，避免一些噪点。
/imagine a woman using a computer, google flat art style, transparent background
上面第二个风格看起来还不错。
去除白背景的方法：有很多免费在线工具，试了一下，还是感觉 Adobe Express 对渐变色擦除做的最好
生成 Icon
使用 `icon for iOS app' 来移动端应用的图标
/imagine icon for ios App, burger, high quality, high resolution
这种情况下生成的图像过于逼真、拟物。
如果你想用流行的极简模式，加上 minimalism, flat design：
/imagine icon for ios App, burger, high quality, high resolution, minimalism, flat design
生成吉祥物
使用 mascot 来生成一个企业的吉祥物，让别人更好的记住品牌。可以设置可爱的日系风格 Japanese style
simple mascot for a food delivery company, Japanese style
生成配色
一种较好的的配色方案应遵循「60-30-10」比例，60％ Main 主色，30％ Secondary 辅色，最后 10％ Accent 使用与两种主要颜色形成强烈对比的强调色。以现实中的西服做类比：60 的外套和裤子颜色，30 是衬衣，10 是领带。 但还需要一些辅助色，整个设计起来并不容易。推荐几个工具：
https://aicolors.co/ 使用 GPT 来生成配色
https://palettemaker.com/app 手动调色的神器，覆盖 Web、App、Brand，还有一些色彩理论教学。
https://www.magicpattern.design/dashboard 快速生产渐变色，背景图素材，比如最近很流行的 Blurry Gradients
https://colorffy.com/gradients 生成多焦点渐变色，功能比较单一。
沟通
给6岁的孩子解释，为什么要关注代码的质量
给不了解技术的老板解释，为什么要经常做代码的重构
其他技巧
看到一个喜欢的图片，如何找到 prompt，image-to-text
- 方法1：粘贴到 https://unprompt.ai/ 找到类似图片，查看 prompt
- 方法2：Midjourney 的
/describe指令，并上传图片即可。 - 方法3：使用 CLIP Interrogator https://huggingface.co/spaces/pharma/CLIP-Interrogator