SkillCommunity★ 1.5k

Claude Design System Prompt

Updated Jul 7, 2026

Claude Design System Prompt by Trystan-SA is a 20-chapter system prompt and 14-skill library that turns Claude into an AI-slop-resistant design collaborator. Explicitly rejects AI design tropes (gradients, emoji decoration, Inter-everywhere) and enforces content discipline, visual hierarchy, WCAG accessibility, and system thinking.

View on GitHub

What it does

ai-slop-check skill
Detects AI-trope design patterns — gradients, emoji, generic fonts, house-style defaults — and flags them for removal.
accessibility-audit skill
Audits a design or component for WCAG 2.2 compliance, semantic HTML, keyboard navigation, and motion preferences.
frontend-aesthetic-direction skill
Commits to a non-generic visual direction with a four-directions protocol when no existing brand is present.
polish-pass skill
Umbrella final-gate review covering hierarchy, rhythm, accessibility, interaction states, and content discipline.

Files (1)

OVERVIEW.mdprimary · markdown · 2.1 KB

## What it does

Claude Design System Prompt is a 20-chapter system prompt and 14 procedural skills that configure Claude as an opinionated, accessibility-aware, AI-slop-resistant design collaborator. The prompt explicitly rejects common AI design tropes (aggressive gradients, emoji decoration, rounded-corner-with-left-border cards, Inter-everywhere typography) and replaces them with design principles covering content discipline, visual hierarchy and rhythm, typography systems, color systems with oklch(), WCAG 2.2 accessibility, real CSS Grid, and component/token system thinking. The 14 skills group into: Production (discovery-questions, frontend-aesthetic-direction, wireframe, make-a-prototype, make-a-deck, 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). Variants exist for Claude (claude/) with subagents and for OpenAI Codex (codex/) with sequential reviews.

## Key skills

- ai-slop-check — detects gradient/emoji/font/house-style AI tropes
- accessibility-audit — WCAG, semantic HTML, keyboard, motion preferences
- frontend-aesthetic-direction — commits to a non-generic look when no brand exists
- polish-pass — umbrella final-gate review before delivery
- generate-variations — 3+ hi-fi design variations across specified axes

Typical greenfield flow: discovery-questions > frontend-aesthetic-direction > wireframe > make-a-prototype > polish-pass

## Install

Paste claude/system-prompt.md as the system prompt in any LLM that supports system prompts — Claude Projects, Claude Desktop, ChatGPT Custom Instructions, or a local model. Skills in claude/skills/ are invoked by name; the agent loads the matching skill when a task matches its description. MIT licensed.

## When to use

Use this when you want Claude to give design feedback, generate UI, or review components with a genuinely opinionated aesthetic stance rather than defaulting to generic SaaS-template output. The ai-slop-check skill is particularly useful as a pre-delivery gate on any AI-generated frontend.