Spruce · v1.0MIT license

Spruce.

The only AI design reasoning system that starts with users, not pixels.

Installs into the AI coding tools you already use — so the design is grounded in real people and the jobs they’re doing, not the average of training data.

Philosophy · A revision

The problem isn’t that AI can’t design. It’s that all AI designs the same way.

The cause is structural. AI models are trained on the same corpus of design examples, and inside that corpus, certain choices appear far more often than others. When a model generates new design, it reaches for those defaults reflexively — not because they’re right for your product, but because they’re statistically most likely.

We’ve cataloged the patterns we keep seeing. They’re everywhere because they’re always available.

  • Inter for everythingreplaced with A typeface for this product
  • Blue and purple gradientsreplaced with Warm neutrals, one accent
  • Three equal cardsreplaced with Asymmetric, editorial
  • 8px corners by reflexreplaced with Restrained, specific
  • “Let’s get started!”replaced with Direct, no throat-clearing
  • Linear easing, 300msreplaced with Custom curves, paced

Spruce is the alternative. It starts with users, not pixels.

Most AI design tools generate from prompts and fill in the decisions invisibly. Spruce starts upstream — with named personas, the jobs they’re hiring the product to do, the moments they encounter the design. Captured into context files every command reads from, so every decision can be tied to a real person doing a real thing.

From that grounding, Spruce composes the design reasoning that follows — typography, color, spacing, components, motion, voice. The fundamentals good design has always rested on, now calibrated to a specific product for a specific audience. And it gives you tactical control through a set of commands that let you direct, refine, or rethink any decision.

The grounding makes the reasoning specific; the reasoning runs in the background; the commands put you in the chair.

What you get back is design that happens to be made with AI rather than AI design.

The product gets to look like itself.

The catalog

Twenty-five commands across five tiers. Each one is a specific conversation with your AI tool — and a specific kind of impact on the project.

Reasoning about who the design serves, before reasoning about how it should look. Optional but every other tier reads better with it in place.

The loop

Commands run together as a loop on a foundation.

  1. Set context

    /spruce-up

  2. Discover

    /personas

  3. Generate

    /design

  4. Refine

    /typeface

  5. Review

    /critique

See the workflow end-to-end →

Install · One command

One command. Spruce installs into your AI coding tool and stays out of your way until you ask for it.

npx spruce-skill add

Tool support

  • Claude CodeLive
  • CursorLive
  • VS CodeLive
  • CodexLive
  • GeminiLive

See install for all tools →

After installing

The workflow, in four moves. Context first, users next, design from there.

Set up your project.

Run /spruce up once. It walks through a short interview about your product, audience, and direction, then writes a context file that every subsequent command reads. Your design language travels with the project.

/spruce up

FAQ · Common questions

What visitors ask most. Answered directly.

See the full FAQ →

Releases · Recent shipping

  1. The fourth and fifth harnesses: Spruce now installs into VS Code (with GitHub Copilot) and Gemini CLI in addition to Claude Code, Cursor, and Codex CLI — completing the originally-planned multi-tool roadmap. The same `npx spruce-skill add` command auto-detects which AI coding tool the project uses and installs the right per-harness bundle. **Spruce works in all five major AI coding tools.**

  2. The third harness: Spruce now works in Codex CLI in addition to Claude Code and Cursor. Codex picks up Spruce skills natively from the project's `.agents/skills/` directory — Codex's primary skill-loading path — and follows each skill's conversation pattern correctly. Verified end-to-end via real Codex CLI smoke tests.

  3. The second harness: Spruce now installs into Cursor in addition to Claude Code. Same install command, same 25-command catalog, same slash invocation pattern (`/decide`, `/typeface`, `/personas`) — no mental-model translation between harnesses.

  4. The first major system addition: a new Discovery tier between Setup and Generative that grounds design work in named users and the jobs they're hiring the product to do.