Claude Code的/design命令：在构建之前先绘制界面草图。

人类负责规划，Claude负责执行

Anthropic分析了约235,000名用户进行的400,000次Claude Code会话，发现决策分工极不均衡。大约70%的规划决策由人类做出，即决定要构建什么功能；而约80%的执行决策由Claude完成，包括选择哪个文件、使用何种语法以及执行哪条命令。在研究的七个月里，修复错误代码的会话比例从33%下降到19%，而操作软件和分析类任务的会话则有所增加。

这种分工模式解释了Anthropic本周推出的新功能。一旦执行环节由AI接管，瓶颈就会转移到人类仍需处理的环节上；而对于任何需要界面的任务来说，规划过程都是可视化的。在还没有人见过对应界面时，仅仅输入“构建设置页面”这样的指令是无法明确具体要求的。这就好比在没有进入过某个房间时就试图描述里面的家具一样。

所以我们大多数人都是通过动手实践来探索。构思、编写代码、渲染结果、发现不足，再重新编写。每一个被否决的创意都要用最昂贵的“代价”来支付。

发生了什么变化

Claude Code与Claude Design已经可以互相通信了。你需要注册设计MCP服务器并登录：

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
/design-login

一旦连接成功，设计稿就可以被导入代码库，代码则能转化为可运行的原型，双方之间可以实现双向交互。而这一切在上周之前就已经存在了。

新出现的则是 /design 命令本身。Anthropic 于2026年8月17日在 Claude Code 中发布了它的早期预览版本。负责开发 Claude Design 的产品设计师 Nate Parrott 宣布了这一功能，Claude Code 团队也在同一天给予了支持。在命令行界面或桌面应用中，Claude 现在可以生成若干个可编辑的 UI 原型，这些原型被称为画板，并以“工件”的形式呈现。用户选择其中一个，对其进行调整，然后告诉 Claude 进行生成。Pro、Max、Team 和 Enterprise 套餐都包含此功能，可通过 claude update 命令将其获取。

“这两种产品可以同步”与“画板存在于你的终端中”听起来像是管道工程相关的内容，但实际上它改变了被否决的创意所需付出的代价：之前需要四百行JSX代码，而现在只需大约九秒钟的查看时间。通过循环可以产生六个视觉方案，其中五个被舍弃，只有一个被实现。

过去探索创意的途径

在使用该命令之前，只有两种选择，而且两种都不便宜。

第一种方法是用文字描述界面，然后寄希望于运气。输入三段关于卡片间距和层级的描述后，Claude会生成一个组件，打开本地服务器后却发现某些问题，而这些问题是提示词根本无法预料的。最终你不得不修改代码来修正本应通过三十秒查看就能解决的布局问题。

第二种方法是打开 claude.ai/design 在那里制作原型，然后将结果与仓库中的实际组件进行整合。这是一种不错的方法，通常也是正确的选择。问题在于在不同工具之间切换，而这种切换会扼杀探索精神：因为你一旦选定一个方向，就会放弃其他六个方向，毕竟打开另一个标签页就感觉像是在做出最终决定。

Parrott自身的经历解释了其中原因。2025年底时，他在VS Code的Claude Code项目中仅是唯一的设计师，还有两名工程师协助。11月Opus 4.5版本发布后，这两名工程师的工作效率大幅提升，他不得不加快自己的进度。他最初的尝试是将终端输出和截图粘贴到Claude中并要求其进行设计，但据他自己所说效果很差。解决办法是向Claude提供HTML画布而非文本框，因为HTML是一种丰富的视觉媒介，而Claude在处理这类内容方面表现极为出色。这便发展成了Claude Design，而/design功能则将同样的设计工作流引入终端，与代码一同使用。

让其发挥作用的习惯

Parrott在7月发布了自己的最佳实践指南。这些指南几乎完全适用于命令行界面，其实用价值远超任何功能列表。

在输入提示语之前先思考。他在设计之前会花时间构思提示语，有时直接口述，有时则坐在沙发上用手机便签应用输入。明确自己的需求与提出请求是两回事，模糊的提示语只会让系统在处理你最终会拒绝的内容上浪费资源。

描述期望的外观风格。若不加以引导，Claude往往会倾向于几种固定的美学风格，你一看就能认出来。可以指定字体和颜色、提供灵感板，或者让它提出字体与颜色的组合方案，再与其讨论直到找到合适的搭配。仅这一习惯就能让输出结果更像你的产品，而不至于和过去一年半里所有AI生成的落地页看起来一模一样。

