# claude-design-system-prompt: An Opinionated Design System Prompt and Skill Library

> claude-design-system-prompt is a reverse-engineered system prompt and 14-skill library that turns any LLM with system prompt support into a design collaborator focused on accessibility, content discipline, and resistance to generic AI output patterns. It ships in two variants: one calibrated for current Anthropic frontier models and one for Codex.

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

- Repository: https://github.com/Trystan-SA/claude-design-system-prompt
- Stars: 1,968 · Forks: 244
- Language: Unknown
- License: MIT
- Published: 2026-09-10 · Updated: 2026-09-10 · Language: en
- Canonical page: https://hysenlabs.com/projects/trystan-sa-claude-design-system-prompt

## What Problem This Prompt Solves and Who It Is For

Most design assistant prompts produce what the README calls "generic SaaS-template output": aggressive gradients, emoji decoration, rounded-corner-with-left-border cards, Inter-everywhere typography. The README names these explicitly as patterns to reject. claude-design-system-prompt replaces them with a complete design philosophy organized into 20 chapters covering content discipline, aesthetic discipline, visual hierarchy and rhythm, typography, color systems, accessibility, interaction states, system thinking, and quality over quantity.

The intended users are designers and front-end developers who want an LLM that behaves like an opinionated collaborator rather than a one-shot generator: someone who asks questions before building, commits to a visual direction before producing variations, and audits output against explicit criteria before delivery. The prompt is not for someone who wants fast results with minimal direction.

## What the Repository Contains

The repository root holds a LICENSE file (MIT), a README, a claude/ directory, and a codex/ directory. The claude/ directory contains the main system prompt (system-prompt.md, structured as 20 chapters) and a skills/ subdirectory with 14 Markdown files, each defining one procedural skill. The codex/ variant is described as maintained separately in the README.

The 20 chapters in system-prompt.md cover: Identity and role, Workflow, Asking questions first, Rooting designs in existing context, Content principles, Aesthetic principles, Visual hierarchy and rhythm, Typography system, Color system, Accessibility and inclusivity, Interaction and feedback, Simplicity and one clear CTA, System thinking, Respecting the medium, Understanding users, Quality over quantity, Output principles, Collaboration and delivery, IP and content boundaries, and Available skills.

## The 14 Skills and How to Use Them

Skills group into three categories. Production skills build something from scratch: discovery-questions, frontend-aesthetic-direction, wireframe, make-a-deck, make-a-prototype, make-tweakable, and generate-variations. System skills extract structure from existing work: design-system-extract and component-extract. Review skills audit and fix: accessibility-audit, ai-slop-check, hierarchy-rhythm-review, interaction-states-pass, and polish-pass.

The README describes two example skill chains. A greenfield flow proceeds in this order:

```
discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass
```

A brand-aware flow follows a different path:

```
design-system-extract → generate-variations → make-tweakable → polish-pass
```

Skills can be chained in other orders depending on the project context. The skill name is the trigger: when a user's request matches a skill description, the agent loads that skill and follows its phased procedure. This means the prompt does not require explicit invocation syntax; describing a task that matches a skill description is enough to activate it.

## Model Calibration: Current Models Versus Older Ones

The README dedicates a section to model calibration that makes concrete observations about how current Anthropic frontier models behave differently from earlier generations. The current claude/ variant uses conditions instead of quotas because current models treat quotas as literal contracts and over-trigger on them. It uses explicit triggers for skills and subagents because current models under-reach for optional capabilities by default. It uses coverage-first reviews because current models follow "only report important issues" literally, which silently suppresses findings.

The README also identifies a "house-style" problem with current Anthropic models: a default aesthetic involving cream background, serif display type, and terracotta or amber accents. The ai-slop-check skill's rule 9 detects this pattern, and frontend-aesthetic-direction's four-directions protocol pre-empts it by requiring explicit visual direction before production begins.

For older models (Claude Opus or Sonnet 4.6 and earlier, or non-Anthropic models), the README advises restoring stronger imperative language if the model skips question rounds or reviews. The codex/ variant is described as maintained separately and unaffected by the current-model calibration notes.

