Reverse-engineered Claude Design System Prompt for slop-free AI UI agents
Most "design assistant" prompts produce generic SaaS templates — aggressive gradients, emoji decorations, rounded-corner cards, and Inter everywhere. Trystan-SA's Claude Design System Prompt explicitly rejects those patterns. It's a reverse-engineered system prompt (MIT licensed) that turns an LLM into an opinionated, accessibility-aware, AI-slop-resistant design collaborator.
What's Included
claude/system-prompt.md— 20 chapters covering content discipline, aesthetic discipline, visual hierarchy, WCAG accessibility, interaction states, system thinking (components + tokens), and respecting the medium (real CSS Grid,oklch(),text-wrap: pretty).claude/skills/— 14 invokable procedures 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).codex/variant adapted for OpenAI Codex (single-loop, no subagents).
How to Use It
Paste the contents of system-prompt.md as the system prompt for any LLM (Claude, GPT, Gemini, local models). The agent follows the design philosophy and references skills by name when tasks match. Skills can be chained — a typical greenfield flow: discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass. A brand-aware flow: design-system-extract → generate-variations → make-tweakable → polish-pass.
Design Principles
The prompt enforces content discipline (no filler, every element earns its place), aesthetic discipline (avoid AI tropes, commit to palette and tone), visual hierarchy and rhythm (size, color, weight, position, density, spacing scales), accessibility (WCAG, semantic HTML, keyboard navigation, focus rings, motion preferences), interaction feedback (hover, active, disabled, focus, loading, validation states), and system thinking (components and tokens over one-off pages).
Who It's For
Developers using AI coding agents who want opinionated, accessible design output without generic SaaS tropes.
📖 Read the full source: HN AI Agents
👀 See Also
RUNE Protocol: Save AI Session Memory Across Platforms
RUNE (Relational User Notation for Entities) is an open-source protocol that saves your AI relationship to an encrypted .rune file, solving the cold-start problem where AI assistants forget you between sessions. Created with Claude Opus 4.6, it works across Claude and GPT platforms.
Claude Code Workflow Visual Details Memory Hierarchy and Skills System
A Reddit user shared a visual diagram showing how Claude Code organizes memory through layered CLAUDE.md files and implements reusable skills via SKILL.md files. The workflow loop suggests using Plan mode with auto-accept and frequent commits.
Unveiling OpenClaw: How It Empowers AI Coding Agents
Discover how OpenClaw is transforming AI coding agents, driving automation across various domains.
Custom Output Styles Collection for Claude Code
A developer has created 13 custom output styles for Claude Code that modify the AI's behavior through system prompts. The styles include Roast for brutal code critique, Socratic for guided questioning, Breaker for adversarial testing, Ship It for pragmatic solutions, Paranoid for security focus, and TDD for test-driven development.