配了三年前端，每次 UI 方案都要靠脑子建模——今天 /design 把这件事从设计到代码全接了

你做 UI 方案，以前要经历：脑子里想清楚 → Figma 出图 → 打开编辑器 → 写代码实现 → 运行看效果 → 发现不对 → 回 Figma 改 → 再写代码。这条链路今天被一个命令全接进了 Claude Code 终端里。

/_design 是 Anthropic 2026年8月17日随 Claude Code Week 34 上线的研究预览功能。核心逻辑很简单：给它一个设计需求，它在 Artifacts 画布上生成多张可编辑的 UI 方案图，你选一张、直接在画布上微调，然后让它按这张图生成真实代码。整个过程不需要离开终端，不需要切换工具，代码直接落地到你的项目里。

三步闭环：出图 → 选图 → 代码落地

第一步，/design 接需求。它基于自然语言描述生成多张方案图，不是直接写代码。比如：

/design a few options for the user profile settings screen

Claude Code 会返回一张可分享的 Artifacts 画布链接，里面是多张布局不同的方案图。这一步的价值在于：此前让 AI 生成 UI，模型直接出一个方向，你不喜欢就得改 prompt 重来。/design 把「选方向」和「写代码」拆成了两个独立步骤——先比较，再实现。

第二步，在画布上挑一张，精细化调整。画布上的每张图都是可编辑的，可以直接调整颜色、间距、布局。这个过程不需要写代码，也不需要在脑子里想象效果，你看到的就是最后会实现的样子。

第三步，告诉 Claude 实现哪张图。选好后，Claude 直接在你的项目里生成对应代码，以正常的 diff 形式呈现。review 流程和其他代码变更一样，该看还得看。

为什么这件事以前做不到

根本原因是「描述」和「视觉」之间的Gap。你跟 AI 说「给我做一个现代感的登录页」，AI 出的图和你脑子里想的可能完全不是一回事，因为语言在描述视觉这件事上有天然的模糊性。传统解法是 Figma 先出图，人确认后再写代码，AI 只是代码生成器。

/design 的逻辑是反过来的：AI 先出多张可视化方案，你用眼睛选，AI 按你选的方向生成代码。语言只负责描述需求，视觉负责做选择。这把「描述模糊性」这个问题绕过去了。

什么时候用它，什么时候不该用它

适合的场景：早期探索 UI 方向、给非技术背景的人展示选项、快速验证某个功能的设计思路。比如要给团队汇报一个新的仪表盘布局，传统做法是打开 Figma 画图，现在直接在终端里出三张方案，链接发出去，对方点开直接选，选完代码就进项目。

不适合的场景：已经有成熟设计系统的团队、精细的品牌级执行、需要 WCAG AA 无障碍审核的生产级 UI。它是研究预览，Anthropic 自己也说「expect rough edges」，artboard 生成会消耗大量 token，适合探索阶段而不是每个 UI 任务都用。

下一步

升级到 Claude Code v2.1.233 以上（cli 或 Desktop 均可），Pro/Max/Team/Enterprise 计划可体验。研究预览阶段不需要额外配置，/design 本身就是一条命令。

在项目目录下运行：

claude
design a few options for the landing page hero section

这条命令值得在下一个需要讨论 UI 方案的时刻直接试。不是因为它会取代设计工具，而是因为它把「脑子里想 → 视觉确认 → 代码实现」这条链路，从原来的跨工具协作变成了单终端内的闭环。