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.

# 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+ variation