几天前Anthropic 推出了 Claude Design。经过测试和深入研究我发现这是一款出色的工具而且有很多值得学习的地方。对于这类 viral 的工具很难区分 hype 和真实价值而这一次两者都有。简而言之这是一款优秀的工具但原因并非你在大多数 viral 帖子中看到的那样也不是关于设计学科终结的所有 FOMO 情绪。Claude Design 的亮点在于一些具体的东西这些体现在它的界面和提示词中它深入到了设计流程中。它不只是生成一个漂亮的 UI 然后宣布完成。它帮助你实际上是强制你定义和构建系统的各个部分。它还会智能地让你参与其中确认决策并将你的反馈视为迭代的关键输入。你能感受到背后有一种设计敏感性。它真正的力量在于对你提供的 context 的处理方式。你带来设计文件、代码库、参考资料它将其转化为可执行的东西。它不是存储它们而是处理它们。这个区别很重要。1、设计系统作为一个技能这篇文章不罗列功能特性。它聚焦于 Claude Design 提出的框架它如何将一个系统打包成 agent 可用的 skill以及当你用它进行设计和迭代时实践中真正改变的是什么。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。这是它的结构3、README.md 的解剖README 不是仅供人类查阅的文档。它作为系统的语义契约所有定义身份的内容以一种人和 agent 都能阅读并据此操作的方式表达。它有一个看似固定的结构有趣的是它不仅关注具体的视觉方面还聚焦于系统的无形方面。它以一句话定义产品 voice 开头作为 tone 的功能性描述。然后是一个索引映射哪个文件包含什么以便未来的 agent 知道去哪里找。它包含一个定义写作规则的内容块大小写、代词、标点、表情符号使用或不使用带有来自系统本身的实际示例和 “few shots”。视觉基础涵盖颜色及其精确值和使用语义、字体及其比例和字重、间距、圆角、阴影、动效和交互状态。每个决策都附有理由注释类似于我们在 DESIGN.md 等协议中开始看到的内容。它以已知的替代方案和关于 “non-negotiables” 的警告结束哪种字体不能重新分发、哪个 token 有 fallback、哪个决策是近似值、哪里仍然缺少清晰度如果有的话。这一部分是关于系统限制的透明度。4、SKILL.md 的解剖SKILL.md 更短、更操作化遵循 standard Anthropic skill structure。它以 YAML frontmatter 开头定义三件事skill 的名称agent 将用来调用它的标识符、描述何时使用它以及它包含什么的描述。主体告诉 agent 先读什么、按什么顺序读从 README 开始然后链接 token CSS然后探索 components。它还定义了两种工作模式quick prototype 或 production code每种有不同的指令。Non-negotiables 是明确的。例如voice 使用 sentence case产品中从不使用表情符号最小化阴影不要夸张的动效。这些是不能留给机会的约束。一个值得注意的细节它以默认行为指令结束如果有人调用 skill 而没有额外的 context询问他们想构建什么再执行。Agent 不假设。它询问。5、为什么这超越了 Claude Design 本身很重要一位好朋友曾告诉我最好的抽象层次是不存在的那个我将其理解为在委托问题之前先规模化地理解问题的邀请。Claude Design 在这方面是透明的它让你理解它是如何工作的而不会将你与你的文件抽象隔离如果你看得更深一点也不会将你与其背后的逻辑隔离。这引出了我认为至关重要的一点这个架构并非 Claude Design 独有。Design System as a Skill 方法——带有语义 README 和作为调用契约的 SKILL.md——是可以而且应该被整合到 Cursor 工作流或任何其他支持 context 的 IDE 中的东西。你不被工具束缚。你在学习一种模式。SKILL.md 是 Anthropic 推动的一项标准用于扩展 agent 的能力)**。这意味着任何用这种结构构建的系统都可以被其他 agents 操作无论是在 Claude Design 内部还是外部6、房间里的大象要开始一个项目Claude Design 会在 Opus 4.7 上运行大约 15 分钟来解释它可以访问的资源。这种推理能力显而易见它很好地阅读设计意图和每个设计决策背后的结构。但有一个很快浮现的相关成本token 消耗足够高以至于很难自然地融入日常工作除非使用 Anthropic 的较大套餐之一。Usage limits、individual 和 team plans以及额外使用量的计费方式都在 Claude 的其他文档之外单独记录Claude Design — subscription, usage and pricing。7、什么是新的什么之前就有Claude Design 的 tweak mode 在演示中确实令人印象深刻。功能强大让你能快速迭代并真实感受设计效果。点击元素并用实时滑块调整视觉属性的想法感觉很新鲜。但这个概念并不新也不是 Claude Design 发明的。Cursor 在 2025 年 12 月推出了它的 visual editor在 Cursor 2.2 中逻辑完全相同用拖放操作 DOM 元素侧边栏中的选择器让你检查 React component props用连接到 design system 的滑块调整颜色和字体点击任何元素用自然语言描述更改。当更改正确时几个操作就能让 agents 将更改推入产品。然后是 Josh Puckett 的 DialKit它更直接地指向核心。这是一个开源 React 库将任何 component 的参数暴露为实时视觉控制滑块、颜色选择器、切换开关、动画的 spring 选择器。它还带有一个 skill让 agent 用自然语言操作它在 component 中定义参数面板就会出现。无需额外配置没有中间层。Agentation 是一个以类似精神提出可比方案的工具不用滑块它让你点击界面中的任何元素直接在上面标注反馈并以自然语言和技术语言的混合形式传递给 agentCSS selectors、file paths、component tree 和自然文本全部一起。视觉反馈转化为可操作的 context。Claude Design 的不同之处不在于发明了这个概念而是将其产品化并整合到可管理的工作流中无需深厚的开发背景。这不是小事。tweak mode 不需要用户理解 React props、IDE 界面或导航完全缺乏视觉反馈的 CLI 格式。Claude Design 将其整合到许多设计师已经习惯的对话流程中并消除了摩擦。8、剖析指令8.1 关于设计流程在 agent 的指令中我发现了一些有趣的东西。Claude Design 内部遵循的工作流程看起来很像任何设计师应该如何应对挑战关于这一点有一个值得注意的警告这正是 design-system-as-a-skill 论点在流程上的应用没有 prior context没有基础结果将是通用的。换句话说输出质量直接取决于 context 质量。我喜欢认为这个流程是为特定类型的设计师和特定类型的任务设计的。它非常适合数字产品、基于现有系统构建的界面、信息完整或相对清晰的情况以及已经拥有定义好的视觉语言或真正成熟的团队。但有些项目和流程中这个流程并不直接适用。有些建立在不断变化的基础上信息不完善。并非所有设计任务都是有形的。在交互设计流程中并非一刀切。8.2 内部委托Claude Design产品中的字面引用和 system prompt 块取自社区镜像 CL4R1T4S 中存档的文本Anthropic 不将其作为单一官方文档分发部署版本可能有所不同。我下面讨论的 Opus diff 来自 Willison 对模型prompt 的分析。内部架构有两个细节值得提及因为它们解释了工具行为的很多方面。第一个是 Claude Design 使用与 Opus 4.7 一起一个轻量级 secondary model 来处理界面中的快速任务。当它需要做范围明确的事情时比如总结或处理特定 context它会委托给成本更低的模型。Opus 4.7 保留用于重度推理遵循的逻辑与 Anthropic 的 advisor strategy 相呼应一个轻量级 executor 推进工作只在需要指导时才调用更强大的模型。在Using Claude from HTML artifacts部分出现的 system prompt 中来自 artifact 的调用使用claude-haiku-4–5有自己的 output cap 和 rate limit与 viewer 共享配额第二个解释了为什么 token 消耗如此激进。系统不维护经典的对话历史也不让用户管理自己的 context 或 threads。每条消息携带一个标识符当工作阶段解决后系统标记该范围以便移除。Snips 累积并在 context pressure 增加时一起执行。不是记忆。是一个主动管理的窗口。在 agent 的context engineering中这与所谓的context compaction一致在一些文献中称为active context trimmingPhilipp Schmid 在 Context Engineering for AI Agents: Part 2 中整理了该词汇表和其他策略。最早广泛公开讨论这一点的之一是 Manus 2025 年 7 月的文章。一个 agent一个 context。还有第三个细节值得提及虽然它来自更底层。Anthropic 发布了其模型的 system promptsSimon 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同一仓库中sniptool 的描述function definition block补充上面的部分标记一段对话历史以便延迟移除。8.3 关于管理不确定性在仓库中产品 system prompt 值得分析因为它留下的线索揭示了产品背后的哲学这个工具偏好诚实而非表象。它不试图即兴发挥它没有的东西。这是对另一端的人的一种尊重形式。9、什么不会改变我相信流程会加速。它们变得令人眩晕地密集和复杂但它们不会停止存在。我们这些做设计的人仍然需要理解工具、流程思考我们在解决什么问题、为谁解决、在什么约束下、存在什么权衡、我们愿意承担什么风险。所有这些仍然是刻意的人类任务即使有协助。Agents 在知道方向时帮助很大。执行前询问。尽早展示工作。基于真实反馈迭代。在操作前理解系统。这些不是 Claude Design 的指令。它们是 Claude Design 理解、尊重并采纳的设计原则。10、结束语Claude Design 不是设计的终结。它是一个在坚实基础上全速构建的工具。这个区别很重要。它是一个非凡的工具我假设它将对设计社区产生重大影响。但它并非前所未见。它是将 agentic 世界带给非技术受众的又一步这本身就是一个真正的成就。理解它掌握它在幕后的工作原理不仅是用好它的关键也是知道如何在任何其他 context 或工具中复制该模式的关键。原文链接Claude Design 实现深度解析 - 汇智网