Design Substrate
Escape the Mean.
Every AI-generated site converges on the same palette, the same layout, the same voice. Design Substrate gives your AI a vocabulary — so your work looks like yours.
AI Output Converges on the Mean
Ask three different AI tools to build you a landing page. You'll get the same Tailwind defaults, the same blue-to-purple gradient hero, the same rounded card grid. It's competent. It's generic. It's forgettable.
This isn't a model failure — it's a context failure. Without design direction, AI falls back on statistical averages from its training data. The most common patterns win. Every project drifts toward the mean.
12 Patterns That Scream "AI Made This"
The Design Substrate skill includes a built-in checklist. If your output hits three or more of these, it's generic. Most unprompted AI output hits eight.
The irony: ask AI to design a tool that fixes generic AI output — and without a substrate, it produces output that hits 8 of 12. The tool that's supposed to fix the problem has the problem.
Three Steps to a Design System
Design Substrate walks you through a guided process that distills your aesthetic instincts into a format AI tools can act on.
Taste
Three questions. Then a sketch.
The process starts by asking what you like. Not hex codes or font stacks — real preferences. Moods, references, the feeling you're going for. The AI translates instinct into a design sketch.
Iterate
Sketch, react, refine.
You see a preview and react. Too warm? Too loud? More contrast? The system refines based on your feedback until the palette, type, and spacing feel right. No design expertise required.
Apply
Git repo = design system.
Your decisions are encoded into a single skill file that lives in your AI tools' skills directory. Every future prompt inherits your design vocabulary automatically.
From Safe to "What the Hell Is That"
The third question in the taste command asks where your project
lives on a 1-to-10 scale. One is corporate-safe. Ten is experimental
enough that people will have opinions. This single number shapes every
decision the substrate makes.
And when you're ready to push further, the --surprise flag
cranks the temperature two or three levels beyond wherever you set it.
Not random — unexpected within your vocabulary. That's the
distinction.
--surprise Push 2–3 levels beyond your setting. See what's possible at the edges. One File, Every Tool
Design Substrate installs a single Markdown skill file into each supported AI tool's skills directory. No plugins, no extensions, no configuration. The tool reads it as context and applies your design vocabulary to every response.
Claude Code
~/.claude/skills/design-substrate.md OpenAI Codex
~/.codex/skills/design-substrate.md Gemini CLI
~/.gemini/skills/design-substrate.md # Design Substrate — Skill File
## Color Palette
- Background: Deep charcoal (#292c3c)
- Surface: Elevated slate (#303446)
- Primary: Warm coral (#ef9f76)
- Accent: Soft blue (#8caaee)
## Typography
- Headings: Manrope, 800 weight
- Body: System sans, 1.6 line-height
- Code: JetBrains Mono
## Voice
- Direct and confident
- No filler phrases
- Short paragraphs, high signalA Complete Design System in Your Repo
When the structure command runs, it generates a full browsable
design system as self-contained HTML. Zero dependencies. Open any file in
a browser. Send a single file to a collaborator. It lives in your repo and
runs anywhere.
Colors
Palette with documented intent — not just hex values, but why each color exists and when to use it. Contrast ratios included.
Typography
Font stack, weight hierarchy, size scale with mathematical relationships. Fluid clamp() values for responsive type.
Spacing & Layout
Spacing scale with documented logic. Grid patterns. Component padding rules. Nothing arbitrary.
Voice & Tone
Writing guidelines with before/after examples — not "be conversational" but the actual difference between on-brand and off-brand sentences.
Iterations
Every version preserved. See the progression from first take to final decision. The evolution is part of the system.
Hub Page
A styled index page — not a generic file listing. The front door to your design system, built with the vocabulary you created.
Medium-Agnostic
The substrate isn't just for websites. Apply it to proposals, documents, client-facing materials — anywhere AI generates content for you. Same vocabulary, completely different output format.
Born From 42 Variants
Design Substrate started as a question: could we systematically explore color palettes with AI? The answer was 42 variants across three rounds of iteration — and the realization that taste can be encoded as context.
From early charcoal/coral experiments through Catppuccin-inspired dusk palettes to the final production theme — each variant taught the system something about taste.
Try Design Substrate
One command. Three AI tools. Your design vocabulary, baked in.
curl -sSL https://designsubstrate.com/install.sh | bash