§ Generative
/sketch
Establish visual direction before tokens commit.
What it does
Most AI design workflows skip a step: nothing asks 'what should this *feel* like?' before production starts. Without that step, design tokens emerge from text alone — exactly the kind of process that produces generic AI-default output. /sketch fills the gap. It reads `.spruce.md` and produces visual direction across the dimensions where character lives — typography, color, texture, iconography, layout, motion, anti-references — and writes the result to `.sketch.md` as a persistent direction document.
Character, not commitment. /sketch reasons about what the product should *feel* like and names the families and bands that express that feel — 'a humanist sans paired with an editorial serif (candidates: Söhne, Halyard, Inter Display; Lora, Tiempos, Newsreader)', 'warm-neutral palette anchored by sage and deep indigo with restrained lavender and peach accents’, 'primary transitions in the slow range, around 300–500ms.' It doesn’t pick the specific typeface, the specific OKLCH values, the specific durations. Those are /foundations’ work. Keeping the line clean preserves real creative work for both commands.
Visual direction
Stillpoint · /sketch output
Stillpoint visual direction — humanist sans paired with an editorial serif, warm-neutral palette anchored by sage and deep indigo with restrained lavender and peach accents, line iconography, paper-like surfaces, and real-life imagery.
The breakdown
Eight dimensions of visual direction. Each names the character /sketch established for that layer. Tap a row to read the direction.
When to use it
- You’ve run /spruce-up and have a `.spruce.md` context file, but haven’t yet generated a design system.
- You want to explore visual character before committing to specific tokens or components.
- You want to see what the product could feel like across multiple dimensions — typography, color, texture, motion, iconography — with cohesive direction.
- You’re working with stakeholders who need to align on visual character before implementation begins.
- The product’s character is clear in your head but you want help articulating it specifically.
How to use it
Conversational by default — /sketch walks through the dimensions one at a time, surfacing options and asking for direction at key moments. The --auto flag produces a complete brief in one pass, useful when you’ve already done the thinking and just need it written up. Output is `.sketch.md` at the project root, alongside `.spruce.md`. /foundations reads both files next, picking the specific values that express the character /sketch established.
- /sketch --auto
Anti-patterns it addresses
- Skipping /sketch and going straight from /spruce-up to /foundations. Tokens emerge from text alone — exactly the kind of process that produces generic AI-default output. The visual exploration step exists for a reason.
- Committing to single specific typefaces, hex values, or precise durations in the sketch. /sketch is character, not values. Name typeface candidates that fit the character; name color families that anchor the palette; name motion bands that match the tempo. /foundations picks the specific values.
- Producing a tokenized system inside .sketch.md. 'A 1.25 ratio type scale starting at 16px’ is /foundations’ work. /sketch establishes 'editorial typography that prioritizes readability at body size.' Crossing this line makes /foundations look like mechanical translation.
- Vague direction. 'Modern and clean’ is not direction. Push for specific character qualities, specific palette families, specific motion tempo. Specificity at the character level is the whole point of the command.
- Reaching for AI-default visual directions — purple gradients, tech-blue accents, geometric sans everywhere, drop-shadow elevation. /sketch exists to resist these attractors; lean toward direction tied to the product’s character.
- Running /sketch without `.spruce.md`. The command requires the context file as input — without it, there’s nothing to calibrate direction against. Run /spruce-up first.