在精度可以稍后处理的阶段，先从线框图开始。这样效率更高，还能让 Claude 专注于结构而非视觉细节。当还在为筛选器选择侧边栏还是顶部栏时，渐变只会增加干扰。在完善某个设计之前，先尝试八种结构方案。

先提出十个方案，再加以整合。大多数方案不会很好，这是意料之中的。Parrott 的建议是选择选项 B 加上部分选项 D 的特点，然后要求出五种将它们结合的变体。

最后一步要手动完成。在画布上直接进行编辑，比如重新排列、删除、调整大小以及修改文字或颜色，不会消耗任何令牌。通过提示词让系统完成相同操作则会耗费大量资源，而且对齐问题用眼睛查看比用文字描述要容易得多。别再写关于内边距的句子了。

草图与标注。如果在脑海中已有无需文字的布局，就将其画在纸上并拍照。不必写段落说明指的是哪个元素，直接点击该元素并描述即可。

有效提示词的构成要素

这些习惯其实可以归结为一种包含五个字段的可重复使用结构。缺少任何一个字段都会导致可预见的失败结果。

数量。指定所需的方向数量。给出具体数字，否则系统会随机生成。线框图适合用6个方向，高保真图像则适合用3个方向。

保真度。明确要求线框图还是精细渲染版本。因为模型往往会倾向于生成精细版本，而精细处理会耗费大量时间和资源。

具体对象。需指定一个有边界、有名称的界面元素，比如通知偏好设置面板、首次使用时的空白状态或发票详情视图。“控制面板”这类表述范围太过宽泛。

代码中的限制条件。哪些现有组件必须出现。这就是命令行工具发挥作用的地方，因为Claude能够读取这些条件。无论如何都要给它们命名，因为明确指定总比盲目期待要好。

美学方向，或明确的暂缓处理方式。指定字体和颜色，或者写上“仅考虑结构，暂时忽略视觉样式”。保持沉默是唯一一定会适得其反的选择，因为沉默会导致采用默认的样式风格。

/design 6 wireframe options for the invoice detail view.
Reuse DataTable and StatusPill from src/components.
Structure only, no styling yet.

将其与人们通常首先输入的内容 /design an invoice page 相比，命令相同，但输出结果却大相径庭。

Anthropic 为 Claude Design 提出的提示词建议与此不谋而合，值得一并参考：明确目标、布局、内容以及目标受众。上述五个要素旨在激发多样性，而 Anthropic 的方法则适合生成一个优质结果，因此应在已明确需求时使用。

检验提示词是否发挥作用的简单方法：查看返回结果，判断选项之间的差异是体现在层级结构上还是仅限于颜色上。若六种结果采用相同的信息架构，说明提示词范围过窄或过早要求优化；理想情况下，对于“此界面应优先展示什么”这一问题应得到六种截然不同的答案。你支付的费用应对应不同的决策，而非不同的配色方案。

连接你的真实设计系统

/design-sync 可将你的本地设计系统导入 Claude Design，这样它生成的元素都会基于你真实的组件，而不会凭空创建按钮类。该工具能够从 GitHub 仓库、设计文件、上传内容或本地代码库中读取数据，你还可以同时为该系统命名：/design-sync Acme DS。

有两点需要提前规划。Anthropic 的命令参考说明指出，首次同步会验证所有组件，在大型仓库中可能需要数小时时间，因此建议在午餐前启动，避免在演示前夕进行。帮助中心也指出大型代码库会导致延迟，并建议通过 Claude Code 而非浏览器来链接这些代码库。此外，由于当前实现主要针对 React、Vue 和 Svelte 项目，因此 Vue 和 Svelte 项目需要依赖 Claude 在会话中直接读取组件。

一个管理上的问题：企业版套餐默认关闭了 Claude Design 功能，管理员必须先将其开启才能使用相关功能。

费用情况

Claude Design 不再有独立的额度限制。其使用量会从与 Claude Chat、Claude Code 和 Cowork 共享的额度中扣除，Anthropic 明确指出，复杂项目、庞大的代码库以及大量迭代会消耗更多资源。此前曾有独立的每周额度，但现在已取消。

