面向设计师的快速工程：从模糊的简报到可用的 AI 输出

如果你的AI输出看起来像图库照片，那么你的指令读起来就像一个愿望。

这就是大多数设计师学习使用AI工具时遇到的问题所在。“为一家金融科技初创公司制作一张主图”不是指令，而是一种感觉。真正的指令应该是你向一位收费400美元/小时、提问犀利的自由插画师提出的要求。

设计师们早已掌握了这种技巧。你们在学校里写过简报，每周在工作中也写过。你们知道清晰、参考和限制在书面形式中应该是什么样子。AI指令也是同样的技能，只是受众不同。

指令是用文字表达的设计简报

不要把提示当作魔法词。把它们看作是创意简报的第一段，加上最后的规格说明。

一份好的简报会告诉创作者他们是谁，作品的用途是什么，规则是什么，需要参考什么，以及最终交付成果是什么样子。错过任何一个环节，你得到的作品可能技术上勉强合格，但情感上却差强人意。比如，让一个初级设计师“为一家咖啡店设计一个logo”，结果只会得到十二颗咖啡豆。但如果让他们“为一家面向自由职业者的第三波咖啡店设计一个logo，使用文字商标、几何无衬线字体，不使用象形图，灵感来自Blue Bottle的克制风格”，你就能得到一个更接近目标的作品。

设计提示也是如此。因为模型很智能就想含糊其辞，这是人工智能辅助设计中最昂贵的错误。具体明确并非迂腐，而是关键所在。

好的设计提示就像一份设计简报，而糟糕的设计提示则像一份愿望清单。

每个可用设计提示都包含的五个部分

每个能够生成可交付设计成果的设计提示都包含五个部分。你可以记住它们，可以把它们放到模板里，也可以把它们打印在便签纸上。这五个部分是：

1. 角色。 人工智能扮演的是谁？ （您是《纽约客》的资深插画师，拥有十年经验。）

2. 背景：作品用途是什么？目标受众是谁？（这幅图是一篇关于设计师学习使用人工智能工具的博客文章的配图。目标受众是职业设计师、早期使用者，他们既持怀疑态度又充满好奇。）

3. 限制条件：有哪些规则？（编辑用途，非企业用途。画面中不能出现电脑。不能使用图库照片。采用纯色、轮廓鲜明、高对比度、低细节。）

4. 参考资料：作品应该呈现怎样的风格？（索尔·斯坦伯格的线条风格与20世纪60年代瑞士旅游海报的克制风格相结合。品牌配色方案：背景色#080404，强调色#ff6434。）

5. 输出规格：交付物的具体规格是什么？ （“16:9 宽高比，1200x630，PNG 格式，图像内无文字。”）

跳过角色设置，输出结果平庸。跳过上下文设置，输出结果毫无针对性。跳过约束条件设置，模型会根据你的猜测生成图像，通常是素材图片。跳过参考信息设置，输出结果会趋向于训练数据中占主导地位的图像。跳过输出规范设置，输出尺寸错误。

| 提示部分 | 作用 | 跳过此部分会发生什么 |

|-------------|--------------|-----------------------------|

| 角色 | 设定风格和专业水平 | 通用输出 |

| 上下文 | 告诉模型这项工作的用途 | 解决错误的问题 |

| 约束条件 | 定义要避免的内容 | 得到你讨厌的陈词滥调 |

| 参考信息 | 锚定视觉或色调方向 | 趋向于训练数据的平均值 |

| 输出规范 | 控制格式和交付物 |尺寸错误，格式错误 |

示例：为首页横幅生成图片

每个设计师都至少写过一次的模糊版本：

“一篇关于设计师提示工程的博客文章的首页横幅图片。”

你会得到什么：一个坐在笔记本电脑前的设计师，或者一个发光的脑子，或者一个拿着铅笔的机器人，或者这三者的某种组合。千篇一律，毫无新意。

结构化版本：

你是一位在《纽约客》和《连线》杂志工作了十年的插画师。请为一篇题为“设计师提示工程”的博客文章创作一张首页横幅图片。目标受众是那些对人工智能炒作持怀疑态度，但准备认真使用相关工具的职业设计师。

构图：画面左侧是设计师的纸质简报，手绘并带有注释，逐渐过渡到右侧清晰的文字提示。这暗示了设计简报和结构化提示之间的转换。

