我如何用AI进行设计

作为一名非设计师出身、且厌恶粗制滥造的工程师。

每个落地页、应用和终端界面都千篇一律。它们是粗制滥造的产物，而且大多令人费解。

以下是我如何为产品设计去粗取精的方法。

1. 始终从全局出发。

设计过程大致分为三步：

这出自克里斯托弗·亚历山大所著的《形式综合论》。这是一部对设计过程进行严谨探索的佳作，令人愉悦。

约束的形式多种多样。它们可能是字体和字号规则、必须支持的工作流程，或是业务逻辑状态。关键在于，这些约束由你来决定。

常见的问题是跳过第 3 步，陷入“打地鼠式”的设计。

用户感到困惑时，我们自然容易进入解决方案模式。我们的团队经常被这类问题带偏，尤其是左侧边栏，因为它在狭小空间内塞入了大量信息。诱惑在于头痛医头，但这条路通向毁灭。

跳过约束梳理的问题在于，你会得到一堆零散的补丁，随意地优先处理某些交互而忽略其他。AI 加剧了这种打地鼠式设计的倾向。它鼓励你提示“让 X 更突出”或“为 Y 添加一个操作提示”。最终，更多用户会感到困惑。

当反馈到来时，先评估它是否会改变你的设计约束，再着手解决方案。 我们处理这个问题的方式是维护一份文档，记录各种小问题和烦扰之处。对于明显的修复，我们行动迅速，但会跟踪那些次要问题，以便在重新设计时，能够集中处理它们。关键在于，我们要避免过度反应，以免制造更多混乱。

2. 删减内容。

智能体喜欢添加内容。你的工作是删去不必要的部分。

这一点应该非常熟悉，因为智能体在代码和计划中也会做同样的事情。它们偏爱双重保险，比如多加一层 try-catch，或者反复实现同一个工具函数。

在 UI 设计中，智能体也是如此。它们喜欢添加额外的文案、线条和图标。最终你会得到一些看起来比大多数工程师手工制作的更出色的设计，但实际上却有些糟糕。

一个简单的步骤是，审视设计中的每一个元素，并对每个元素问一句：“我真的需要它吗？”

3. 在设计工具中迭代。

你不应该在产品中直接进行设计迭代。使用一个能让你精细控制、并能以最少额外上下文快速迭代的工具。

原型引力是无声的杀手。 这意味着，当智能体在你的代码库中构建出第一版后，你会觉得直接优化它比探索其他方案更容易。在真实代码库中设计，也会迫使智能体构建一个嫁接在你现有代码上的版本。

Figma 依然是王者，而且其 AI 集成每周都在进步。Cursor Design Mode、Claude Design、众多新创公司，甚至 HTML 原型也都很出色。

请务必使用专为设计而生的工具，并让 AI 为每个元素生成 3-4 个变体。

4. 使用组件和库。

这一点对大多数工程师来说可能显而易见，但它非常重要，所以我简要提一下。

分离视图与逻辑。创建可复用组件。

这并不难，而且回报丰厚。你的应用将呈现视觉上的统一性，而不是一堆重复实现的按钮拼凑而成的补丁。

在 Ref，我们为此维护了一个 /showcase 页面。我们让智能体先在那里构建 UI 组件，进行试验，然后再连接到主应用。

5. 使用预览部署。

评估设计的最佳方式是使用真实数据。预览部署让你能够使用真实的后端来尝试新设计。

重要的是要记住，总会有一些打磨和返工是必要的。即使代理完全按照你的指示构建，当你拿着真实数据时，仍可能发现它并不合适。

对于涉及前端和后端的大型功能，预览部署可能会有些棘手。在Ref，我们通过分离前端和后端的PR来解决这个问题。后端更改可以通过单元测试和集成测试来验证。前端更改需要人工验证，而预览部署使得分享链接变得容易。

6. 借鉴优秀方案。

大多数用户体验问题已经被解决过了，你应该做的是取其所长，组合运用。花些时间研究解决类似问题的产品，或者那些传达类似理念的产品。

我合作过的每一位顶尖设计师，在开始每个项目时都会先收集一堆截图。你也应该这样做，这能为你的代理提供极佳的上下文。

7. 探索你的品味。

这是最有趣的部分！

品味，是对自身反应的反思。抱歉，Kyle Chayka，但反思个人体验并非布鲁克林阁楼派对上的专利。它是创造佳作、避免平庸所必需的。

产品工程师擅长识别设计中的问题，却难以知晓如何修复。工程师所欠缺的是从经验中汲取的解决方案库。构建这一库，只需反复尝试与反思。

玩耍与探索充满乐趣，但也可能相当残酷，因为直到作品足够出色前，批评如潮水般涌来。

在Ref，我们没有全职设计师，因此采用一种农业脱粒的方式来磨砺品味。我们将设计置于中央，用棍棒敲打，直至我们对其感到满意。

我所能分享的就这些了。祝好运，玩得开心。