GitHub - Trystan-SA/claude-design-system-prompt: Reverse-engineered system prompt and skill library that turns an LLM into an opinionated, accessibility-aware, AI-slop-resistant design collaborator. · GitHub
/" data-turbo-transient="true" />
Skip to content
Search or jump to...
Search code, repositories, users, issues, pull requests...
-->
Search
Clear
Search syntax tips
Provide feedback
--><br>We read every piece of feedback, and take your input very seriously.
Include my email address so I can be contacted
Cancel
Submit feedback
Saved searches
Use saved searches to filter your results more quickly
-->
Name
Query
To see all available qualifiers, see our documentation.
Cancel
Create saved search
Sign in
/;ref_cta:Sign up;ref_loc:header logged out"}"<br>Sign up
Appearance settings
Resetting focus
You signed in with another tab or window. Reload to refresh your session.<br>You signed out in another tab or window. Reload to refresh your session.<br>You switched accounts on another tab or window. Reload to refresh your session.
Dismiss alert
{{ message }}
Trystan-SA
claude-design-system-prompt
Public
Notifications<br>You must be signed in to change notification settings
Fork<br>42
Star<br>228
main
BranchesTags
Go to file
CodeOpen more actions menu
Folders and files<br>NameNameLast commit message<br>Last commit date<br>Latest commit
History<br>5 Commits<br>5 Commits
claude
claude
codex
codex
LICENSE
LICENSE
README.md
README.md
View all files
Repository files navigation
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/<br>├── claude/ Claude Code / Claude.ai variant<br>│ ├── system-prompt.md Main system prompt — 20 chapters<br>│ └── skills/ 14 invokable skills<br>│ ├── discovery-questions.md Kickoff question protocol<br>│ ├── frontend-aesthetic-direction.md Commit to a look when no brand exists<br>│ ├── wireframe.md Low-fi exploration, 3+ variations<br>│ ├── make-a-deck.md Slide presentations in HTML<br>│ ├── make-a-prototype.md Interactive clickable prototype<br>│ ├── make-tweakable.md Floating tweak panel<br>│ ├── generate-variations.md 3+ hi-fi variations across axes<br>│ ├── design-system-extract.md Pull tokens from sources<br>│ ├── component-extract.md Inventory reusable components<br>│ ├── accessibility-audit.md WCAG, semantic, keyboard, motion<br>│ ├── ai-slop-check.md Gradient / emoji / font / house-style trope detection<br>│ ├── hierarchy-rhythm-review.md Size / weight / color + spacing scale<br>│ ├── interaction-states-pass.md Hover / active / disabled / focus / loading<br>│ └── polish-pass.md Umbrella final-gate review<br>├── codex/ OpenAI Codex variant (single-loop, no subagents)<br>│ ├── AGENTS.md Codex auto-discovered entry point<br>│ ├── system-prompt.md Same prompt, adapted for Codex<br>│ └── skills/ Same skills, sequential reviews instead of parallel agents<br>├── README.md This file<br>└── 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<br>discovery-questions · frontend-aesthetic-direction · wireframe · make-a-deck · make-a-prototype · make-tweakable · generate-variations
System — extract structure<br>design-system-extract · component-extract
Review — audit and fix<br>accessibility-audit ·...