风格：编辑风格，纯色，轮廓鲜明，高对比度，低细节。可接受纸张纹理。禁止使用电脑、机器人、大脑或发光球体。

参考：简报参考 Saul Steinberg 的线条画。提示侧参考瑞士旅游海报的简洁风格。品牌配色：#080404 背景色，#ff6434 强调色，#d0d3d8 中性色。

输出：1200x630，图片内无文字。

您将获得：一张可以实际发布的主图，而不是需要重新生成四次的图。

区别不在于才华，而在于结构。

示例：v0 或 Lovable 中的 UI 原型

模糊描述：

“为一家设计公司设计一个落地页。”

您将获得：一个带有默认渐变、三个功能卡片、一张默认主图以及与互联网上其他设计公司千篇一律的文案的 Tailwind 风格模板。

结构化：

为 Brainy 构建一个落地页。Brainy 是一家设计工作室，在 Instagram 和 Threads 上拥有超过 200 万粉丝。目标受众：A 轮至 C 轮 SaaS 公司的创始人，他们需要品牌、网站和设计服务。他们已经看过无数家代理机构的网站，如果网站看起来像模板，他们就会立即离开。

布局：单栏首页，包含一行粗体标题和一个行动号召按钮 (CTA)；之后是横向滚动的客户徽标；再之后是使用 Bento 网格布局的三部分服务说明（品牌、网站、内容）；之后是包含三条客户评价的客户评价部分；最后是简洁的联系方式页脚。

限制：不使用渐变、不使用素材图片、不使用通用首页插图。仅限深色模式，背景色 #080404，强调色 #ff6434。字体：所有文字均使用同一种无衬线字体，标题加粗，正文加细。所有文字间距均为 4px。

参考：Linear 的间距限制。Vercel 的字体粗细。Apple 的 bento-grid 分区模式。并非任何一种的克隆。

输出：响应式、移动优先、shadcn 组件。

使用相同的工具，输出结果却截然不同。

示例：代码代理构建组件

模糊示例：

“请帮我创建一个按钮组件。”

结果：一个按钮。只有一个样式。没有辅助功能。没有焦点状态。颜色并非您指定的颜色。

结构化示例：

您是一位高级设计系统工程师。请在我们的设计系统中构建一个按钮组件。

背景：此按钮将替换我们分散在十二个营销页面上的旧式临时按钮样式。它需要支持主要、次要和隐藏三种变体，三种尺寸（sm、md、lg），以及加载、禁用和聚焦状态。

限制：使用 tokens.css 中的现有标记（不要引入新的颜色）。焦点环必须偏移 2px，使用 --color-accent 参数。间距切勿使用 px，始终使用 --space 标记。字体始终为 --font-sans，并根据尺寸使用 --text-sm 或 --text-base 参数。加载状态会显示旋转图标并禁用点击。

参考：Radix UI 基础组件用于辅助功能模式。我们现有的卡片组件（位于 /components/Card.tsx）用于文件结构参考。

输出：TypeScript、Tailwind 和 Storybook 脚本，该脚本演示了所有变体和状态。测试涵盖了禁用、加载和聚焦行为。

给代码生成器这样的代码，它就能生成一个真正的按钮。但如果让它说“帮我生成一个按钮”，它生成的可能最终还是需要你手动重写。

每位设计师都应该借鉴的约束库

约束是设计师的秘密武器，也是他们最容易忽略的部分。复制这个库，将相关的行粘贴到你的提示中，并根据你的品牌进行调整。

| 领域 | 需要包含的约束 |

|--------|------------------------|

| 插图 | 纯色，轮廓鲜明，高对比度，低细节，图像中无文字，除非明确要求，否则不包含电脑/手机/机器人/大脑，编辑用途而非企业用途 |

| 摄影风格生成 | 不使用库存照片风格，不使用光泽感强的灯光，除非要求，否则不使用 3D 渲染，自然构图，欢迎真实世界的瑕疵 |

| UI 生成 | 使用现有组件，不使用标记之外的新颜色，移动优先，需要无障碍设计（焦点状态、对比度），除非品牌要求，否则不使用渐变 |

| 字体 | UI 使用一种无​​衬线字体，衬线字体仅在品牌要求时使用，同一排版中最多使用三种字重，文本不采用两端对齐，全部大写字母的文本长度不得超过 4 个单词 |

