# Claude Design System Prompt

> A reverse-engineered system prompt and skill library that turns any LLM into an opinionated, accessibility-aware, AI-slop-resistant design collaborator.

Claude Design System Prompt is an open-source MIT-licensed project by Trystan Sarrade that reverse-engineers the design philosophy behind Anthropic's Claude Design tool into a portable system prompt and skill library. It can be dropped into any LLM that supports system prompts — including Claude, GPT, Gemini, and local models — to produce a design collaborator that actively resists generic AI output patterns. The repository has accumulated 747 stars and 99 forks since its creation in April 2026.

## What It Is

At its core, this is a 20-chapter system prompt (`system-prompt.md`) paired with 14 invokable procedural skills. Together they define a complete design philosophy covering content discipline, aesthetic discipline, visual hierarchy, typography, color systems, accessibility (WCAG, semantic HTML, keyboard navigation, motion preferences), interaction states, and system thinking. The prompt explicitly rejects common "AI slop" tropes — aggressive gradients, emoji decoration, rounded-corner-with-left-border cards, and Inter-everywhere typography — and replaces them with principled, medium-aware design decisions.

## The 14 Procedural Skills

Skills are organized into three categories and can be chained into workflows:

**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`

A typical greenfield workflow chains: `discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass`. A brand-aware flow uses: `design-system-extract → generate-variations → make-tweakable → polish-pass`.

## Repository Structure and Variants

The repository ships two maintained variants:

- **`claude/`** — calibrated for current Anthropic frontier models (described in the README as targeting the Fable 5 and Opus 4.7/4.8 lineage). Uses condition-based triggers instead of quota-style imperatives, explicit skill invocation triggers, coverage-first review agents, and a house-style guard via `ai-slop-check` and `frontend-aesthetic-direction`.
- **`codex/`** — adapted for OpenAI Codex's single-loop, no-subagents architecture. Uses sequential reviews instead of parallel agents and is maintained independently.

The README notes that on older models (Claude Opus/Sonnet 4.6 and earlier, or non-Anthropic models), the calmer phrasing may under-trigger, and recommends restoring stronger imperative language if the model skips question rounds or reviews.

## Design Philosophy Highlights

The 20 chapters in the system prompt cover identity and role, workflow, question-asking protocols, rooting designs in existing context, content principles (no filler), aesthetic principles (purposeful visuals), visual hierarchy and rhythm, typography, color, accessibility, interaction and feedback, simplicity and single CTA, system thinking, respecting the medium (real CSS Grid, `oklch()`, `text-wrap: pretty`, real interactive prototypes), understanding users, quality over quantity, output principles, collaboration and delivery, IP and content boundaries, and available skills.

## Current Status

The repository was created in April 2026 and last pushed in June 2026, with the GitHub metadata showing last updated July 2026. It is actively maintained under the MIT license with 0 open issues. The project welcomes contributions including additional review skills (copy review, motion review, dark-mode parity check), adapted prompts for other environments (Figma, code-only, terminal-only), real-world failure cases, and translations.

## Features
- 20-chapter system prompt covering complete design philosophy
- 14 invokable procedural skills for production, extraction, and review
- AI slop detection and rejection (gradients, emoji, generic fonts)
- WCAG accessibility audit skill
- Wireframing with 3+ variations
- Interactive clickable prototype generation
- Design system token extraction
- Component inventory extraction
- Hierarchy and rhythm review
- Interaction states pass (hover, active, disabled, focus, loading)
- Polish pass final-gate review
- Frontend aesthetic direction for brandless projects
- Floating tweak panel generation
- HTML slide deck creation
- Supports Claude, GPT, Gemini, and local LLMs
- Claude Code and OpenAI Codex variants included
- MIT licensed, no attribution required

## Integrations
Claude, Claude Code, GPT, Gemini, OpenAI Codex, Local LLMs, Any LLM supporting system prompts

## Platforms
LINUX, API, CLI

## Pricing
Open Source

## Version
main

## Links
- Website: https://github.com/Trystan-SA/claude-design-system-prompt
- Repository: https://github.com/Trystan-SA/claude-design-system-prompt
- EveryDev.ai: https://www.everydev.ai/tools/claude-design-system-prompt