## Installing and Using the Prompt

To use the system prompt directly, paste the contents of claude/system-prompt.md as the system prompt for any LLM that supports system prompts. The README lists Claude, GPT, Gemini, and local models as targets. No installation is required: the prompt is plain Markdown text.

To use skills, each skill in claude/skills/ is a self-contained phased procedure in Markdown. The skill name triggers it: when a request matches the skill description, the agent loads and follows the skill. Skills do not require a separate installation step beyond having the system prompt active.

To adapt the prompt for a different environment (a Figma plugin, a code-only assistant, a chat-only design coach), the README advises adjusting the workflow chapters and tool references. It notes that the design principles in chapters 5 through 16 transfer to any medium and are not environment-specific.

## Genuine Limitations of the Approach

The prompt assumes an HTML-output design environment similar to Claude.ai's design tool. Teams working in Figma, code-only environments, or component libraries will need to adapt the workflow and tool references. The README acknowledges this directly and invites contributions for adapted variants.

The calibration is version-specific. The README notes that sampling parameters like temperature no longer exist on current Anthropic models, so visual variety must come from explicit per-variation specs rather than randomness. This is a meaningful constraint for teams that rely on temperature for creative variation. It also means prompt behavior may change as underlying model behavior changes, requiring periodic recalibration.

The repository has no releases and the last push was on 2026-07-06. The prompt does not ship with any automated tests or evaluation framework, so there is no systematic way to verify whether a model is following the intent of each chapter rather than the letter. The README explicitly invites contributions of real-world failure cases the prompt should defend against, suggesting the failure catalog is still growing. A team adopting the prompt should expect to tune it against their own model's behavior before relying on it.

## Maintenance and License

The repository uses the MIT license, which permits use, modification, distribution, and commercial use with attribution. The last push was on 2026-07-06, and the repository has no GitHub releases. The README invites contributions in four specific areas: 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 the prompt should defend against, and translations into other languages.

## Conclusion

Designers and front-end developers who want a structured LLM design workflow rather than one-shot generation will find this prompt useful. The 20-chapter structure and skill chaining protocol enforce a methodical process, and the ai-slop-check skill actively hunts for the generic patterns the prompt wants to avoid. Someone looking for a quick way to generate polished UI from a brief will find the question-first workflow and multi-stage review process slower than expected. Before adopting the claude/ variant, verify your LLM is a current Anthropic frontier model or adjust the phrasing; the README explicitly notes the calmer instruction style may under-trigger on older models such as Claude Opus or Sonnet 4.6 and earlier, and recommends restoring stronger imperative language if the model skips question rounds.

## FAQ

### What does the claude-design-system-prompt do?

It turns any LLM with system prompt support into a design collaborator that follows a 20-chapter design philosophy. It enforces content discipline, accessibility, visual hierarchy, and quality criteria, and invokes 14 procedural skills for production, extraction, and review tasks.

### Does claude-design-system-prompt work with non-Anthropic models?

The README states the prompt can be dropped into any LLM that supports system prompts, naming Claude, GPT, Gemini, and local models. The claude/ variant is calibrated for current Anthropic frontier models; the README recommends restoring stronger imperative language for older models or non-Anthropic models if the agent skips question rounds.

### How is claude-design-system-prompt different from a simple design prompt?

It includes 14 procedural skills that can be chained in sequence and an ai-slop-check skill that specifically identifies common AI output patterns. The 20-chapter system prompt enforces a question-first workflow and requires explicit aesthetic direction before any production work begins.

## Sources

- [Issues](https://github.com/Trystan-SA/claude-design-system-prompt/issues)
- [License: MIT](https://github.com/Trystan-SA/claude-design-system-prompt/blob/main/LICENSE)
- [README](https://github.com/Trystan-SA/claude-design-system-prompt/blob/main/README.md)
- [Trystan-SA/claude-design-system-prompt on GitHub](https://github.com/Trystan-SA/claude-design-system-prompt)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/trystan-sa-claude-design-system-prompt