我搭建了一个落地页，全程没有打开 Figma 一次。主要用到的工具是 Claude Design 和 Claude Code。制作周期为一周，与 AI 来回交互超过 300 次。
从这 300 次交互中我学到的是：虽然“制作”这件事因为 AI 变得轻松很多，但最终品质的上限仍然取决于人的判断力。AI 负责把所有候选方案提供出来，而从中提升到预期调性，则是判断品质并打回修改的那个人该做的工作。
我为 Design Harness 搭建了文档站点，这是一个从约束、上下文、验证、评估四个层面处理设计的框架。因为是关于设计的网站，所以我也顺便作为副主题，想看看表面细节和交互能走到多远。
https://x.com/kgsi/status/2072829167285207077
接下来我会回顾自己采取的步骤、以及那 300 次交互具体花在了哪里，还会包含实际截图。
我是如何区分使用 Claude Design 和 Claude Code 的
我通过两种主要工具分工来搭建这个落地页。Claude Design 是一款对话式设计生成工具，通过聊天给出指令，实时生成 HTML 原型。Claude Code 则是一个在终端中运行的编码 Agent，直接实现代码库。
分工很明确：Claude Design 擅长早期快速成型。这次我提供了一份总结设计策略和线框图的文档，回答了几个问题，第一个落地页就输出了。这个方法在尝试方向和“打碎重来”的阶段非常有效。
而到了要把它做到生产品质的阶段——比如响应式支持和无障碍细节——就需要用 Claude Code 来打磨。
用 Design 决定设计，用 Code 完成落地。 我就是按这个顺序使用的。
动手之前，先用语言把一切说清楚
当我决定做这个网站时，方向已经确定了。我脑子里想的是“如果在经典海外风格的调性上加入现代字体和效果，会变成什么样”。这个概念本身来自 Design Harness 文档。
注意，Claude 无法自行生成图片，所以这部分我交给了 ChatGPT Images 2.0。我从示例网站图片中推导出替代方案，为自己想要创建的网站建了一个情绪板，并生成了背景图片。我事先把所有东西都用语言和图片定义好了，明确‘好’的方向。 后面所有的交互其实都是拿来和这个对照的。
用 Codex（ChatGPT Image 2.0）探索视觉调性，浏览各种图片和情绪板。
打磨需要数百次交互（至少）
准备工作完成后，与 Claude Design 的来回交互就开始了。回看截图，总共有超过 200 次交互（按总制作时间算大概一周）。以下是各会话的分摊：
- “落地页生成需求”：约 80 轮
- “Design Harness 动画”：约 80 轮
- “KV 文字背景显示动画”：约 50 轮
- “改进 Design Harness 解释”：约 10 轮
开场加载动画和主视觉（KV）效果花费的交互特别多。效果不是一次完成的，而是我叠加指令逐步打磨（比如从底部出现的效果、叠加模糊效果等）。
Claude Design 的截图。因为上下文越长精度越低，所以每个重要任务我都新建了会话来探索。
另外我还在用 Claude Code 打磨响应式支持和无障碍，所以总共加起来约 300 次交互。凭感觉，我觉得 Hero 区域花的时间最多。
从 Claude Design 转到 Claude Code 时，我用了 Share 功能，但我建议通过“导出”传递整个 zip 文件。虽然“发送到”更方便，但它有图片传输限制，复现精度也不够高。
看数字可能会觉得这是件苦差事，但下指令本身已经变得容易了。你不再需要完全理解 HTML 和 CSS。Claude Design 有标注功能，你可以在屏幕上直接给元素添加评论。只要指向你想修改的部分，几乎所有细节指令都能传达。所以我给的指令大多属于三类：
- 用标注指向元素来修复细节。
- 用语言描述运动，比如 KV 文字背景显示。
- 把调性重新拉回到“经典海外风格”……唯一剩下的必要技能，就是用语言描述运动和调性的能力。
以导航为例，来看看来回交互的过程：
一开始是一个悬停时下划线滑动的效果，但不太易懂，所以我提供了一个参考实现的 URL，让它改成字符乱跳效果。然后乱跳时字符宽度变了，导致菜单位置偏移。让宽度固定后，间距又变得不均匀。再次打回说“还是不均匀”，但也没修好。最后我放弃了调整宽度，把导航字体改成等宽字体搞定。如果字符宽度恒定，乱跳时也不会移动。这花了 5 次交互。
300 次交互基本上就是重复这个循环：提供想参考的网站或实现 URL 来指明方向。用简单的语言描述对输出结果的不满意，比如“间距不均匀了”，然后打回。如果同样的修正失败两次，就不再微调，而是改变前提。从头到尾，我没写过一份长的规格文档。
顺便一提，虽然这次我几乎没用，但有一份叫“动画词汇和技巧”的文档，用了应该能让指令更高效。https://animations.dev/vocabulary
“制作”与“判断”
回顾交互的内容，其实就是一个判断输出结果的质量，并反复打回修改的过程。 制作这件事本身现在几乎可以完全交给 AI 处理。给出指令，候选方案立刻出现。但是，动画时机对吗？留白够不够？什么是好、什么是差？AI 无法判断。想让 AI 一次性输出符合预期调性的东西，目前还做不到。要想提升质量，只能自己判断和打回。
这可能就是为什么简单的一次性输出达不到这种品质水平。加州大学伯克利信息学院的一项研究观察了 13 场设计师使用生成式 AI 工具的会话，将输出倾向于一种看似“高品质”却千篇一律风格的现象称为 “趋同陷阱”。
https://x.com/kgsi/status/2074250174986362999
如果没有打回修改的判断力，输出就会陷入一种不属于任何人的平庸精致。 300 次交互中的大部分，都是用来把它从那里拉回到预期的调性上。
拥有判断力的人会怎样？
有一种观点认为 AI 最终能完全处理这些审美和质量判断。我觉得在某些领域确实会如此。
但在这 300 多次交互中，每一次都是我察觉到了不舒服并打回修改，而在这个过程中，没有任何迹象表明这可以被自动化。当然，这只是我搭建一个落地页的 n=1。其他设计工作是否也一样，我还不知道。
完成这个过程后，我的预测是：从事“制作”的人的位置会减少。原来需要一周来设计一个落地页的工作，会被用半天时间与 AI 来回交互的工作取代。到那时，能留在座位上的人，是那些面对排列好的候选方案时，能在几秒内说出“右边的方案可以，但动画重做”的人，他们拥有这样的知识和判断标准。我认为，能掌控 AI 同时具备判断力的人，需求反而会增加。
设计师应该打磨的，将从手转向眼睛。 我在那 300 次交互中做的判断，最终还是依赖我自己动手制作的经验。那么，在制作次数减少的世界里，有没有办法只锻炼眼睛呢？
顺便一提，可以学习“设计”技能的策展网站“Parascope”目前运营得不错 👉 http://parascope.design/
