设计 Prompt 应纳入前端规范

我曾经把"设计环节"和"实现环节"分开对待。设计环节就是一张参考图加上工单里几句注释，实现环节才是严肃细节的所在：组件边界、响应式断点、加载状态、键盘行为、图片尺寸。

AI 建站工具让这种划分彻底崩塌了。如果 prompt 是构建的主要输入，那 prompt 本身就是规格说明的一部分。模糊的 prompt 不会产生粗糙的初稿，它只会以极快的速度产出模糊的需求。

Hey Design AI 对这个问题采取了一种务实的方法。它是一个网站设计 prompt 库，带有视觉预览，但真正有用的部分是图片背后的设计简报。该库目前包含 350 个预览，并将每个方向都包装成构建者可以检查、解释和改编的形式。

把 prompt 当作接口契约来对待

一个好的 prompt 说的远比"使用简洁的 SaaS 美学风格"多。它给模型一个优先级顺序。例如：

开篇要有一句简洁的产品主张。

在旁边放一条真实的证据。

在手机上第一次滚动之前，保持主要操作可见。

用图片解释工作流程，而不是装饰空白区域。

保留动效用于反馈，并提供减少动效的替代方案。

这些都不算什么稀奇的东西。关键在于，模型无法从一个大词可靠地推断出这些。它需要把决策写下来。

我发现这样做大大减少了那种常见的清理工作。生成的页面可能仍然需要调整，但我不再需要花第一个小时删除虚假的仪表盘数据、把同一个按钮移回可视区域、然后努力弄清楚这个页面到底想表达什么。

负面指令同样发挥作用

最有力的设计 prompt 通常包含几个直白的拒绝。不要复制某个品牌的标志性布局。如果玻璃卡片会削弱对比度就不要用它。不要让悬停成为访问内容的唯一途径。不要把证明材料放在三屏长的背景铺垫之下。

这不是 prompt 悲观主义。这是基本的产品素养。模型非常擅长用它们见过的模式填满空白。一份简短的"避免"清单给输出结果划定了一个边界。

Hey Design AI 把这些排除项视为 prompt 技巧的一部分，与字体、颜色、层级、图片等更显眼的选择并列。它还要求构建者考虑移动端行为、焦点、标签、对比度、目标尺寸和动效。最终的站点仍然需要常规测试。一个写得好的 prompt 不会把生成的代码变成无障碍审计。它只是让这些顾虑在起始阶段更难被遗忘。

一种使用视觉参考的简单方法

当我基于参考工作时，我会先把它拆解再复用：

访问者首先应该理解的是什么？

证明材料在哪里出现？

在做视觉工作的是什么：文字、图片、布局，还是三者都有？

当视口变窄时，哪些东西消失了或重新排序了？

哪些部分属于原始品牌，必须替换？

最后一个问题很重要。参考可以提供一个有用的层级结构，而不必同时提供一个可供借用的个性。好的 AI 辅助设计保留前者，丢弃后者。

我仍然需要做出实际的前端决策。我只是更倾向于在生成器把一个模糊的句子变成二十个组件之前就做出这些决策。