Trystan-SA/claude-design-system-prompt

来源：https://github.com/Trystan-SA/claude-design-system-prompt

Claude 设计系统提示

逆向工程自 Anthropic 的 Claude 设计系统提示。

一套系统提示与技能库，将 LLM 转变为有立场、无障碍感知、抵制 AI 垃圾的设计协作者。

开源，MIT 许可。将提示放入任何支持系统提示的 LLM（Claude、GPT、Gemini、本地模型），并根据需要配合程序化技能使用。

这是什么

大多数“设计助手”提示产出的是通用的 SaaS 模板输出——夸张的渐变、emoji 装饰、圆角加左边框的卡片、全用 Inter 字体。本提示明确拒绝这些模式，并用一套完整的设计哲学取而代之，涵盖：

• 内容纪律（无填充——每个元素都应有存在的理由）
• 美学纪律（避免 AI 套路，承诺统一的色调和氛围）
• 视觉层级与节奏（尺寸、颜色、重量、位置、密度、间距比例）
• 无障碍（WCAG、语义化 HTML、键盘导航、焦点环、动画偏好）
• 交互与反馈（悬停、激活、禁用、焦点、加载、验证状态）
• 系统思维（组件和设计令牌，而非孤立页面）
• 尊重媒介（真实的 CSS Grid、oklch()、text-wrap: pretty、真正的交互原型）
• 质量优先于数量（深度胜于广度，精雕每个细节）

外加 14 个程序化技能，代理可在生产、提取和审查工作中调用。

包含的内容

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     从来源提取设计令牌
│       ├── 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

如何使用

直接使用系统提示

将 system-prompt.md 的内容粘贴到任何支持系统提示的 LLM 中。代理将遵循设计哲学，并在任务匹配时按名称引用技能。

将技能作为程序使用

skills/ 中的每个技能都是一个自包含的分阶段程序。技能名称即触发器——当用户的请求匹配技能描述时，代理加载该技能并遵循它。

技能分为三类：

生产——构建内容 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

技能可以串联。典型的从零开始流程：

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/ 变体单独维护，不受这些说明影响。

设计原则概要

system-prompt.md 中的 20 章涵盖：

贡献

欢迎提交 Issue 和 PR。特别有用的贡献：

• 额外的审查技能（如文案审查、动画审查、深色模式一致性检查）
• 适用于其他环境的适配提示（Figma、纯代码、纯终端）
• 提示应防御的真实失败案例
• 提示的其他语言翻译

请保持相同的操作语气，避免膨胀提示——每个章节都应挣得自己的位置，这是提示对代理的同样标准。

许可

MIT —— 参见 LICENSE。

你可以将该提示和技能库用于任何目的，包括商业用途，支持修改和分发。无需署名，但欢迎。