Claude推出设计系统提示
速览
Anthropic为Claude推出设计系统专用提示（Design System Prompt），旨在帮助用户更高效地创建和管理设计系统。该模板优化了Claude在UI/UX设计方面的表现，提供标准化交互框架。此举扩展了Claude在专业设计领域的应用能力。
AI 深度解读
背景
近日，开发者社区在 Hacker News 上发布了一个名为 Claude Design System Prompt 的开源项目。该项目由 Anthropic 用户反向工程（reverse-engineer）而来，提供一套完整的系统提示（System Prompt）和技能库（Skill Library），旨在将任意支持系统提示的大语言模型（如 Claude、GPT、Gemini 及本地模型）转变为一个有观点、注重可访问性、且抵抗 AI 俗套设计（AI-slop-resistant）的设计协作工具。项目采用 MIT 许可证，允许自由使用、修改和分发（包括商业用途），不强制署名但鼓励注明来源。
核心内容
该提示库的核心文件是 system-prompt.md，包含 20 个章节，外加 14 个可调用的过程化技能（procedural skills）。整个仓库结构如下：
claude-design-system-prompt/
├── claude/ # Claude Code / Claude.ai 版本
│ ├── system-prompt.md # 主系统提示（20 章）
│ └── skills/ # 14 个可调用技能
│ ├── discovery-questions.md # 启动提问协议
│ ├── frontend-aesthetic-direction.md # 在没有品牌时定义视觉方向
│ ├── wireframe.md # 低保真探索，至少 3 种变体
│ ├── make-a-deck.md # 用 HTML 生成幻灯片演示
│ ├── make-a-prototype.md # 交互式可点击原型
│ ├── make-tweakable.md # 浮动调整面板
│ ├── generate-variations.md # 沿多个轴生成 ≥3 种高保真变体
│ ├── design-system-extract.md # 从已有资源提取设计 token
│ ├── component-extract.md # 盘点可复用组件
│ ├── accessibility-audit.md # WCAG、语义化、键盘、动效审计
│ ├── ai-slop-check.md # 检测渐变/emoji/字体/风格俗套
│ ├── hierarchy-rhythm-review.md # 大小/权重/颜色 + 间距尺度审查
│ ├── interaction-states-pass.md # 悬停/激活/禁用/聚焦/加载状态
│ └── polish-pass.md # 兜底终审
├── codex/ # OpenAI Codex 版本（单循环，无子代理）
│ ├── AGENTS.md # Codex 自动发现入口
│ ├── system-prompt.md # 同一提示，适配 Codex
│ └── skills/ # 相同技能，但采用顺序审查而非并行代理
├── README.md
└── LICENSE # MIT
设计哲学：提示库明确拒绝大多数“设计助手”提示产生的通用 SaaS 模板输出——激进渐变、emoji 装饰、圆角左边框卡片、全篇 Inter 字体。取而代之的是一套完整设计理念，涵盖：
- 内容纪律：无填充内容，每个元素必须有存在的理由。
- 美学纪律：避免 AI 俗套，承诺色调与风格。
- 视觉层次与节奏：大小、颜色、权重、位置、密度、间距尺度。
- 可访问性：WCAG、语义化 HTML、键盘导航、焦点环、动效偏好。
- 交互与反馈：悬停、激活、禁用、聚焦、加载、验证状态。
- 系统思维：用组件和 token 而非一次性页面。
- 尊重媒介：使用真实的 CSS Grid、
oklch()、text-wrap: pretty、可交互原型。 - 质量优先：深度胜于广度，打磨每个细节。
技能分类：14 个技能分为三类：
- 生产类（Production）：构建新东西——
discovery-questions、frontend-aesthetic-direction、wireframe、make-a-deck、make-a-prototype、make-tweakable、generate-variations。 - 系统提取类（System）：提取结构——
design-system-extract、component-extract。 - 审查类（Review）：审计与修复——
accessibility-audit、ai-slop-check、hierarchy-rhythm-review、interaction-states-pass、polish-pass。
使用方法：将 system-prompt.md 的内容粘贴到任何支持系统提示的 LLM 中作为系统提示。代理（agent）会遵循设计哲学，并在任务匹配时按名称调用相应技能。技能可串联，例如：
- 绿地（从零开始）流程：
discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass - 有品牌资产时的流程：
design-system-extract → generate-variations → make-tweakable → polish-pass
环境适配说明：该提示默认假设一个 HTML 输出的设计环境（类似 Claude.ai 的设计工具）。如果目标环境是 Figma 插件、纯代码助手或仅聊天的设计教练，需调整工作流章节和工具引用。但其核心原则（第 5–16 章）适用于任何媒介。
针对前沿模型的调优：claude/ 版本针对当前 Anthropic 前沿模型（Fable 5 及 Opus 4.7/4.8 系列）进行了校准。这些模型更字面地遵循指令，不需要像早期模型那样激进的提示。关键调整包括：
- 使用条件而非配额：不写“至少问 N 个问题”或“必须：你必须”，而是描述行动的条件，并加入自治条款（对小事选合理选项并注明，而非提问）。
- 显式触发技能和子代理：当前模型默认不会主动调用可选能力，因此每个技能描述中都明确指出何时调用，并显式触发验证委托（如“每次实质性视觉变更后”）。
- 覆盖优先的审查：审查代理报告所有发现并附上置信度/严重性估计，由聚合步骤过滤。当前模型会字面理解“只报告重要问题”，从而静默遗漏发现。
- 风格守门：模型默认美学（奶油色背景、衬线展示字体、陶土/琥珀色强调色）会被
ai-slop-check（规则 9）检测，并通过frontend-aesthetic-direction的四方向协议预判。由于这些模型不再有temperature参数，视觉多样性必须通过显式的每变体规格实现，而非随机性。
对旧模型的兼容性：在较旧模型（Claude Opus/Sonnet 4.6 及更早，或非 Anthropic 模型）上，更平和的措辞可能导致触发不足——如果发现模型跳过提问轮次或审查，应恢复更强硬的命令式语言。codex/ 版本单独维护，不受这些说明影响。
社区贡献：项目欢迎 Issue 和 PR，尤其需要：
- 额外的审查技能（如文案审查、动效审查、暗色模式一致性检查）
- 针对其他环境（Figma、纯代码、纯终端）的适配提示
- 需要防范的真实失败案例
- 提示的翻译版本（保持相同操作语气，避免膨胀）
关键要点
- 反俗套设计哲学：明确拒绝当前 AI 辅助设计中最常见的模板化输出（渐变、emoji、统一字体、圆角左边框卡片），转而要求每个元素都有存在理由、色彩和语调有承诺、视觉层次严谨。
- 开源与自由使用：采用 MIT 许可，可自由用于商业与非商业项目，无需署名；允许修改和分发。
- 模块化技能体系：14 个技能分为生产、系统提取、审查三类，可独立调用或串联成工作流，适应从零构建到品牌对齐的不同场景。
- 针对前沿模型的精心调优：对 Claude Fable 5 及 Opus 4.7/4.8 系列采用条件式触发、显式技能调用、覆盖优先审查，避免旧式“强制指令”带来的误触或遗漏。
- 环境适配灵活性：虽然默认面向 HTML 设计环境，但核心原则可