claude-design-system-prompt
Reverse-engineered system prompt and skill library that turns an LLM into an opinionated, accessibility-aware, AI-slop-resistant design collaborator.
Claude Design System Prompt is a reverse-engineered, production-ready AI agent configuration that transforms any LLM supporting system prompts into an opinionated design collaborator. Developed by Trystan-SA, it includes a comprehensive 20-chapter system prompt defining design philosophy and 14 invokable procedural skills covering production, system extraction, and review workflows. The agent actively resists generic AI-generated design patterns (termed 'AI slop'), enforces accessibility standards, and focuses on content discipline, visual hierarchy, and system thinking. Developers can deploy it with Claude, GPT, Gemini, or local models by pasting the system prompt, then chain skills for complete design workflows from discovery through polish.
Key Features
Use Cases
- 01Building accessible web interfaces with enforced WCAG compliance and semantic HTML from the start
- 02Creating brand-aligned design systems by extracting tokens from existing sources and generating consistent variations
- 03Prototyping interactive experiences with working HTML/CSS rather than static mockups or handoff files
- 04Auditing existing designs for AI-generated tropes, accessibility gaps, visual hierarchy issues, and missing interaction states
- 05Training junior designers or developers on system thinking, design tokens, and component-based architecture
- 06Running complete design workflows from discovery questions through polished prototypes with automated quality gates
Related Agents
View morehermes-agent
The agent that grows with you
agency-agents
A complete AI agency at your fingertips - From frontend wizards to Reddit community ninjas, from whimsy injectors to reality checkers. Each agent is a specialized expert with personality, processes, and proven deliverables.
openinterpreter
A coding agent for open models like Kimi K3
cline
Autonomous coding agent as an SDK, IDE extension, or CLI assistant.
claude-design-system-prompt — FAQ
What is the Claude Design System Prompt AI agent?+
It's a reverse-engineered system prompt and skill library that configures any LLM (Claude, GPT, Gemini, local models) to function as an opinionated design collaborator. The agent follows a comprehensive design philosophy, actively avoids generic AI aesthetics, enforces accessibility standards, and can invoke 14 procedural skills for production, extraction, and review tasks.
How do I install and use this AI agent?+
Clone the repository, then paste the contents of system-prompt.md (from either the claude/ or codex/ folder) into your LLM's system prompt field. The agent will automatically reference skills by name when tasks match; you can also explicitly invoke skills by mentioning them (e.g., 'run discovery-questions' or 'do an accessibility-audit'). Skills can be chained for complete workflows.
Which AI clients and models work with this agent?+
Any LLM platform that supports system prompts: Claude (via Claude.ai or Claude Desktop), ChatGPT, Gemini, Codex, or local models. The claude/ variant is calibrated for Anthropic's Fable 5 and Opus 4.7/4.8 models; the codex/ variant is adapted for OpenAI Codex with sequential instead of parallel reviews.
Do I need API keys or prerequisites to use this?+
You only need access to an LLM that supports system prompts. No additional API keys are required beyond whatever authentication your chosen LLM platform uses. The agent works entirely through prompt configuration.
Is the Claude Design System Prompt free to use?+
Yes, it's open source and MIT-licensed. You can use, modify, and distribute it for any purpose, including commercial projects, with no attribution required (though appreciated).
What are the 14 skills and how do they work together?+
Skills are self-contained procedures in three categories: Production (discovery-questions, wireframe, make-a-prototype, make-a-deck, etc.), System (design-system-extract, component-extract), and Review (accessibility-audit, ai-slop-check, hierarchy-rhythm-review, polish-pass). The agent invokes them by name when tasks match, and you can chain them—for example, discovery-questions → frontend-aesthetic-direction → wireframe → make-a-prototype → polish-pass for a complete greenfield flow.
How do I install claude-design-system-prompt?+
Open the source repository on GitHub and follow its README. claude-design-system-prompt is a agent — MCP Agents Market links you directly to the official repo.
Is claude-design-system-prompt free?+
claude-design-system-prompt is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.