Claude Code /design 技能：直接在终端完成 UI 设计和代码实现

Anthropic 刚刚发布了一个融合视觉设计与终端原生编码的研究预览版。Claude Code 全新的 /design skill 将 Claude Design 的画板工作流直接嵌入 CLI 和 Desktop 应用，构建于 artifacts 之上。这意味着你现在可以从空白画布到已实现的 UI，全程无需离开终端。

消息由 Boris Cherny 在 Twitter 上公布："Claude Code 现在可以做设计了。全新的 /design skill（研究预览版）将 Claude Design 的画板工作流带入 CLI 和 Desktop，基于 artifacts 构建。运行 /design 获取可编辑的 UI 画板——选择一个、调整它，然后让 Claude 将其实现为代码。"

这不仅仅是一个代码生成的包装器，而是一个完整的设计闭环：生成画板、直观编辑，然后将设计交给 Claude 实现为实际代码。这套工作流旨在弥合"UI 应该长什么样"和"UI 在代码里是什么"之间的鸿沟。

这对你意味着什么

如果你一直在 Figma 或类似工具中设计 UI，然后手动将其翻译成 React 或 Tailwind，这会改变你的工作流。/design skill 让你可以：

生成画板——用自然语言描述你的 UI，Claude 会生成多个可编辑的画板选项。

直观调整——直接在画板上调整颜色、间距、布局，而无需编辑代码或 CSS。

自动实现——满意后，告诉 Claude 去实现，它会为你编写代码。

这对于没有专职设计师的个人开发者和小团队尤为强大。你无需为了匹配设计稿而与 CSS 搏斗，可以直观地迭代，让 Claude 处理实现工作。

它还与 Claude Code 现有的优势无缝集成。由于构建于 artifacts 之上，设计文件与你的代码共存，版本控制和迭代流畅无阻。作为一个 skill，你可以将它与其他 skill 和 CLAUDE.md 指令结合使用，来强制执行项目的设计系统。

开始使用 /design

claude
# 在 REPL 内输入：
/design

你将基于当前项目上下文获得一组画板。此后你可以：

请求变体："给我一个深色主题版本"或"试试更紧凑的布局"。

调整特定元素："让头部固定，并降低英雄区域的高度"。

实现："将第二个画板实现为带有 Tailwind 类的 React 组件"。

你也可以用特定提示词来调用它：

/design a landing page for a SaaS analytics tool with a pricing section

这是一个研究预览版，所以会有粗糙之处。但核心闭环——设计、调整、实现——已经可用，值得在你下一个 UI 任务中尝试。

向设计与开发统一迈出的重要一步

这是迈向设计与开发统一的重要一步。此前，你需要在设计工具、代码编辑器和终端之间来回切换。现在，整个闭环都存在于 Claude Code 内部。对于讨厌像素级调整的开发者来说，这是一个巨大的时间节省。

这也暗示了 Anthropic 的发展方向：让 Claude Code 不仅仅是一个编码助手，而是一个完整的产品开发环境。结合最近更新的 AGENTS.md 支持和 skills 框架，Claude Code 正在成为你规格化、设计、构建和交付产品的单一之地。

Originally published on gentic.news