Anthropic 为 Claude Code 增加 /design 命令,用于终端 UI 原型设计

Anthropic 通过新增的 /design 命令扩展了 Claude Code,让开发者无需离开终端即可创建、迭代并查看 UI 原型(mockups)。

直接在终端进行 UI 原型设计

无需在 Figma 和 Shell 之间来回切换,你现在只需输入类似 /design a few options for a login screen 的指令。Claude 会回复几个交互式的“画板”(artboards),展示高保真原型。你可以在编写任何一行生产代码之前,通过追问来比较布局、挑选心仪的设计并优化外观。

基于代码库的上下文感知原型

开发者 Nate Parrott 指出,Claude 实际上会读取当前的仓库。它会提取配色方案、组件库和布局规范,从而量身定制每个设计,以匹配项目现有的风格。结果会以 “Artifacts” 的形式呈现,这是 Claude 内部的一个专用视图,无需打开单独的图形编辑器即可显示图像。在现阶段,这些原型仅存在于 Claude 的工作区中;在将它们转化为代码之前,你必须显式地将它们保存到文件系统中。

为什么这对 AI 辅助开发至关重要

该命令将软件开发生命周期(SDLC)中的设计和编码两个阶段合二为一。追求速度的团队可以通过单个提示词生成多种布局选项,从而加速早期探索阶段。由于 Claude 使用的是实时代码库,原型能够保持品牌一致性并与组件系统兼容,减少了在使用通用图像生成后所需的后续手动清理工作。

Anthropic 将此视为迈向能够同时处理逻辑与美学的“AI 软件工程师”的一步。如果终端可以作为一个多模态工作区,那么编写代码与塑造用户体验之间的界限将大大模糊。

当前局限性

该功能仍处于预览阶段。生成的原型不会自动变成源文件;你必须亲自进行导出和集成。这一额外步骤可能会消耗节省下来的时间,尤其是在拥有数十个组件的大型项目中。

如何尝试

运行 claude update 以获取最新的预览版本并启用 /design 命令。

核心要点

  • 集成化原型设计: /design 直接通过终端提示词生成多个 UI 画板。
  • 上下文一致性: Claude 扫描当前代码库,使原型与现有的设计系统保持一致。
  • 精简的工作流: 通过将 Claude Design 的提示能力与 Claude Code 的执行能力相结合,开发者无需切换工具即可从概念转向视觉原型。

Anthropic 的新 /design 命令让开发者可以直接从终端创建和迭代 UI 原型,减少了设计工具与代码编辑器之间的往返切换——这是许多快速迭代的团队仍在努力解决的瓶颈。

通过 CLI 提示词生成视觉草图

你输入类似 /design a few options for a login screen 的命令,Claude 会返回一组交互式画板。每个画板都展示了一个高保真原型,你可以通过追问来检查、比较和完善它。

Claude 读取当前项目中的文件,提取配色方案、组件库和布局规范,然后量身定制设计以实现匹配。输出以 “Artifacts” 的形式出现,这是一个无需打开单独图形编辑器即可显示图像的视图。目前,原型仅存在于 Claude 的工作区中;在将其转化为代码之前,你必须显式地将它们保存到文件系统中。

为什么开发者关注“终端内设计”工具

大多数开发者每天的大部分时间都在代码终端和 UI 设计应用之间切换。将视觉原型设计引入编写代码的同一个窗口,将软件开发生命周期的两个阶段合二为一。

对于注重速度的团队,通过单个提示词生成多种布局选项可以加速早期探索阶段。Claude 对现有代码库的读取确保了原型符合品牌风格并与项目的组件系统兼容,减少了通常在通用图像生成步骤之后所需的手动清理工作。

Anthropic 将这一新增功能视为迈向能够同时处理逻辑与美学的“AI 软件工程师”的一步。如果终端现在可以作为一个多模态工作区,那么编写代码与塑造用户体验之间的界限就会变得更加模糊。

局限性与传统设计工具的必要性

该功能仍处于预览阶段,且存在一些实际的限制。首先,生成的原型图不会自动转换为源文件;开发者必须手动进行导出和集成。对于需要同步数十个组件的大型项目,这一额外步骤可能会抵消原本节省的时间。

随着功能的成熟,值得关注的方向

Anthropic 的更新说明指出,该命令可以通过简单的 claude update 来启用。

总结: 在 Claude Code 的终端中嵌入设计提示词,为开发者提供了从概念到视觉原型的快捷路径,但工作流仍依赖于手动交付,且缺乏专业 UI 工具的深度。其后续演进将决定该命令是仅作为一种小众的便利工具,还是会成为 AI 驱动开发栈的核心组成部分。