> ## Content Index
> Fetch the complete content index at: https://www.hubwiz.com/blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# Claude Design 实现深度解析
- URL: https://www.hubwiz.com/blog/deep-dive-into-claude-design-implementation/
- Published: 2026-04-21T22:19:38.000Z
- Updated: 2026-04-21T22:19:38.000Z
- Description: Anthropic 通过推动用户构建 Design System 来解决一致性问题。采用了一种我之前从未见过的方法。
- Author: admin
- Tags: AGENT, CLAUDE DESIGN, #Import 2026-10-14 14:41

几天前，Anthropic 推出了 Claude Design。经过测试和深入研究，我发现这是一款出色的工具，而且有很多值得学习的地方。

对于这类 viral 的工具，很难区分 hype 和真实价值，而这一次两者都有。简而言之：这是一款优秀的工具，但原因并非你在大多数 viral 帖子中看到的那样（也不是关于设计学科终结的所有 FOMO 情绪）。

Claude Design 的亮点在于一些具体的东西，这些体现在它的界面和提示词中：它深入到了设计流程中。它不只是生成一个漂亮的 UI 然后宣布完成。它帮助你（实际上是强制你）定义和构建系统的各个部分。它还会智能地让你参与其中，确认决策并将你的反馈视为迭代的关键输入。你能感受到背后有一种设计敏感性。

它真正的力量在于对你提供的 context 的处理方式。你带来设计文件、代码库、参考资料，它将其转化为可执行的东西。它不是存储它们，而是处理它们。这个区别很重要。

