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

配了三个月 Claude Code，今天它突然多了个 /design 命令。不是截图，不是描述，是直接生成可编辑的 UI 画板，让你挑、让你改、然后它帮你把选中的那个直接写成代码。

这件事听起来像是把 Figma 插件塞进了终端，但实际上比那更激进。

/design 做了什么

在 Claude Code 里敲 /design，给它一个需求描述，比如「重新设计这个编辑器的主输入框」，它会生成多个界面方案作为可编辑的 Artifacts 页面发布出来。每个方案都带注释，解释不同设计的权衡取舍。你直接在画板上改颜色、调布局、换交互逻辑，确认方向之后说「实现 B 方案，带我的修改」，Claude 就把那个画板变成你项目里的真实代码。

官方 demo 里的完整流程跑了 4 条 Bash 命令、创建了 4 个文件，工具调用两次，最终变更量报告 +212 -0。从设计确认到代码落地，全程在同一个会话里，没有导出、没有复制粘贴、没有来回切换。

这件事为什么不是「又一个 AI 生图」

关键在于它读取了你的代码库。Claude 在生成画板之前会先了解你项目里现有的 UI 风格、组件结构和设计 token，然后生成与之一致的方案，而不是生成一堆普拉斯蒂克感的通用图。你也可以在 CLAUDE.md 里显式注入设计规范，Claude 会优先遵循你的规范而不是它的默认审美。

这意味着 /design 的输出不是孤立的 mockup，而是你代码库风格的延伸。从这个角度看，它更接近「结构化设计系统 + AI 生成」，而不是「文生图」。

token 是真的贵

目前已知的是：生成多版画板会显著增加 token 消耗，token 消耗随上下文历史累积。当前是研究预览阶段（research preview），官方建议 Pro / Max / Team / Enterprise 用户先用，版本要求 v2.1.233+。

对现有的工作流冲击在哪里

过去的设计-代码工作流是：产品提需求 → 设计师出图 → 工程师评审 → 手动实现。中间隔着设计工具、文档、交接会，任何一个环节的沟通损耗都会变成返工。

/design 把这个顺序倒过来了：需求 → AI 出多版方案 → 你选和改 → 代码直接落地。设计师的角色变成了「设计质量把关和边界判断」，而不是「第一轮执行者」。

对于内部工具、SaaS 后台、管理面板这类偏功能的界面，这个工作流已经可以跑起来了。对于品牌感要求高的面向用户界面，AI 生成的方案还需要人工精修，但「精修」和「从零设计」的工作量差一个数量级。

下一步是什么

如果你在 Pro 以上的订阅，更新到最新版（claude update），输入 /design 试一个你不确定界面怎么做的功能。关键不是让 AI 直接给出最终方案，而是把它当作一个「比你先动手画的搭档」——它先出多版，你来挑和改，确认方向之后再让它写代码。这样设计决策发生在写代码之前，而不是写完之后来回返工。