Claude Design 迎来一次重大更新

🎨 Claude Design 是什么

Claude Design 是 Anthropic 打造的一款快速原型设计工具，旨在帮助任何人从创意到落地实现零距离跨越。与以编程为核心的 Claude Code 不同，Claude Design 以设计系统为根基的 UI 设计为核心，这一点让它与 Figma 和 Google Stitch 等工具有了相似之处。

我之前曾演示过如何使用 Claude Design 借助设计系统来创建新的设计方案。

Claude Design 发布至今已有数月，而 Anthropic 本周推出了该工具的重大更新。

本文将逐一展示更新内容，并讨论这次更新将如何提升 Claude Design 在产品设计领域成为重要玩家的可能性。

📌 三大核心变化

在进入实操演示之前，我想先简要总结本次更新最重要的三项变化：

• Token 消耗问题：高 Token 消耗是 Claude Design 发布后面临的最关键问题之一。在本次更新中，Anthropic 不仅优化了 Token 使用量，还取消了 Claude Design 的独立使用额度限制，让整体体验更加便捷和可预测。
• 设计系统变更的双向同步：本月早些时候，Anthropic 发布了 /design-sync 命令，可将 React 设计系统推送到 Claude Design。该命令运行一个转换器，将真实的组件代码打包到 Claude Design 环境中。
• 原型编辑体验改善：Anthropic 还改进了设计编辑流程，使其更加便捷。

接下来，我将逐一深入每项变化，从第二点——设计系统的双向同步开始。

🔄 设计系统双向同步（半成品）

Anthropic 改进了对现有设计系统引入变更的流程。一旦你从 GitHub 导入设计系统，就可以直接在 Claude Code 中进行定制化的修改。

例如，下面我展示了如何在我的设计系统 Roxy Design System（基于 IBM Carbon 并做了一些微调；我从 Git 导入了 Carbon）中修改蓝色调色板的颜色值。所有操作都无需离开 Claude Code。

你还可以将设计系统导出到 Claude Code 进行更深入的精细化调整。为此，你需要点击 Share，选择 Send to，然后复制 Claude Design 为你生成的代码。

接下来，你可以打开 Claude Code 环境，粘贴这段代码并按回车。在我的案例中，我使用了一个空目录并启用了 Claude Code 集成的 VS Code。接下来发生的事情是：Claude 会从 Claude Design 导入你的设计系统，并在目录中填充代表设计系统视觉样式的文件。

但这里就出现了我遇到的第一个失望之处。 新命令 /design-sync 仅适用于 Storybook 或设计系统的 NPM 包。换句话说：

• ✅ 支持：Storybook 格式的设计系统
• ✅ 支持：NPM 发行包
• ❌ 不支持：项目源码直接导入

如果你的设计系统作为项目源码导入而非 NPM 发行版，这条命令将毫无用处——Claude 会直接告诉你这一点。

我完全理解 /design-sync 对代码仓库的好处，但如果这条命令也能支持源码文件，那就太好了。

✏️ 创建与编辑新设计（部分改善）

接下来，我测试了改进后的设计创建和编辑流程。为此，我让 Claude Design 为一款移动应用创建用户流程。为了充分发挥 Claude Design 的能力，我选择使用 Opus 4.8。

当我提示 Claude Design 执行任务后，我注意到它使用了我的设计系统（Roxy Design System）来创建实际的设计。

与上一版 Claude Design 一样，它会向我提出一些上下文问题，以确认设计应该呈现的外观和交互方式。

等待了约 10 分钟后，我得到了以下设计结果。说实话，结果有些令人失望——你可以轻松发现这里那里有许多视觉缺陷（比如 CTA 按钮的对齐问题）。我使用的设计系统是可靠的，所以我只能将输出质量归咎于 Opus。

接下来是有趣的部分——编辑。

Claude Design 提供了几种引入变更的方式：

• 撰写后续提示词（Follow-up Prompts）
• 通过 Edit 模式进行定制化修改

我尝试了 Edit 模式，发现了一些非常奇怪的行为：

• ✅ 可以做到：引入文本变更（修改标签文本）、颜色变更（替换色值）
• ❌ 无法做到：更改容器的高度——如果你修改了数值，什么都不会发生

如下所示，我成功修改了第 3 个屏幕上的文本，却无法调整视口大小来修复 CTA 按钮对齐问题。很奇怪。

💰 Token 消耗（已修复）

最后是 Token 消耗部分。这里有一些好消息。

首先，Claude Design 不再有独立的使用额度。如果你打开 Claude Code，你将只看到每日和每周的使用额度。

其次，Claude Design 现在确实更加节省 Token 了。我使用 Opus 4.8 创建了我的设计，它消耗了我每日额度的 28%，这是可以接受的。

🏁 结论

本次更新解决了 Token 消耗问题，但另外两个问题仍然悬而未决：

• ❌ 不够高效的编辑流程（无法修改容器高度等布局属性）
• ❌ 不够设计友好的双向设计系统同步（/design-sync 不支持源码）
• ❌ 首次尝试仍然生成充满视觉缺陷的设计

这使得 Claude Design 作为快速原型设计工具还不够高效。