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
SkyClaw: Rust-Based Autonomous AI Agent Runtime
SkyClaw is an autonomous AI agent runtime built in Rust with a 7.1 MB binary that idles at 14 MB RAM and starts in under one second. It operates on five engineering principles including autonomy, robustness, and brutal efficiency.
Building a Self-Updating Writing Style Guide for AI-Assisted Content
A team building a voice extraction platform called Noren has developed a 117-line Markdown style guide that rewrites itself after every published piece, using Claude to enforce rules and banning AI-sounding words like 'cadence' and 'optimize'.
Voygr Launches Business Validation API for Fresh Place Intelligence
Voygr's Business Validation API checks if businesses are operating, closed, rebranded, or invalid by aggregating multiple data sources and detecting conflicting signals. The team is building an infinite, queryable place profile that combines accurate place data with fresh web context like news, articles, and events.
AI Agent Infrastructure: AgentMail, AgentLine, AgentCard, Daytona, and More
A Reddit post lists companies building agent-specific primitives: AgentMail (email), AgentLine (phone), AgentCard (payments), Daytona/E2B (computers), Browserbase/Browser Use/Hyperbrowser (browsers), Firecrawl (crawl), Mem0 (memory), Composio (SaaS tools).