Claude Code 今天会画图了——一行指令生成多版 UI，设计师的活它先干了

大多数前端开发者的真实情况是：没有设计师，全靠自己猜。猜颜色、猜间距、猜这个按钮该放哪，然后写完代码发现不对，再改。如此循环。

这个问题今天被 Claude Code 的一个新功能彻底变了。

8 月 18 日，Claude Code 上线了一个研究预览功能：/design。用法很简单——在终端里输入一行指令，它不是直接给你代码，而是先生成多版可视化界面让你选，选完再动手写。

实际用起来是什么感受

输入 /design a few options for {feature}，Claude 会做两件事：第一，读你项目里已有的代码，理解你现在用的颜色、字体、组件风格；第二，基于这个理解生成 3-4 个不同设计方向的界面，每个都是可交互的 Artifacts，可以直接在里面改颜色、调布局、换文字。

你选一个最顺眼的，告诉它「这个」，它才会动手写代码。整个过程在同一个会话里，不用来回切换工具。

这个能力来自 Anthropic 4 月发布的独立设计工具 Claude Design，现在被直接搬进了 Claude Code。

设计先行，代码在后——这件事改变了什么

以前的工作流是：需求 → 写代码 → 发现不对 → 改代码。设计阶段的失误会传导到代码层，越往后改成本越高。

现在变成了：需求 → /design 生成多版 → 选一个确认方向 → 写代码。因为在写代码之前你就已经知道界面长什么样了，改动成本最低的阶段被前置了。

我试了一个真实场景——给一个定价计算器做界面。输入 /design a few options for price calculator，Claude 一次生成了四个版本：极简编辑风、数据仪表盘风、深色极客风、温暖消费产品风。四个版本用的是同一套示例数据，实时计算价格，差异在于视觉语言。哪个更接近你的产品，调性符不符合，一眼就能判断。

不用在脑子里想象对比，直接视觉对比，比写完代码再改高效得多。

适合谁，不适合谁

这个功能最有用的是两类人：独立开发者和小团队。没有专职设计师，AI 帮你生成多个符合产品调性的选项，这本身就解决了大问题。

局限性也要说清楚：这个功能是研究预览阶段，Token 消耗不小，设计需要手动保存（还不是自动流入代码），设计系统匹配度也不一定完美。如果你有现成的 CLAUDE.md 或 theme 文件，Claude 会参考它们来生成，设计系统覆盖越完整，匹配度越高。

但核心价值已经在这里了：设计阶段的视觉确认，第一次被做进了写代码的同一个环境里。设计工具和代码工具之间的那道墙，今天被 Claude Code 从里面拆了。

要体验的话，在终端运行 claude update 更新到最新版本即可。