你以为 AI 编程工具只能给你代码？Claude Code 悄悄塞了一个「设计师模式」进去，用了一个月我把选型账算清楚了

上个月 Claude Code 周报里塞了一个我没注意到的功能：Week 34 的 /design，把 Claude Design 的画板工作流接进了 CLI 和桌面版。用了一个月，我觉得它把「设计师和 AI 协作」这件事翻了个面。

先说它是什么。

/design 是一个 research preview，跑起来之后 Claude 会根据你的一句话需求，在Artifacts里生成一组可编辑的 UI 画板——不是代码，是视觉稿。你挑一个，改一改，然后让它按你选的那个实现。底层是 Claude Code 的 Artifacts 能力，所以生成的不是截图，是可以点开的 HTML。

整个流程大概是：

你：Claude Code /design 帮我重新设计这个项目的 composer，根据大家实际用它的地方来调整交互
Claude：生成 4-6 个不同风格/布局的画板，发布到 Artifacts，给你链接
你：打开 Artifacts，翻一翻，点开你喜欢的那个，告诉它「第二个，参考 B 的配色和 C 的布局」
Claude：按你的选择直接开始实现

这和传统的「Copilot 给你代码」完全不同。Copilot 给的是代码，你脑子里要先有一张视觉图，然后去读代码理解它是否符合预期。/design 把顺序反过来了——先让你看图挑图，最后才给代码。

为什么这件事值得认真用

我之前做 UI 迭代的方式是：脑子里有个模糊的想法 → 直接让 AI 生成代码 → 看了效果不对 → 改 Prompt → 重新生成。来回折腾三四次很常见，每次都在等跑完才发现方向偏了。

/design 把这个循环拆成了两段。第一段是纯视觉探索，没有代码包袱，改起来快，翻起来也快。第二段才开始写代码，而且你已经知道最终长什么样——Claude 不是在猜，而是在执行你定好的决策。

具体来说，它的适用场景有几类：

探索阶段你想快速验证多个方向。比如一个数据表格的筛选器，你不确定应该折叠在浮层里还是展开在侧边栏，两种方案各出一张图，比看两套代码快得多。

设计师不在场的产品对话。没有设计师资源的时候，产品和研发对「这个按钮应该多大」这种问题的讨论经常各说各话。Artifacts 的图可以直接丢给产品和设计看，给他们一个具体的讨论基础。

组件级别的风格一致性确认。你想把整个项目的按钮风格从扁平改成有点圆角感，先出四张图对比扁平/微圆角/大圆角/拟物化，不用改一行代码就能对齐团队审美。

什么情况下不适合用

它不适合需要精准数据可视化的场景——Artifacts 生成的是示意稿，不是 px-perfect 的设计文件，细节精度比 Figma/Sketch 差很多。它也不适合已经在 Figma 里有完整设计系统的团队，这时候 /design 更像是快速草图工具，而不是生产文件替代品。

另外目前是 research preview，功能稳定性和未来变化都不好说，别拿它做核心交付物的生产工具。

怎么开

需要 Claude Code v2.1.233 或更新版本，订阅级别是 Pro、Max、Team 或 Enterprise。装好之后直接跑：

Claude Code /design 帮我重新设计导航栏的移动端交互

然后等它把 Artifacts 链接发给你。

下一步可以做什么

如果你已经在用 Claude Code，今天就可以开一个项目跑一次 /design，感受一下「先选图再实现」和「直接出代码」的节奏差异。如果你是在带团队，可以把它当成研发和产品之间的视觉对齐工具——不用每次都请设计师，先让 AI 出图，产品确认方向，研发再动手。设计上真正需要设计师精细化的地方，到时候再来回反而更高效。