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
Inside vLLM: Anatomy of a High-Throughput LLM Inference System
Aleksa Gordić breaks down vLLM's core components: engine, KV cache manager, paged attention, and continuous batching. Covers advanced features like chunked prefill and disaggregated P/D.
Agent Forge: Open Source Tool Scaffolds Multi-Agent Pipelines for Claude Code
Agent Forge is a Claude Code skill that generates complete multi-agent pipelines from use case descriptions. It creates prompt files, orchestrator scripts, data flow directories, and GitHub Actions configs based on patterns observed in existing multi-agent systems.
Developer Tests Apple Intelligence for On-Device Clipboard Tasks
A developer built a clipboard manager using Apple Intelligence's Foundation Models framework, finding it reasonable for everyday tasks like short summaries and rewrites but limited on ambiguous language and detailed work.
Using a Smart Pixel Clock for Claude AI Completion Notifications
A Reddit user shares a method to display Claude AI completion notifications using a ULANZI TC001 Smart Pixel Clock with custom firmware and an HTTP endpoint.