```Claude 设计系统提示词```
Claude Design System Prompt

原始链接: https://github.com/Trystan-SA/claude-design-system-prompt

**Claude Design** 是一个开源且采用 MIT 许可的系统提示词与技能库,旨在将任何大语言模型(LLM)转变为高质量、具备独立见解的设计合伙人。 该系统拒绝大语言模型输出中常见的“AI 垃圾(AI-slop)”式审美——例如过度使用的渐变、标准的圆角卡片以及满大街的“Inter 字体”——并强制执行严格的设计理念。它优先考虑内容规范、符合 WCAG 标准的无障碍架构、精致的视觉层级以及交互设计。 **核心组件包括:** * **设计原则:** 包含 20 个章节的框架,涵盖从语义化 HTML 和 CSS Grid 到排版及动效偏好的方方面面。 * **程序化技能:** 14 项模块化“技能”,供智能体执行特定任务。分类包括:**生产**(如线框图、原型设计)、**系统提取**(组件与 Token 识别)以及**审查**(如无障碍性与“垃圾审美”检测)。 * **灵活的工作流:** 该系统具有高度的通用性,允许用户通过串联技能来完成从零开始的项目或基于品牌意识的迭代。 该工具针对 Claude 3.5 等现代模型进行了优化,将 AI 从浅层的内容生成器转变为系统的设计合伙人,相较于通用的模板,它更强调深度、质感与功能性意图。适用于 Claude、GPT、Gemini 以及本地模型。

Hacker News 最新 | 过往 | 评论 | 提问 | 展示 | 招聘 | 提交 登录 Claude 设计系统提示词 (github.com/trystan-sa) handfuloflight 发布于 3 小时前,23 点 | 隐藏 | 过往 | 收藏 | 1 条评论 jdormit 24 分钟前 [–] 如果这能详细说明提示词或技能是如何被逆向工程出来的,会更有趣。目前的状况看起来,这可能只是“嘿 Claude,帮我写一个像 Claude Design 那样运作的系统提示词”的输出结果。 回复 指南 | 常见问题 | 列表 | API | 安全 | 法律 | 加入 YC | 联系 搜索:
相关文章

原文

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.

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.

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

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

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.

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 by frontend-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

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.

MIT — see LICENSE.

You can use, modify, and distribute this prompt and skill library for any purpose, including commercial use. No attribution required, but appreciated.

联系我们 contact @ memedata.com