通过命令行使用时比通过网页更易达到额度上限。当你请求生成多个完整设计稿时，会话中已包含索引过的代码库及正在进行的对话。一旦达到额度限制，直到管理员重置额度之前都无法使用 Claude Design。

降低成本的办法是反其道而行之：采用有限的功能而非多屏幕流程，先制作线框图再做高保真设计，最后10%的部分由人工在画布上编辑，这部分无需付费。

/design 不做的事情

Parrott明确指出了其适用范围。Claude Code用于编写生产级软件，而 Claude Design则负责其余工作，包括早期构思、协作以及在开始实际开发前获得各方认可。他说，在 /design 出现之前，终端内的画布消除了这种界限。不过现在的划分方式有所不同：在同一会话中，一边是发散思维，另一边则是收敛思考。

该命令并不会接管构建流程，它只是在构建流程之前增加了一个可视化规划步骤。你可以在画布上探索不同的方案，选定一个后，再回到普通的 Claude Code 中进行实现、测试、重构以及完成软件开发的其他工作。

这个功能才推出几天，现状就是如此：设计内容会进入构建步骤，但仍需手动保存。/design并未出现在官方的 Claude Code 命令参考中，而 /design-login 和 /design-sync 则被列在其中。其功能表现很可能会发生变化。

该使用哪种界面

当输出内容即将被放入你已经检出的代码仓库时，应在 Claude Code 中使用 /design。毕竟，能够贴近自己的代码才是关键所在。

当目标受众为个人时，可使用 claude.ai/design：无论是演示文稿、单页文档、着陆页，还是用于用户测试的点击式原型，基本上任何利益相关者无需终端即可通过浏览器打开的内容都能处理。该工具可导出 PDF、PPTX、独立 HTML 文件及 .zip 压缩包，同时还能将作品发送到 Canva、Miro、Replit、Vercel 以及与 Figma 相关的工具等。

它支持两次往返传输，因此在一个平台开始的工作可以转移到另一个平台。没有本地开发环境的设计师应以网页应用作为主要工作场所，以交接流程作为连接手段；而习惯在代码仓库中工作的工程师则应使用 /design 功能。

如果 Figma 是你的权威设计源

并非必须进行选择。2026 年 2 月 17 日，Figma 与 Anthropic 共同发布了 Code to Canvas 功能，它能够将 Claude Code 中正在运行的渲染界面以可编辑的帧形式发送到 Figma，而非静态截图。请安装该插件：

claude plugin install figma@claude-plugins-official

接着在某个会话中打开 /mcp，连接远程 Figma 服务器并完成身份验证。如果出现 figma-desktop 项，应将其禁用，因为那是本地只读服务器，会与远程服务器冲突。之后，点击“发送到 Figma”就会调用 generate_figma_design 函数。

有些人在此步骤中遇到了问题。Figma 社区论坛上的帖子描述了界面卡在无限处理循环中，最终生成空白文件的情况，不过至少有一名开发者通过简化页面使其正常运行。在向设计师做出任何承诺之前，建议先在可丢弃的示例上测试。

简而言之，/design 在任何代码存在之前进行探索，而 Code to Canvas 则会将已存在的代码重新放到画布上，供团队讨论。

首次运行

挑选一个你一直考虑但尚未实现的功能，并为其设定范围：一个面板、一个模态窗口或一个设置页面。运行 claude update，在对应的仓库中打开会话，然后开始着手实现：

/design 6 wireframe options for a notification preferences panel.
Use our existing card and toggle components. Structure only,
no color or polish yet.

仔细审查这六个版本，确认它们在层级结构上确实存在差异。删掉四个。对剩下的两个要求制作五个混音版本。选出最佳方案，要求提供一个使用明确指定的字体和颜色的高保真版本，并手动调整画布上的间距，而非仅通过文字描述。只有在完成这些之后才说“实施这个方案”。

记录下所需时间。整个探索过程所耗时间应少于在代码中实现“能否将切换按钮移到右侧”这一功能所需的时间，而且最终确定的布局是你亲自挑选且并非勉强接受的。

这才是真正的变革，它比这类发布通常宣扬的行业转型要更为微小且实用。AI编码早已让方案的实施变得廉价，现在糟糕的想法也能轻易被舍弃。智能代理负责处理大部分具体操作，而查看各种选项则能提升你对核心目标的认知，而这始终都是你的职责所在。