Model or dataset
Trystan-SA/claude-design-system-prompt avatar
Trystan-SA/claude-design-system-prompt

Claude Design System Prompt: A Prompt Library That Rejects AI Design Defaults

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

1,946 stars240 forksUnknownMIT

At a glance

What is it?
Trystan-SA/claude-design-system-prompt packages a 20-chapter system prompt and 14 procedural skills intended to stop an LLM from producing gradient-heavy, Inter-everywhere template output. The value is in the review skills and the explicit anti-trope rules; the cost is that it is a prompt artifact, not software, and it assumes an HTML-output design environment.
Who is it for?
Adopt it if you are already driving an LLM that accepts a system prompt and your output medium is HTML or a similar design surface, and you want review passes with names you can invoke. Do not adopt it if you need a rendered design tool, a Figma-native workflow, or a drop-in package with an install step; there is no build, no CLI, and the README states the prompt assumes an HTML-output design environment.
Can I use it commercially?
Yes. MIT is a permissive licence: you can use, modify and sell software built on it, as long as you keep its copyright and licence notices.
Is it still maintained?
Yes. The repository last received commits 71 days ago.
What is it written in?
GitHub does not report a main language for this repository.

Answers come from the project's GitHub data, last synced on September 15, 2026, and from our analysis. They are not legal advice.

DEEP OPEN-SOURCE ANALYSIS

The output problem this prompt is aimed at

The README names the failure mode directly: most design assistant prompts produce generic SaaS-template output, listing aggressive gradients, emoji decoration, rounded-corner-with-left-border cards, and Inter-everywhere typography. That is a specific and recognizable set of defaults, and the project treats them as defects rather than stylistic choices. The intended user is someone who already prompts an LLM for interface work and is tired of editing the same four tropes out of every result. It is not aimed at designers who want a generation tool with a canvas. It is aimed at people who treat the model as a collaborator whose taste can be constrained by written rules. The README frames the replacement as a design philosophy spanning content discipline, aesthetic discipline, hierarchy and rhythm, accessibility, interaction states, system thinking, respect for the medium, and quality over quantity. Those are the eight bullets the project uses to describe what it substitutes for template output.

How the prompt and skills fit together

The repository has two variants. The claude/ directory holds system-prompt.md, described as 20 chapters, plus a skills/ directory with 14 invokable skills. The codex/ directory holds AGENTS.md, described as the Codex auto-discovered entry point, a system-prompt.md adapted for Codex, and the same skills, but with sequential reviews instead of parallel agents. That last difference matters more than it looks: the Claude variant can delegate verification to subagents, while the Codex variant is described as single-loop with no subagents, so review work runs in sequence. The skills are grouped into production (discovery-questions, frontend-aesthetic-direction, wireframe, make-a-deck, make-a-prototype, make-tweakable, generate-variations), system (design-system-extract, component-extract), and review (accessibility-audit, ai-slop-check, hierarchy-rhythm-review, interaction-states-pass, polish-pass). The README states each skill is a self-contained, phased procedure and that the skill name is the trigger: when a request matches a skill description, the agent loads it and follows it. Skills can be chained, and the README gives two example flows, one greenfield and one brand-aware. The mechanism is therefore name-based dispatch over markdown procedures, not a runtime that executes code.

Model calibration is the most opinionated part of the repository

The README states the claude/ variant is calibrated for current Anthropic frontier models, named as Fable 5 and the Opus 4.7/4.8 lineage, which it says follow instructions more literally and need less aggressive prompting than earlier generations. Four calibration decisions follow. First, conditions instead of quotas: no "ask at least N questions" and no "CRITICAL: YOU MUST", because the README says current models treat quotas as literal contracts and over-trigger on them. The prompt instead states conditions for acting and includes an autonomy clause for minor decisions, where the model picks a reasonable option and notes it rather than asking. Second, explicit triggers for skills and subagents, because the README says these models under-reach for optional capabilities by default. Third, coverage-first reviews: review agents report everything with confidence and severity estimates and let an aggregation step filter, because the README says models follow "only report important issues" literally and silently suppress findings. Fourth, a house-style guard: the README says the models' default aesthetic of cream background, serif display type, and terracotta or amber accents is detected by ai-slop-check rule 9 and pre-empted by frontend-aesthetic-direction's four-directions protocol. The README also notes that sampling parameters such as temperature no longer exist on these models, so visual variety has to come from explicit per-variation specs rather than randomness. That is a concrete design constraint, not a slogan.

Getting it running: paste, then chain

