Anthropic 的 Claude Code 将新增 /design 命令用于 UI 原型设计

Anthropic 正在迈出重要一步，将设计与开发融合，为 Claude Code 添加 /design 命令。该消息来自公司产品设计师 Nate Parrott，他于 8 月 18 日在 X 上分享了这一消息。该功能旨在为开发者和技术团队提供更简化的方式来处理交互式设计和开发。

工作原理如下：在编写代码之前，您可以在终端或桌面版 Claude Code 中输入 /design 来创建设计模型。例如，如果您输入 "/design a few options for {feature}"，系统将生成多个视觉草稿作为画布供您选择。然后，您可以选择最喜欢的一个，随心所欲地调整，并直接交给 AI 来构建。

真正巧妙的是底层逻辑。Claude 可以读取您现有的代码库，找出项目的当前 UI 风格，并自动创建可共享的原型作为 Artifacts。这意味着您绘制的设计不仅仅是一张漂亮的图片，而是一个功能原型，完美契合您项目的美学。

集成更进一步。以前，Claude Design 的编辑器和提示功能是独立的工具。现在，它们被直接整合到 Claude Code 中，有效地拆除了设计与编码之间的墙。这一举措可以为开发者节省大量时间，并使整个过程更加流畅。

对于任何曾经努力向开发者（或 AI）解释 UI 想法的人来说，这是一个改变游戏规则的功能。您不必用语言描述您想要的内容，只需将其绘制出来，让 AI 处理其余部分。这就像在一个工具中同时拥有设计师和编码员，随时与您实时协作。

当然，这只是一个开始。随着 AI 工具变得越来越复杂，我们可能会看到开发过程不同阶段之间更多的集成。但就目前而言，/design 命令是迈向设计与代码成为同一枚硬币两面的未来的有希望的一步。

关键要点

• 新的 /design 命令：Claude Code 将很快支持 /design 命令，用于在编码前创建 UI 原型。
• 工作原理：用户输入 /design 并附带提示，Claude 生成多个视觉草稿供选择。
• 智能集成：Claude 读取现有代码以匹配项目的 UI 风格，并创建可共享的原型作为 Artifacts。
• 统一工作流程：Claude Design 的编辑器和提示功能现已集成到 Claude Code 中，连接设计与编码。