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.

Reverse-engineered system prompt and skill library that turns an LLM into an opinionated, accessibility-aware, AI-slop-resistant design collaborator. - Trystan-SA/claude-design-system-prompt

Summary

This repository provides a reverse-engineered system prompt and a library of 14 procedural skills that turn a general-purpose LLM into a design collaborator with an explicit, opinionated design philosophy. It is distributed as plain Markdown files under an MIT license, with separate variants for Claude and OpenAI Codex.

What it is useful for

Engineers who want an LLM to produce UI output that avoids the generic "AI SaaS template" look — aggressive gradients, emoji decoration, Inter-everywhere typography — that the README explicitly calls out as defaults. The 20-chapter prompt enforces content discipline, accessibility (WCAG, semantic HTML, keyboard navigation, focus rings, motion preferences), interaction states (hover, active, disabled, focus, loading, validation), and system thinking (tokens and reusable components over one-off pages). It also encourages the use of modern CSS like oklch() and text-wrap: pretty rather than approximations.

The skill library covers three categories:

• Production: discovery-questions, frontend-aesthetic-direction, wireframe, make-a-deck, make-a-prototype, make-tweakable, generate-variations
• System: design-system-extract, component-extract
• Review: accessibility-audit, ai-slop-check, hierarchy-rhythm-review, interaction-states-pass, polish-pass

These are useful for kickoff question protocols, low-fi wireframe exploration, HTML slide decks, interactive clickable prototypes, floating tweak panels, and for auditing LLM-generated output against specific failure modes.

How engineers can use it

The README documents the simplest usage as pasting claude/system-prompt.md (or codex/system-prompt.md) as the system prompt of any LLM that supports system prompts. The agent then follows the philosophy and loads skills when requests match their descriptions.

For structured workflows, the README provides two example chains:

• Greenfield: discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass
• Brand-aware: design-system-extract → generate-variations → make-tweakable → polish-pass

Several documented limitations are worth noting before adopting it:

• The prompt assumes an HTML-output design environment similar to Claude.ai's design tool. Adapting to Figma, code-only, or chat-only targets requires editing workflow chapters and tool references, though chapters 5–16 are described as portable.
• The claude/ variant is calibrated for current Anthropic frontier models; older or non-Anthropic models may need stronger imperative language to trigger the question and review rounds.
• Per the README, sampling parameters like temperature are not available on these models, so visual variety must come from explicit per-variation specs rather than randomness.
• No installation commands, package manager steps, or build process are documented — the repository is plain Markdown. Readers should consult the README directly for the full file layout and chapter table.