Claude 设计系统提示词
Anthropic 逆向工程出的 Claude 设计系统提示词。
一套系统提示词和技能库，能将大语言模型转变为一位有主见、关注无障碍、抵制 AI 套壳风格的设计协作者。
开源，采用 MIT 许可证。将提示词放入任何支持系统提示词的大语言模型（Claude、GPT、Gemini、本地模型）中，并根据需要搭配过程性技能使用。
这是什么
大多数"设计助手"提示词生成的都是千篇一律的 SaaS 模板式输出——夸张的渐变、表情符号装饰、圆角加左边框的卡片、全篇 Inter 字体排版。这套提示词明确摒弃了这些模式，并用一套完整的设计理念取而代之，涵盖：
- 内容纪律（无填充物——每个元素都凭实力占据位置）
- 美学纪律（避免 AI 套路，坚持一套配色和调性）
- 视觉层级与节奏（尺寸、颜色、字重、位置、密度、间距比例）
- 无障碍（WCAG、语义化 HTML、键盘导航、焦点环、动效偏好）
- 交互与反馈（悬停、激活、禁用、聚焦、加载、验证状态）
- 系统思维（组件和设计 token 优先于一次性页面）
- 尊重媒介（真正的 CSS Grid、oklch()、text-wrap: pretty、真正的交互式原型）
- 质量胜于数量（深度优先于广度，打磨每一个细节）
外加 14 个过程性技能，智能体可调用这些技能进行生成、提取和审查工作。
包含内容
claude-design-system-prompt/
├── claude/ Claude Code / Claude.ai variant
│ ├── system-prompt.md Main system prompt — 20 chapters
│ └── skills/ 14 invokable skills
│ ├── discovery-questions.md Kickoff question protocol
│ ├── frontend-aesthetic-direction.md Commit to a look when no brand exists
│ ├── wireframe.md Low-fi exploration, 3+ variations
│ ├── make-a-deck.md Slide presentations in HTML
│ ├── make-a-prototype.md Interactive clickable prototype
│ ├── make-tweakable.md Floating tweak panel
│ ├── generate-variations.md 3+ hi-fi variations across axes
│ ├── design-system-extract.md Pull tokens from sources
│ ├── component-extract.md Inventory reusable components
│ ├── accessibility-audit.md WCAG, semantic, keyboard, motion
│ ├── ai-slop-check.md Gradient / emoji / font / house-style trope detection
│ ├── hierarchy-rhythm-review.md Size / weight / color + spacing scale
│ ├── interaction-states-pass.md Hover / active / disabled / focus / loading
│ └── polish-pass.md Umbrella final-gate review
├── codex/ OpenAI Codex variant (single-loop, no subagents)
│ ├── AGENTS.md Codex auto-discovered entry point
│ ├── system-prompt.md Same prompt, adapted for Codex
│ └── skills/ Same skills, sequential reviews instead of parallel agents
├── README.md This file
└── LICENSE MIT
如何使用
直接使用系统提示词
将 system-prompt.md 的内容粘贴到任何支持系统提示词的大语言模型中作为系统提示词。智能体会遵循设计理念，并在任务匹配时按名称引用相关技能。
将技能作为过程使用
skills/ 目录下的每个技能都是一个自包含、分阶段的过程。技能名称是触发条件——当用户请求与某个技能描述匹配时，智能体加载该技能并遵循其步骤。
技能分为三类：
生成——构建内容：discovery-questions · frontend-aesthetic-direction · wireframe · make-a-deck · make-a-prototype · make-tweakable · generate-variations
系统——提取结构：design-system-extract · component-extract
审查——审计并修复无障碍问题 · AI 内容检测 · 层级节奏审查 · 交互状态通过 · 润色优化
技能可以串联。典型的全新项目流程如下：
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）检测到，并被前端美学方向中的四方向协议预先规避。这些模型上不再存在采样参数（温度），因此视觉多样性必须来自每个变体的显式规范，而非随机性。
在较旧模型（Claude Opus/Sonnet 4.6 及更早版本，或非 Anthropic 模型）上，较为平和的措辞可能触发不足——若发现模型跳过提问轮次或审查环节，请恢复更强硬的祈使语气。codex/ 变体独立维护，不受这些说明影响。
设计原则，简述
system-prompt.md 中的 20 个章节涵盖：
| # | 章节 |
|---|---|
| 1 | 身份与角色 |
| 2 | 工作流程 |
| 3 | 先提问 |
| 4 | 基于现有语境进行设计 |
| 5 | 内容原则——无赘余 |
| 6 | 美学原则——有目的的视觉呈现 |
| 7 | 视觉层次与节奏 |
| 8 | 字体排印系统 |
| 9 | 色彩系统 |
| 10 | 无障碍与包容性 |
| 11 | 交互与反馈 |
| 12 | 简洁与单一清晰行动号召 |
| 13 | 系统思维 |
| 14 | 尊重媒介 |
| 15 | 理解用户 |
| 16 | 质量优先于数量 |
| 17 | 输出原则 |
| 18 | 协作与交付 |
| 19 | 知识产权与内容边界 |
| 20 | 可用技能 |
贡献
欢迎提交 Issue 和 PR。特别有用的贡献包括：
- 额外的审查技能（例如文案审查、动效审查、深色模式一致性检查）
- 针对其他环境（Figma、纯代码、纯终端）的适配提示词
- 提示词应防范的真实世界失败案例
- 提示词的其他语言翻译
请保持相同的操作语气，并避免使提示词臃肿——每个章节都应证明其存在的价值，这也是提示词对智能体所要求的同一标准。
许可协议
你可以出于任何目的（包括商业用途）使用、修改和分发此提示词及技能库。无需署名，但欢迎注明出处。
Claude Design System Prompt
Reverse-engineered system prompt of Claude Design from Anthropic.
A system prompt and skill library that turns an LLM into an opinionated, accessibility-aware, AI-slop-resistant design collaborator.
Open source, MIT licensed. Drop the prompt into any LLM that supports system prompts (Claude, GPT, Gemini, local models) and pair with the procedural skills as needed.
What this is
Most "design assistant" prompts produce generic SaaS-template output — aggressive gradients, emoji decoration, rounded-corner-with-left-border cards, Inter-everywhere typography. This prompt explicitly rejects those patterns and replaces them with a complete design philosophy covering:
- Content discipline (no filler — every element earns its place)
- Aesthetic discipline (avoid AI tropes, commit to a palette and tone)
- Visual hierarchy and rhythm (size, color, weight, position, density, spacing scales)
- Accessibility (WCAG, semantic HTML, keyboard navigation, focus rings, motion preferences)
- Interaction and feedback (hover, active, disabled, focus, loading, validation states)
- System thinking (components and tokens over one-off pages)
- Respecting the medium (real CSS Grid,
oklch(),text-wrap: pretty, real interactive prototypes) - Quality over quantity (depth over breadth, polish every detail)
Plus 14 procedural skills the agent can invoke for production, extraction, and review work.
What's included
claude-design-system-prompt/
├── claude/ Claude Code / Claude.ai variant
│ ├── system-prompt.md Main system prompt — 20 chapters
│ └── skills/ 14 invokable skills
│ ├── discovery-questions.md Kickoff question protocol
│ ├── frontend-aesthetic-direction.md Commit to a look when no brand exists
│ ├── wireframe.md Low-fi exploration, 3+ variations
│ ├── make-a-deck.md Slide presentations in HTML
│ ├── make-a-prototype.md Interactive clickable prototype
│ ├── make-tweakable.md Floating tweak panel
│ ├── generate-variations.md 3+ hi-fi variations across axes
│ ├── design-system-extract.md Pull tokens from sources
│ ├── component-extract.md Inventory reusable components
│ ├── accessibility-audit.md WCAG, semantic, keyboard, motion
│ ├── ai-slop-check.md Gradient / emoji / font / house-style trope detection
│ ├── hierarchy-rhythm-review.md Size / weight / color + spacing scale
│ ├── interaction-states-pass.md Hover / active / disabled / focus / loading
│ └── polish-pass.md Umbrella final-gate review
├── codex/ OpenAI Codex variant (single-loop, no subagents)
│ ├── AGENTS.md Codex auto-discovered entry point
│ ├── system-prompt.md Same prompt, adapted for Codex
│ └── skills/ Same skills, sequential reviews instead of parallel agents
├── README.md This file
└── LICENSE MIT
How to use it
Use the system prompt directly
Paste the contents of system-prompt.md as the system prompt for any LLM that supports them. The agent will follow the design philosophy and reference the skills by name when tasks match.
Use the skills as procedures
Each skill in skills/ is a self-contained, phased procedure. The skill name is the trigger — when the user's request matches a skill description, the agent loads that skill and follows it.
Skills group into three categories:
Production — build something discovery-questions · frontend-aesthetic-direction · wireframe · make-a-deck · make-a-prototype · make-tweakable · generate-variations
System — extract structure design-system-extract · component-extract
Review — audit and fix accessibility-audit · ai-slop-check · hierarchy-rhythm-review · interaction-states-pass · polish-pass
Skills can be chained. A typical greenfield flow:
discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass
A brand-aware flow:
design-system-extract → generate-variations → make-tweakable → polish-pass
Adapt for your platform
The prompt assumes an HTML-output design environment (similar to Claude.ai's design tool). If your target environment is different — a Figma plugin, a code-only assistant, a chat-only design coach — you'll need to adjust the workflow chapters and tool references. The principles (chapters 5–16) translate to any medium.
Model calibration
The claude/ variant is calibrated for current Anthropic frontier models (Fable 5 and the Opus 4.7/4.8 lineage), which follow instructions more literally and need less aggressive prompting than earlier generations:
- Conditions instead of quotas. No "ask at least N questions", no "CRITICAL: YOU MUST". Current models treat quotas as literal contracts and over-trigger on them; the prompt states the conditions under which to act, plus an autonomy clause for minor decisions (pick a reasonable option and note it, rather than asking).
- Explicit triggers for skills and subagents. These models under-reach for optional capabilities by default, so every skill description states when to invoke it, and verifier delegation has an explicit trigger ("after every substantive visual change").
- Coverage-first reviews. Review agents report everything with confidence/severity estimates and let the aggregation step filter. Current models follow "only report important issues" literally, which silently suppresses findings.
- House-style guard. The current models' default aesthetic (cream background, serif display type, terracotta/amber accents) is detected by
ai-slop-check(rule 9) and pre-empted byfrontend-aesthetic-direction's four-directions protocol. Sampling parameters (temperature) no longer exist on these models, so visual variety must come from explicit per-variation specs, not randomness.
On older models (Claude Opus/Sonnet 4.6 and earlier, or non-Anthropic models), the calmer phrasing may under-trigger — restore stronger imperative language if you see the model skipping question rounds or reviews. The codex/ variant is maintained separately and is unaffected by these notes.
Design principles, in short
The 20 chapters in system-prompt.md cover:
| # | Chapter |
|---|---|
| 1 | Identity and role |
| 2 | Workflow |
| 3 | Asking questions first |
| 4 | Rooting designs in existing context |
| 5 | Content principles — no filler |
| 6 | Aesthetic principles — purposeful visuals |
| 7 | Visual hierarchy and rhythm |
| 8 | Typography system |
| 9 | Color system |
| 10 | Accessibility and inclusivity |
| 11 | Interaction and feedback |
| 12 | Simplicity and one clear CTA |
| 13 | System thinking |
| 14 | Respecting the medium |
| 15 | Understanding users |
| 16 | Quality over quantity |
| 17 | Output principles |
| 18 | Collaboration and delivery |
| 19 | IP and content boundaries |
| 20 | Available skills |
Contributing
Issues and PRs welcome. Particularly useful contributions:
- Additional review skills (e.g., copy review, motion review, dark-mode parity check)
- Adapted prompts for other environments (Figma, code-only, terminal-only)
- Real-world failure cases the prompt should defend against
- Translations of the prompt into other languages
Please keep the same operational tone and avoid bloating the prompt — every chapter should earn its place, the same standard the prompt holds the agent to.
License
You can use, modify, and distribute this prompt and skill library for any purpose, including commercial use. No attribution required, but appreciated.