7.0
热点
AI SCORE
编程提效2026-07-05 16:43
Claude设计系统Prompt开源分享
Hacker News · github.com#Claude#Prompt工程
Editor brief · 编辑速览
Anthropic公开了Claude的设计系统Prompt，展示如何结构化指导AI生成一致的设计系统。对AI工程师编写系统Prompt有参考价值。
这是对 Anthropic Claude Design 系统 prompt 的逆向工程版本。
这套系统 prompt 与 skill 库可以把 LLM 变成一位有明确设计主张、重视无障碍，并能抵制 AI 粗制滥造风格的设计协作者。
项目完全开源，采用 MIT 许可证。只需将 prompt 放入任何支持 system prompt 的 LLM（Claude、GPT、Gemini 或本地模型），并根据需要搭配相应的流程化 skill 使用即可。
大多数“设计助手”prompt 生成的都是千篇一律的 SaaS 模板：刺眼的渐变、用 emoji 做装饰、带左边框的圆角卡片，以及无处不在的 Inter 字体。这套 prompt 明确拒绝这些模式，取而代之的是一套完整的设计理念，涵盖：
内容纪律（不使用填充内容——每个元素都必须有存在的价值）
美学纪律（避免典型的 AI 套路，明确选定一套配色与基调）
视觉层级与节奏（尺寸、颜色、字重、位置、密度和间距尺度）
无障碍（WCAG、语义化 HTML、键盘导航、焦点环和动画偏好）
交互与反馈（hover、active、disabled、focus、loading 和 validation 状态）
系统化思维（优先构建组件和 token，而不是一次性的页面）
尊重媒介特性（真正使用 CSS Grid、oklch()、text-wrap: pretty 和可实际交互的原型）
质量优先于数量（重深度而非广度，打磨每一个细节）
此外还包含 14 个流程化 skill，Agent 可以调用它们完成生产、提取和审查工作。
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 的内容粘贴为任何支持 system prompt 的 LLM 的系统 prompt。Agent 将遵循其中的设计理念，并在任务匹配时按名称引用相应的 skill。
skills/ 中的每个 skill 都是一套独立且分阶段执行的流程。skill 名称就是触发条件——当用户的请求与某个 skill 的描述匹配时，Agent 会加载该 skill 并按照其中的流程执行。
这些 skill 分为三类：
生产——构建内容：discovery-questions · frontend-aesthetic-direction · wireframe · make-a-deck · make-a-prototype · make-tweakable · generate-variations
系统——提取结构：design-system-extract · component-extract
审查——审计并修复：accessibility-audit · ai-slop-check · hierarchy-rhythm-review · interaction-states-pass · polish-pass
这些 skill 可以串联使用。一个典型的从零开始流程如下：
discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass
design-system-extract → generate-variations → make-tweakable → polish-pass
这套 prompt 假设目标是一个输出 HTML 的设计环境，类似 Claude.ai 的设计工具。如果你的目标环境不同——例如 Figma 插件、纯代码助手或仅通过聊天提供建议的设计教练——就需要调整工作流章节和工具引用。其中的设计原则（第 5～16 章）适用于任何媒介。
claude/ 版本针对 Anthropic 当前的前沿模型进行了调校，包括 Fable 5 以及 Opus 4.7/4.8 系列。这些模型比早期版本更严格地遵循指令，因此不需要过于强硬的 prompt：
用条件代替硬性配额。不再要求“至少提出 N 个问题”，也不使用“CRITICAL: YOU MUST”这样的措辞。当前模型会把配额视为必须严格履行的契约，因而容易过度触发；这套 prompt 会说明应当采取行动的具体条件，并为次要决策加入自主处理条款——选择一个合理方案并进行说明，而不是事事询问。
为 skill 和 subagent 设置明确的触发条件。这些模型默认不会充分主动地使用可选能力，因此每个 skill 的描述都会说明何时调用它；验证器的委派也有明确的触发条件，即“每次完成实质性的视觉变更之后”。
审查时覆盖优先。负责审查的 Agent 会报告所有发现，并附上置信度和严重程度估计，再由汇总步骤进行筛选。当前模型会严格执行“只报告重要问题”，这反而可能导致一些发现被悄然忽略。
默认风格防护。当前模型偏爱的默认美学是奶油色背景、衬线展示字体，以及陶土色或琥珀色强调色。ai-slop-check 会通过规则 9 检测这种风格，frontend-aesthetic-direction 的四方向协议则会提前阻止它。由于这些模型已经不再提供采样参数（如 temperature），视觉多样性必须来自为每个变体明确编写的规格，而不能依赖随机性。
对于较旧的模型（Claude Opus/Sonnet 4.6 及更早版本，或非 Anthropic 模型），这种更温和的措辞可能无法充分触发预期行为。如果发现模型跳过提问环节或审查流程，请恢复更强硬的指令性语言。codex/ 版本会单独维护，不受上述说明影响。
system-prompt.md 的 20 个章节涵盖：
欢迎提交 Issue 和 PR。以下贡献尤其有价值：
新增审查类 skill，例如文案审查、动画审查和深色模式一致性检查
为其他环境适配的 prompt，例如 Figma、纯代码或纯终端环境
这套 prompt 应该防范的真实失败案例
将 prompt 翻译成其他语言
请保持相同的实务化语气，避免让 prompt 变得臃肿——每个章节都必须有存在的价值，这也是该 prompt 要求 Agent 遵守的同一套标准。
你可以出于任何目的使用、修改和分发这套 prompt 与 skill 库，包括商业用途。无需署名，但欢迎署名。