← all repositories
Trystan-SA/claude-design-system-prompt

The Prompt That Makes LLMs Design, Not Decorate

Most AI design assistants churn out the same rounded-card, gradient-heavy, emoji-studded slop; this reverse-engineered system prompt and skill library forces them to earn every pixel.

claude-design-system-prompt
Collecting fresh signals — velocity needs a few days of history.
collecting data…
star history

What it does This is a reverse-engineered system prompt and 14 invokable skills lifted from Anthropic’s Claude Design tool. Fed into any LLM that accepts system prompts, it replaces the default instinct for generic SaaS templates—aggressive gradients, emoji decoration, rounded-corner cards—with a 20-chapter design philosophy covering content discipline, visual hierarchy, accessibility, and interaction states. The skills act as procedural checklists the model triggers for wireframing, prototyping, accessibility audits, and detecting what the prompt bluntly labels “AI slop.”

The interesting bit The calibration exposes how frontier model behavior has shifted. Older prompts relied on quotas and aggressive imperatives like “CRITICAL: YOU MUST,” but current Anthropic models (Fable 5, Opus 4.7/4.8) treat such quotas as literal contracts and over-trigger. The prompt now uses conditional autonomy—state when to act, let the model pick reasonable defaults for minor decisions, and force explicit skill invocation rather than hoping it volunteers. There is even a dedicated ai-slop-check skill to catch the model’s own default aesthetic (cream backgrounds, serif display type, terracotta accents).

Key highlights

  • Twenty-chapter design philosophy covering typography, color systems, oklch(), CSS Grid, and semantic HTML
  • Fourteen modular skills split across production, system extraction, and review workflows
  • Dual variants: a claude/ version for Anthropic’s subagent-capable models and a codex/ version for OpenAI’s single-loop Codex
  • Accessibility and inclusivity as first-class constraints, not afterthoughts
  • House-style guardrails that preempt the “aggressive gradients, emoji decoration, Inter-everywhere” tropes

Caveats

  • The prompt assumes an HTML-output environment similar to Claude.ai’s design tool; adapting it to Figma plugins or terminal-only workflows requires manual adjustment
  • The calmer, condition-based phrasing may under-trigger on older models (pre-Opus 4.6) or non-Anthropic frontiers, so you might need to restore stronger imperative language

Verdict Grab this if you want an LLM collaborator that sweats the details—spacing scales, focus rings, motion preferences—instead of defaulting to startup-landing-page boilerplate. Skip it if you need a plug-and-play Figma plugin or want to keep the rounded-card aesthetic this prompt was built to destroy.

Frequently asked

What is Trystan-SA/claude-design-system-prompt?
Most AI design assistants churn out the same rounded-card, gradient-heavy, emoji-studded slop; this reverse-engineered system prompt and skill library forces them to earn every pixel.
Is claude-design-system-prompt open source?
Yes — Trystan-SA/claude-design-system-prompt is open source, released under the MIT license.
How popular is claude-design-system-prompt?
Trystan-SA/claude-design-system-prompt has 1.3k stars on GitHub.
Where can I find claude-design-system-prompt?
Trystan-SA/claude-design-system-prompt is on GitHub at https://github.com/Trystan-SA/claude-design-system-prompt.

heatdrop uses Google Analytics to see which pages get read — nothing else. Your call. How we handle data.