§ Diagnostic
/explain
Walk through the reasoning behind a decision.
What it does
Spruce’s “show your work” command. The other generative and corrective commands produce designs with brief decision notes; /explain opens up the full reasoning behind those decisions — what was considered, why specific choices were made, how they connect to the product’s character and the design principles that governed them.
/explain serves Spruce’s deepest commitment: that users should develop taste and direction, not just receive outputs. Each walkthrough shows how the decisions actually got made, so the next brief lands with more confidence and more specific direction. /explain operates on prior context — the most recent design output in the conversation — and walks through decisions in order of impact, from character direction down to craft details.
A walkthrough
Subject · Personalization banner
The feature direction
Picked personalization over filtering, save-for-later, or adding a fourth featured card.
Filtering puts the work on the visitor — they have to know what mood or duration they want before the system helps. Save-for-later requires sign-in and breaks the home page's marketing-first frame. A fourth card would have compounded the three-equal-cards pattern the moodboard already flagged as an anti-reference. Personalization moves the work to Stillpoint — the product makes a small thoughtful suggestion based on context the visitor has already given (time of day) without asking for any input. Matches the .spruce.md voice description of a “calm, supportive friend” more directly than the alternatives.
Placement
Sat the banner above the existing eyebrow + heading + grid rather than replacing a card or sitting alongside as a fourth.
The .sketch.md's layout direction was “editorial spreads, quietly asymmetric.” Replacing a card or adding a fourth would have compounded the three-equal-cards pattern already in the practices grid — a worse outcome than the existing layout, which /critique was already going to flag. Above-grid keeps the curated three intact while making the personal moment unmistakable. Reads as a different KIND of UI than the cards beneath, which is the desired distinction — recommendation, not catalog entry.
Recognition strategy
Time-of-day signal over mood-prompt or session-continuation.
The .spruce.md describes the audience as adults building a sustainable practice — not specialists who'd answer a 12-question mood survey before being recommended a practice. Time-of-day works equally well for first-time visitors (no session history) and returning ones (no specific journey to continue). Mood-prompt would have required interaction before any value lands — adds friction for nothing. Continuation would have required session history not every visitor has. Time-of-day is the lowest-friction signal that delivers the most value, and it ties naturally to the practices' existing morning/mid-day/evening framing.
Copy register
“It’s evening — let the day settle with Evening Wind-down.” over “Recommended tonight: Evening Wind-down.”
The .spruce.md voice direction is calm and encouraging — like a calm, supportive friend; direct without being curt; warm without being saccharine. Direct-functional copy reads as utility (the SaaS-template register the moodboard explicitly excluded). Quiet-recommendation (no surrounding copy, just the practice name) underweights the moment — it'd land as system metadata rather than as a personal suggestion. Warm-conversational matches the voice already established in Stillpoint's body copy and gives the recommendation the conversational pacing the rest of the page commits to.
Visual treatment
Soft sage-to-lavender gradient with a sage border. Not a tinted band, not a callout box, not a system-alert pattern.
The personalization is a personal moment, not a system message — the visual treatment had to read as a quiet recommendation rather than as a UI alert. The gradient uses two of the foundation's established accent families (sage primary + lavender warmth) so the banner stays inside Stillpoint's palette without introducing a new color zone. Sage border provides just enough definition to read as a contained surface; a heavier border or shadow would have signaled “card” and competed with the practices grid below. Soft tones keep it as a quiet visual moment that yields to the cards underneath when the visitor is ready to browse.
Want any decision unpacked further? Run /explain copy for a deeper read on the voice register, or /decide if you want to revisit a specific call.
— by Spruce
/explain shows the work behind a recent design — what was considered, why specific choices were made, how they connect to the product's context. The format is a walkthrough, ordered by decision impact: feature direction first, craft last.
When to use it
- You want to understand why a design looks the way it does.
- You’re evaluating whether the choices fit your product and want the reasoning to evaluate against.
- You’re learning design thinking and want to see how decisions connect to principles.
- Something in the output surprised you (positively or negatively) and you want to know why.
- You’re asking “walk me through this,” “explain your choices,” or “why did you pick X.”
How to use it
By default /explain produces a comprehensive walkthrough across all relevant decision areas of the most recent design output. Pass a domain (typography, color, layout, motion) to go deeper into one area. Pass a specific element (“the button,” “the hero section”) to focus on that part of the design. /explain operates on prior context — it doesn’t generate new work.
- /explain typography
- /explain the hero section
Anti-patterns it addresses
- Walking through every micro-decision rather than the high-impact ones. The hierarchy matters: character direction shapes layout shapes typography shapes color, and visitors who read only the first half should still get the decisions that mattered most.
- Reasoning that ties to general design principles instead of the specific product. “This typeface was chosen for legibility” is generic; “chosen because the .spruce.md describes a warm humanist character and Lora’s drawn-quality letterforms express that” is grounded.
- Justifying every choice as if defending it. The walkthrough is informational, not defensive. If a choice is genuinely uncertain or could legitimately go another way, say so.
- Going deep on craft details before establishing the higher-impact decisions. Craft is the closing register, not the opening.
- Operating on no prior context. /explain explains a recent output; without one, it should ask what to discuss rather than invent a design to explain.