| 颜色 | 使用标记而非十六进制颜色值，纯黑底白字、纯绿底红字不可，正文对比度至少为 4.5:1 |

| 布局 | 间距缩放比例为 4px 或 8px，正文文本不可居中对齐，不可两端对齐，每行最多 75 个字符，除非排版要求，否则图片应左锚定 |

| 代码 | TypeScript 严格，非默认命名导出，未经许可不得添加新依赖项，每个新组件都必须有测试覆盖率 |

使用这些可直接粘贴的代码块。一开始你可能会觉得有点傻，但之后你会发现，一夜之间，输出质量提升了一倍。

如果你想了解更多 AI 工作流程的分解，请浏览 Brainy 论文 的其余部分。如果您想要一个真正适合您团队品牌的提示库，而不是您随意拼凑的 ChatGPT 历史，聘请 Brainy。

如何迭代而不推倒重来

提示设计中最糟糕的习惯是，当输出不理想时就删除整个提示并重写。十有八九，提示本身已经很接近了，只是某个变量错了。

要像手术一样精准迭代，每次只修改一个地方。

1. 运行一次提示。 记录错误之处。

2. 确定五个部分中哪个部分出了问题。 如果输出过于通用，说明引用不够充分。如果包含错误的元素，说明约束缺少“禁止 X”。如果目标受众错误，说明上下文不够清晰。

3. 只修改出错的部分。 不要重写整个提示。

4. 再次运行提示。 与第一次的输出进行比较。更好、更差还是相同？

5. 重复。 通常三到五轮就能达到目标。

相关：上下文腐烂 是真的。如果你在同一个聊天窗口中反复迭代，结果却越来越差而不是越来越好，说明这个会话已经被污染了。打开一个新的聊天窗口，粘贴当前最佳的提示，继续迭代。

三个保证结果糟糕的错误

我每周都会看到这三种模式，它们都会严重影响输出质量。

错误 1：“让它更好。” 模型并不知道你所谓的“更好”是什么意思。“更好”指的是模型对“更好”的平均值，也就是回归均值。要具体。“增强色彩对比度。”“让构图更不对称。”“去掉背景一半的细节。”

错误 2：一次性要求五个选项。 你会得到五个平庸的选项，而不是一个好的选项。只要求一个。迭代。接受第一个好的选项。

错误 3：未提供参考。 参考能够锚定模型的偏好。没有参考，你得到的只是训练数据的平均值。而三个精心挑选的参考，则能让你得到接近预期效果的结果。

常见问题解答

提示设计是真正的技能还是炒作？

它确实是一项技能，而且与撰写优秀的创意简报是同一回事。如果你能给自由职业者写简报，你就能给模型提供提示。炒作将其称为“设计”，而实际上它应该被称为“清晰的指令”。

哪个工具的提示处理能力最强？

对于图像，Midjourney 和 Gemini Pro 在处理详细的文本提示时表现最佳。对于 UI，v0 和 Lovable 对结构化约束的响应良好。对于代码，⟦品牌0⟧ 和 Cursor 最为强大，尤其是在编写了完善的 CLAUDE.md 文件的情况下。工具本身的重要性远不及提示的质量。

我应该使用提示库吗？

是的。自己创建一个。按使用场景进行组织。每次成功编写提示时，保存下来。每次失败时，记录原因。三个月后，你将拥有一个比任何工具订阅都更有价值的提示库。

提示应该多长？

足够长，能够涵盖五个部分；又足够短，确保每句话都有效。我的提示大多在 100 到 300 字之间。太短的话，说明不够详细；太长的话，则可能重复。

我需要学习一些技术提示技巧，比如 temperature 或 top_p 吗？

对于大多数设计工作来说，不需要。这些技巧存在于 API 调用中，而不是聊天界面。首先要确保五个部分正确无误。在进行 API 调用时，你可以再考虑参数。

认真编写

每一个模糊的提示都是十分钟的浪费时间，最终只会产生垃圾信息。每一个结构化的提示都是十分钟的投资，最终都能交付成果。

写出角色、背景、约束条件、参考资料和输出规范。一次迭代一个变量。保存有效的变量。

你已经知道如何写简报了。模特是另一端的初级员工。

认真写，切中要害。