There is no install command in the supplied material. The README gives one setup instruction for direct use: paste the contents of system-prompt.md as the system prompt for any LLM that supports system prompts. It says the agent will then follow the design philosophy and reference the skills by name when tasks match. For the Codex variant, AGENTS.md is described as the auto-discovered entry point, which suggests Codex picks it up from the repository layout rather than requiring a manual paste. The README also states the prompt assumes an HTML-output design environment similar to Claude.ai's design tool, and that if your target is a Figma plugin, a code-only assistant, or a chat-only design coach, you will need to adjust the workflow chapters and tool references. It adds that chapters 5 through 16, the principles, translate to any medium. The chaining examples are the closest thing to a runbook: discovery-questions, then frontend-aesthetic-direction, then wireframe, then make-a-prototype, then polish-pass for greenfield work; design-system-extract, then generate-variations, then make-tweakable, then polish-pass when a brand already exists. If your model under-triggers, the README says to restore stronger imperative language on older models such as Claude Opus or Sonnet 4.6 and earlier, or non-Anthropic models.

Where it breaks: medium assumptions and model drift

The clearest limitation is stated by the project itself. The prompt assumes an HTML-output design environment, and adapting it to a Figma plugin, a code-only assistant, or a chat-only design coach requires editing the workflow chapters and tool references. That is real work, and the README does not provide an adapted variant for those targets. The second limitation is calibration drift. The claude/ variant is tuned for specific model generations, and the README warns that on older or non-Anthropic models the calmer phrasing may under-trigger, meaning the model skips question rounds or reviews. So the same file that works well on one model can quietly do less on another, and the failure is silent: you get output, just without the review passes you expected. The third is that review quality depends on the model reporting findings at all. The coverage-first design exists precisely because the README observed that models suppress findings when told to report only important issues, which means the aggregation step is doing filtering the model cannot be trusted to do alone. If your workflow has no aggregation step, coverage-first reviews may hand you a long list with no prioritization. Finally, the codex/ variant is described as maintained separately, so the calibration notes for claude/ do not carry over.

What it is not: a comparison with building your own rules

The obvious alternative is not another named project but the thing most teams actually do: write a short house style guide and paste it into the system prompt, then review output by eye. The difference in approach is scope and structure. A house style guide usually states preferences, for example use our brand palette and avoid gradients. This project instead ships 20 chapters of principles plus 14 named procedures with defined triggers, and it separates production skills from review skills so that review can be invoked as a distinct pass rather than folded into generation. That separation is the actual design decision worth copying even if you do not adopt the files. The second alternative is using the design tooling built into a given platform, which renders and previews output directly. This repository does not render anything; the README describes make-a-prototype and make-a-deck as skills that produce HTML, and the quality gate is a written review pass named polish-pass, not a visual diff. If your bottleneck is visual iteration speed, a rendering environment addresses it and this prompt does not. If your bottleneck is that every generation looks the same, the review skills are the part aimed at you.

Maintenance cost and licence

The repository is MIT licensed, which permits use, modification, and redistribution with the licence and copyright notice retained; that is a statement about the licence text, not legal advice, and you should read LICENSE for the operative terms. The maintenance picture is unusual because the artifact is prose. There is no dependency graph to update and no build to break, but there is a calibration surface: the README ties the claude/ variant to named model generations and warns that older or non-Anthropic models may need stronger imperative language restored. When your target model changes, you are re-reading system-prompt.md against observed behaviour rather than bumping a version. The repository lists no releases in the supplied material, and the last push is dated 2026-07-06. The codex/ variant is maintained separately, so fixes to one do not automatically reach the other. For a team, the practical cost is the review time to keep the prompt aligned with the model you actually run, plus the adaptation work if your medium is not HTML.

Editorial conclusion

Adopt it if you are already driving an LLM that accepts a system prompt and your output medium is HTML or a similar design surface, and you want review passes with names you can invoke. Do not adopt it if you need a rendered design tool, a Figma-native workflow, or a drop-in package with an install step; there is no build, no CLI, and the README states the prompt assumes an HTML-output design environment. Before committing, open claude/system-prompt.md and confirm the 20 chapters match your medium, then run ai-slop-check against one of your own existing outputs to see whether its rule set flags patterns you actually care about. The repository is a prompt and a set of procedures, and its usefulness is bounded by how literally your target model follows instructions.

Official sources

  1. Issues
  2. License: MIT
  3. README
  4. Trystan-SA/claude-design-system-prompt on GitHub
Community notes

Community notes