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
LamBench: A Lambda Calculus Benchmark Suite for AI Coding Agents
LamBench is a benchmark suite evaluating AI agents on lambda calculus tasks, measuring intelligence, speed, and elegance. The v1 release includes problems and a matrix of scores.
Driftwatch V3 Released: AI-Assisted Codebase Monitoring Tool
Driftwatch V3 is now available as a public repository after a 5-6 day build involving approximately 9,000 lines of code and $160 in API credits. The in-browser tool tracks markdown file issues, flags contradictory instructions, and provides cost tracking with recommendations.
Claude Code Studio: Open-Source Desktop App for Managing Multiple Claude Coding Sessions
Claude Code Studio v0.9.3 is an open-source desktop application that provides a multi-pane interface for managing multiple Claude Code CLI sessions. It addresses common workflow issues like juggling terminal tabs, session persistence, and instruction repetition.
MCP Server Tracks Known Bugs in Dev Tools to Improve LLM Recommendations
nanmesh-mcp is an MCP server that crawls GitHub Issues, Stack Overflow, and Reddit to track real problems in 57 development tools, providing LLMs with current bug data before making library recommendations.