HOW
IT WORKS.

Five modes. A conversation. A design language that travels with your project.

Mode 01

Taste

It starts with a conversation. The skill asks what you're building, what you love, what you hate. It discovers your aesthetic instincts — not through a form, but through dialogue. References, anti-references, gut feelings.

Live Demo

❯ /design-substrate --temp 9 taste

substrate What are we building?

A product website for an AI design tool.

substrate What do you love? What makes you stop scrolling?

iPod-era Apple ads. Daring Fireball. David Carson's Ray Gun.

substrate What do you hate? What makes you close a tab?

Generic AI startup sites. Indigo gradients. "Build the Future."

> Generating taste profile at temperature 9...

✓ taste.html ready — "Punk zine meets terminal culture"

Mode 02

Extract

From the conversation, it extracts structured design decisions. Color instincts (warm or cool? vivid or muted?). Type instincts (serif or sans? heavy or light?). Density, layout, medium. A taste profile, not a mood board.

Mode 03

Structure

The taste profile becomes a system. Tokens for colors, type scales, spacing rhythms. Component patterns that match the vibe. A voice guide so copy doesn't betray the visual language. All output as self-contained HTML and CSS — no build tools, no dependencies.

Mode 04

Apply

You build with it. Drop the substrate into your AI coding tool's skill directory. Now every page it generates uses YOUR design language — your colors, your type, your voice. Same AI. Different vocabulary. Yours.

Terminal

❯ /design-substrate apply --to homepage

> Reading substrate from ./design-substrate/

> Applying: colors, typography, spacing, components, voice

> Building page with substrate vocabulary...

✓ Generated homepage.html — hot pink slabs, mono labels, mega serif

Mode 05

Iterate

Not right yet? Iterate. Adjust the temperature. Refine the palette. Push the typography further. Each iteration builds on the last — it's a sketch process, not a one-shot generator. The substrate evolves until it feels like yours.

Process

❯ /design-substrate --temp 10 iterate

substrate What's working? What isn't?

Love the colors. The type is too safe. Push it further.

> Cranking type scale. Adding rotation to slabs.

> Generating v8 at temperature 10...

✓ v8.html ready — "The Split"

❯ /design-substrate --temp 9 iterate

Too chaotic. Dial back to 9. Keep the slabs.

✓ v11.html ready — "Zine Synthesis" (locked)

The Temperature Scale

1–10. How far do you want to go?

Temperature controls how conventional or experimental the substrate gets. Low temperatures play it safe. High temperatures break rules. There's no wrong answer — it depends on what you're building.

1 – 3 Safe Clean, conventional, professional. System fonts, neutral palettes, standard layouts.

4 – 5 Confident Personality showing. Custom type pairings, considered color choices, subtle distinctive details.

6 – 7 Expressive Clearly designed. Bold palette, dramatic type scale, components with character.

8 – 9 Bold Rule-breaking. Rotated elements, vivid contrast, opinionated layout. This site lives here.

10 WTF Full chaos. Experimental, polarizing, deliberately uncomfortable. Not for clients. For art.

What It Produces

A self-contained design language.

The skill generates a complete substrate — browsable HTML pages, a CSS token file, and structured data. No build tools. No framework lock-in. Drop it in and go.

Output Structure

design-substrate/
├── index.html           # Hub — links to all sections
├── taste/              # Taste profile page
├── colors/             # Color system + palette
├── typography/          # Type scale + pairings
├── spacing/            # Spacing + layout system
├── components/          # Component vocabulary
├── voice/              # Copy guidelines
├── attribution/        # Credits
└── assets/
    └── substrate.css   # All design tokens

Want to see a real one? Browse the substrate powering this site →

Philosophy

If it looks like AI made it, start over.

The entire point is escaping the statistical mean. Without a design language, every AI output converges — same indigo gradient, same card grid, same "Build the Future" headline. A design substrate breaks that convergence.

Negative Patterns

What the skill actively avoids.

Generic color palettes. Rounded-corner everything. Hero sections with stock photography. Feature grids with emoji icons. "Seamless" and "innovative" and "cutting-edge." The skill knows what AI-slop looks like and steers the other way.