Claude Code，以研究预览形式推出可绘制UI初稿的/design技能

曾经只写代码的工具，如今也能画界面

此前，Claude Code一直是一款在终端里编写和修改代码的工具。如果需要设计界面，通常得由人先画好布局，再用语言描述、转化为代码。此次Anthropic新增的/design技能改变了这一顺序。虽然以斜杠命令的形式调用，但官方公告明确将其归类为"技能（skill）"。执行该技能后，Claude会先生成多个可编辑的界面初稿，也就是所谓的"画板"，供用户选择其中一个进行调整，之后Claude再将其实现为真正的代码。

这一消息由ClaudeDevs账号公布，testingcatalog对此进行了转发报道。据公告介绍，/design目前仍处于研究预览阶段，其结构是在Claude的产出形式artifacts——即把Claude生成的代码或文档显示在单独窗口中、可直接查看与修改的功能——之上叠加了画板工作流。画板本身是Claude Design中沿用的概念，指的是将多个UI方案并排展示、比较并打磨的工作方式。

如何使用

据公告介绍，目前支持的环境是Claude Code CLI和桌面应用。在命令行中输入/design即可启动，由于仍处于研究预览阶段，根据账号或推送进度不同，部分用户可能尚未看到该功能。

1. 打开Claude Code CLI或桌面应用后输入/design。
2. Claude会针对所请求的界面生成多个可编辑的画板并展示出来。
3. 从中选择一个满意的方案。
4. 直接调整颜色、布局、文案等，或以语言方式提出修改要求。
5. 将确定后的画板交给Claude，由其实现为可运行的代码。

除处于研究预览阶段这一点外，公告中并未说明具体的付费方案或地区限制条件。举例来说，可以先生成多个网页服务落地页方案，选定其中一个直接转化为可部署的代码，或者用于反复打磨内部仪表盘的布局。

Claude Design，走到今天用了两年多

这项技能并非突然出现的功能，而是Anthropic持续缩短设计与代码之间距离这一脉络的最新阶段。

• 2024年6月 — 引入artifacts：Claude生成的代码、文档可以在对话窗口旁的独立窗口中直接查看和修改。这正是此次画板功能所依托的基础。
• 2026年4月17日 — 发布Claude Design：Anthropic实验室以研究预览形式推出了基于画板的设计工具。面向Pro、Max、Team、Enterprise等套餐用户开放，底层模型为针对视觉工作调优的Claude Opus 4.7。
• 2026年6月18日 — 与Claude Code首次打通：开启了将完成的方案打包为"handoff bundle"、交由Claude Code实现的联动功能，使用额度也与聊天、Claude Code版本统一整合。
• 2026年8月17日 — /design技能进入研究预览：原本需要在不同应用间切换的画板工作流，如今直接进入了Claude Code的CLI与桌面版内部。

四个月内，路径逐步收窄为"独立产品 → 交接联动 → 内嵌进工具"。

分类	此前方式	引入/design后
方案制作	人工直接编写初稿	Claude自动生成多个画板
修改方式	以文字提出要求后查看代码	直接在画板上调整
产出位置	独立文档或图片	在artifacts内直接编辑

编者按

此次/design可以解读为一个信号：编码智能体之间的竞争，正在从"代码写得好不好"，转向"能否将整个界面都交出去处理"。像Cursor这类竞品工具最近也在私有测试中试用可纵览整个代码库的标签页功能，方向大体一致。大家都在朝着让智能体不再只处理一行代码，而是掌握整个项目的上下文——这次则延伸到了设计层面——的方向前进。

与前几代产品相比，这种变化的体感十分明显。以往对编码智能体说一句"把登录页面做得漂亮一点"，得到的往往是一整块直接甩出来的代码。如果不满意，就得从头重新写提示词。而这次的方式不同之处在于，在中间加入了"挑选与打磨"这一环节。摆出多个方案进行比较的流程本身，就与人在设计工具中所做的工作十分相似。

从实际使用角度来看，"研究预览"这个标签目前还不宜轻视。比起直接接入正式的服务代码库，更稳妥的顺序是先在个人项目或原型阶段试用，并自行确认一次调用会触及多少个文件。一次调用就同时修改多个文件的功能，目前尚不适合不经审阅就直接合并使用。

预计未来几周内，将会有不少实际使用过该功能的开发者陆续分享体验，画板方案能在多大程度上延伸至实战级代码质量将是关键所在。研究预览标签何时摘除，也是值得持续关注的部分。