![None](https://www.hubwiz.com/blog/content/images/2026/04/0--4fGsRvZFq41gnjN.png)

![None](https://www.hubwiz.com/blog/content/images/2026/04/0-T1UO9jh41zISrWaU.png)

## 1、设计系统作为一个技能

这篇文章不罗列功能特性。它聚焦于 Claude Design 提出的框架：它如何将一个系统打包成 agent 可用的 skill，以及当你用它进行设计和迭代时，实践中真正改变的是什么。

![None](https://www.hubwiz.com/blog/content/images/2026/04/0-eiYqxngam7mPO98Q.png)

Anthropic 通过推动用户构建 Design System 来解决一致性问题。采用了一种我之前从未见过的方法：生成一个 "design-system-as-a-skill"（他们没这么叫，但本质上就是这样工作的）：一个 executor agent 可以作为 skill 来执行设计、功能和迭代的设计系统。

值得理解其具体结构：agent 生成两个 markdown 文件。一个 README.md 包含定义系统身份的所有内容：voice、tone、颜色、字体、间距、组件规则、动效决策。这个文件作为系统的语义契约。

另一个 markdown 是 SKILL.md，任何 executor agent 的入口点。像任何 skill 一样，它定义了 skill 的名称、何时调用、先读哪些文件、哪些规则是不可协商的。这让 Claude Design 能够以清晰、一致的方式操作系统，而不需要我们参与每一个决策。

围绕这两个文件，它组织和引用其余的文件夹和文件：CSS tokens、assets、components、previews。

## 2、结构

Claude Design 围绕上述两个 markdown 构建系统，然后从那里引用和组织 CSS tokens、assets、components、previews。这是它的结构：

![None](https://www.hubwiz.com/blog/content/images/2026/04/1-_jUe2wKtgUa8TNXh0_R7LA.png)

## 3、README.md 的解剖

README 不是仅供人类查阅的文档。它作为系统的语义契约：所有定义身份的内容，以一种人和 agent 都能阅读并据此操作的方式表达。

它有一个看似固定的结构，有趣的是，它不仅关注具体的视觉方面，还聚焦于系统的无形方面。它以一句话定义产品 voice 开头，作为 tone 的功能性描述。然后是一个索引，映射哪个文件包含什么，以便未来的 agent 知道去哪里找。

它包含一个定义写作规则的内容块：大小写、代词、标点、表情符号使用（或不使用），带有来自系统本身的实际示例和 "few shots"。

视觉基础涵盖颜色及其精确值和使用语义、字体及其比例和字重、间距、圆角、阴影、动效和交互状态。每个决策都附有理由注释（类似于我们在 [DESIGN.md](https://stitch.withgoogle.com/docs/design-md/overview?ref=hubwiz.com) 等协议中开始看到的内容）。

它以已知的替代方案和关于 "non-negotiables" 的警告结束：哪种字体不能重新分发、哪个 token 有 fallback、哪个决策是近似值、哪里仍然缺少清晰度（如果有的话）。这一部分是关于系统限制的透明度。

## 4、SKILL.md 的解剖

SKILL.md 更短、更操作化，遵循 [standard Anthropic skill structure](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview?ref=hubwiz.com)。

它以 YAML frontmatter 开头，定义三件事：skill 的名称（agent 将用来调用它的标识符）、描述何时使用它以及它包含什么的描述。

主体告诉 agent 先读什么、按什么顺序读：从 README 开始，然后链接 token CSS，然后探索 components。它还定义了两种工作模式：quick prototype 或 production code，每种有不同的指令。

Non-negotiables 是明确的。例如：voice 使用 sentence case，产品中从不使用表情符号，最小化阴影，不要夸张的动效。这些是不能留给机会的约束。

一个值得注意的细节：它以默认行为指令结束：如果有人调用 skill 而没有额外的 context，询问他们想构建什么再执行。Agent 不假设。它询问。

## 5、为什么这超越了 Claude Design 本身很重要

![None](https://www.hubwiz.com/blog/content/images/2026/04/0-UzIvoEzEAcvWotTE.png)

一位好朋友曾告诉我，最好的抽象层次是不存在的那个，我将其理解为在委托问题之前先规模化地理解问题的邀请。Claude Design 在这方面是透明的：它让你理解它是如何工作的，而不会将你与你的文件抽象隔离，如果你看得更深一点，也不会将你与其背后的逻辑隔离。

这引出了我认为至关重要的一点：这个架构并非 Claude Design 独有。Design System as a Skill 方法——带有语义 README 和作为调用契约的 SKILL.md——是可以而且应该被整合到 Cursor 工作流或任何其他支持 context 的 IDE 中的东西。你不被工具束缚。你在学习一种模式。

> [*SKILL.md 是 Anthropic 推动的一项标准，用于扩展 agent 的能力*](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview?ref=hubwiz.com)*)\*\*。这意味着任何用这种结构构建的系统都可以被其他 agents 操作，无论是在 Claude Design 内部还是外部*

## 6、房间里的大象

要开始一个项目，Claude Design 会在 Opus 4.7 上运行大约 15 分钟来解释它可以访问的资源。这种推理能力显而易见：它很好地阅读设计意图和每个设计决策背后的结构。但有一个很快浮现的相关成本：token 消耗足够高，以至于很难自然地融入日常工作，除非使用 Anthropic 的较大套餐之一。

Usage limits、individual 和 team plans，以及额外使用量的计费方式，都在 Claude 的其他文档之外单独记录：[Claude Design — subscription, usage and pricing](https://support.claude.com/en/articles/14667344-claude-design-subscription-usage-and-pricing?ref=hubwiz.com)。

## 7、什么是新的，什么之前就有

Claude Design 的 tweak mode 在演示中确实令人印象深刻。功能强大，让你能快速迭代并真实感受设计效果。点击元素并用实时滑块调整视觉属性的想法感觉很新鲜。但这个概念并不新，也不是 Claude Design 发明的。

[Cursor 在 2025 年 12 月推出了它的 visual editor](https://cursor.com/blog/browser-visual-editor?ref=hubwiz.com)（在 [Cursor 2.2](https://cursor.com/changelog/2-2?ref=hubwiz.com) 中），逻辑完全相同：用拖放操作 DOM 元素，侧边栏中的选择器让你检查 React component props，用连接到 design system 的滑块调整颜色和字体，点击任何元素用自然语言描述更改。当更改正确时，几个操作就能让 agents 将更改推入产品。

然后是 Josh Puckett 的 [DialKit](https://github.com/joshpuckett/dialkit?ref=hubwiz.com)，它更直接地指向核心。这是一个开源 React 库，将任何 component 的参数暴露为实时视觉控制：滑块、颜色选择器、切换开关、动画的 spring 选择器。它还带有一个 skill，让 agent 用自然语言操作它：在 component 中定义参数，面板就会出现。无需额外配置，没有中间层。

[Agentation](https://www.agentation.com/?ref=hubwiz.com) 是一个以类似精神提出可比方案的工具：不用滑块，它让你点击界面中的任何元素，直接在上面标注反馈，并以自然语言和技术语言的混合形式传递给 agent（CSS selectors、file paths、component tree 和自然文本，全部一起）。视觉反馈转化为可操作的 context。

Claude Design 的不同之处不在于发明了这个概念，而是将其产品化并整合到可管理的工作流中，无需深厚的开发背景。这不是小事。tweak mode 不需要用户理解 React props、IDE 界面，或导航完全缺乏视觉反馈的 CLI 格式。Claude Design 将其整合到许多设计师已经习惯的对话流程中，并消除了摩擦。

## 8、剖析指令

### 8.1 关于设计流程

在 agent 的指令中，我发现了一些有趣的东西。Claude Design 内部遵循的工作流程看起来很像任何设计师应该如何应对挑战：

![None](https://www.hubwiz.com/blog/content/images/2026/04/1-aDjuBWlL1pZvM-MTf0YytA.png)

关于这一点有一个值得注意的警告：

![None](https://www.hubwiz.com/blog/content/images/2026/04/1-_IjbuyYox4DHUfS4S9Qhrw.png)

这正是 design-system-as-a-skill 论点在流程上的应用：没有 prior context，没有基础，结果将是通用的。换句话说：输出质量直接取决于 context 质量。

我喜欢认为这个流程是为特定类型的设计师和特定类型的任务设计的。它非常适合数字产品、基于现有系统构建的界面、信息完整或相对清晰的情况，以及已经拥有定义好的视觉语言或真正成熟的团队。但有些项目和流程中，这个流程并不直接适用。有些建立在不断变化的基础上，信息不完善。并非所有设计任务都是有形的。在交互设计流程中，并非一刀切。

### 8.2 内部委托

Claude Design **产品** 中的字面引用和 system prompt 块取自社区镜像 [CL4R1T4S](https://github.com/elder-plinius/CL4R1T4S/blob/main/ANTHROPIC/Claude-Design-Sys-Prompt.txt?ref=hubwiz.com) 中存档的文本（Anthropic 不将其作为单一官方文档分发；部署版本可能有所不同）。我下面讨论的 Opus diff 来自 Willison 对 **模型** prompt 的分析。

内部架构有两个细节值得提及，因为它们解释了工具行为的很多方面。

第一个是 Claude Design 使用（与 Opus 4.7 一起）一个轻量级 secondary model 来处理界面中的快速任务。当它需要做范围明确的事情时，比如总结或处理特定 context，它会委托给成本更低的模型。Opus 4.7 保留用于重度推理，遵循的逻辑与 Anthropic 的 [advisor strategy](https://claude.com/blog/the-advisor-strategy?ref=hubwiz.com) 相呼应（一个轻量级 executor 推进工作，只在需要指导时才调用更强大的模型）。在 **Using Claude from HTML artifacts** 部分出现的 system prompt 中：来自 artifact 的调用使用 `claude-haiku-4–5`，有自己的 output cap 和 rate limit（与 viewer 共享配额）：

![None](https://www.hubwiz.com/blog/content/images/2026/04/1-_EvfB8mPVMWPR3ghlkL62A.png)

第二个解释了为什么 token 消耗如此激进。系统不维护经典的对话历史，也不让用户管理自己的 context 或 threads。每条消息携带一个标识符，当工作阶段解决后，系统标记该范围以便移除。Snips 累积并在 context pressure 增加时一起执行。不是记忆。是一个主动管理的窗口。在 agent 的 **context engineering** 中，这与所谓的 *context compaction* 一致，在一些文献中称为 *active context trimming*；Philipp Schmid 在 [Context Engineering for AI Agents: Part 2](https://www.philschmid.de/context-engineering-part-2?ref=hubwiz.com) 中整理了该词汇表和其他策略。最早广泛公开讨论这一点的之一是 [Manus 2025 年 7 月的文章](https://manus.im/blog/Context-Engineering-for-AI-Agents-Lessons-from-Building-Manus?ref=hubwiz.com)。一个 agent，一个 context。

还有第三个细节值得提及，虽然它来自更底层。Anthropic 发布了其模型的 system prompts，Simon Willison 分析了 Opus 4.6 和 4.7 之间的 diff：有两个变化与我们在 Claude Design 中看到的直接呼应。第一个是 `acting_vs_clarifying`，指示模型在缺少次要细节时执行，并在询问前使用工具解决歧义，与 SKILL.md 说 "if invoked without context, ask what they want to build before executing" 的哲学相同，但相反：在那里，产品先问；这里，基础模型倾向于先行动。第二个是 `tool_search`，要求模型在假设无法做某事前验证 deferred tool 是否存在：这是拥有声明能力的 SKILL.md 的模型级等价物。层之间的张力很重要：这些指令是针对 Opus 4.7 特定推理水平校准的，这就是为什么 Anthropic 不允许在某些流程中更换模型。

关于 context management 的 system prompt 摘录（`## Context management`）：

![None](https://www.hubwiz.com/blog/content/images/2026/04/1-LURdk9RL8xhqhw8XQWGGMA.png)

同一仓库中，`snip` tool 的描述（function definition block；补充上面的部分）：标记一段对话历史以便延迟移除。

![None](https://www.hubwiz.com/blog/content/images/2026/04/1-703T-G0E0S_TfWM2R2cpig.png)

### 8.3 关于管理不确定性

在仓库中，产品 system prompt 值得分析，因为它留下的线索揭示了产品背后的哲学：

![None](https://www.hubwiz.com/blog/content/images/2026/04/1-0mp437JVr4d8qhXqcm8etw.png)

这个工具偏好诚实而非表象。它不试图即兴发挥它没有的东西。这是对另一端的人的一种尊重形式。

## 9、什么不会改变

我相信流程会加速。它们变得令人眩晕地密集和复杂，但它们不会停止存在。

我们这些做设计的人仍然需要理解工具、流程，思考我们在解决什么问题、为谁解决、在什么约束下、存在什么权衡、我们愿意承担什么风险。所有这些仍然是刻意的人类任务，即使有协助。Agents 在知道方向时帮助很大。

执行前询问。尽早展示工作。基于真实反馈迭代。在操作前理解系统。这些不是 Claude Design 的指令。它们是 Claude Design 理解、尊重并采纳的设计原则。

## 10、结束语

Claude Design 不是设计的终结。它是一个在坚实基础上全速构建的工具。这个区别很重要。它是一个非凡的工具，我假设它将对设计社区产生重大影响。但它并非前所未见。它是将 agentic 世界带给非技术受众的又一步，这本身就是一个真正的成就。理解它，掌握它在幕后的工作原理，不仅是用好它的关键，也是知道如何在任何其他 context 或工具中复制该模式的关键。

---

原文链接: [Claude Design: building at full speed on solid foundations](https://medium.com/design-bootcamp/claude-design-building-at-full-speed-on-solid-foundations-8a4729a0ff3d?ref=hubwiz.com)

汇智网翻译整理，转载请标明出处