Sketch The Solution

Sketch the Solution

If running interactively (human present), output "Read Sketch the Solution skill." to acknowledge. If running with --dangerously-skip-permissions (AFK/unattended), skip acknowledgement and proceed directly.

Pipeline position: /grill-me → /write-a-prd → /sketch-the-solution → /architect → /do-work

A 7-phase framework for designing user-centered digital products — from goal discovery through tested interface design. Each phase produces artifacts that feed the next. Derived from the GRNDWRK UX process (Amir Khella, Carl Smith, Dane Maxwell).

Prerequisites

• Customer avatar(s) from idea extraction
• ID call notes / customer interview transcripts
• Understanding of the customer's current pain (problem space)

The 7 Phases

Run each phase sequentially. Do not skip phases — outputs of phase N are required inputs for phase N+1. Each phase has a detailed reference document under references/. Read the phase reference before running the phase, then read each step reference as you work through it.

Phase 1 — User Stories

Reference: references/phase-1-user-stories.md. Produces: user-stories.md Steps: Identify Goals → Write User Story → Highlight Key Terms & Verbs

Phase 2 — System Map

Reference: references/phase-2-system-map.md. Produces: system-map.md (with Mermaid ERD) Steps: Create System Map → Draw Relationships

Phase 3 — Flow Diagram

Reference: references/phase-3-flow-diagram.md. Produces: flow-diagram.md (with Mermaid flowchart) Steps: List Screens → Create Flow Diagram → Validate with User Stories

Phase 4 — Model Attributes

Reference: references/phase-4-model-attributes.md. Produces: attributes.md Steps: List Attributes for each system map element

Phase 5 — Screen Requirements

Reference: references/phase-5-screen-requirements.md. Produces: screen-requirements.md Steps: Create Screen Goals → Inform / Engage / Invite → List Screen Attributes (ABC)

Phase 6 — Interface Design

Reference: references/phase-6-interface-design.md. Produces: interface-design.md (specs + wireframes) Steps: Get Inspired → High-Level Sketches → Detailed Sketches

Phase 7 — Test Driven Design

Reference: references/phase-7-test-driven-design.md. Produces: test-plan.md Steps: User Testing → Six Mistakes Review

Data Flow

ID Calls → [1] user-stories.md → [2] system-map.md → [3] flow-diagram.md
         → [4] attributes.md → [5] screen-requirements.md
         → [6] interface-design.md → [7] test-plan.md → /architect

Partial Entry

If prior phase artifacts already exist, validate them and start from the next incomplete phase. Ask the user which artifacts they already have.

Rules

Do:

• Complete each phase fully before advancing
• Validate each phase's output against prior artifacts
• Generate Mermaid diagrams for visual artifacts
• Ask the user for missing inputs rather than guessing

Do not:

• Skip phases — each depends on the previous
• Design the solution in user stories — stories describe CURRENT pain only
• Jump to interface design before system map and flow are complete
• Over-polish early phases — iteration is expected

Key Principles

• Problem Space → Solution Space — inhabit the user's world before designing
• Kaizen > Perfection — 1% daily improvement beats launching perfect products
• Everything is an experiment — no right or wrong, only data
• Sellable UI — only design value-demonstrating screens, skip admin/login
• Never skip steps — each phase builds on the last, skipping creates gaps and assumptions

Handoff

After completing all 7 phases, offer:

1. /architect — create implementation plan from the UX artifacts
2. /do-work — begin building the product
3. /write-a-prd — formalize the design into a PRD

If context is high, follow the standard handoff protocol (@~/dotfiles/instructions/handoff.instructions.md).