Docs/Recipes/Design Prompt Library

Design Prompt Library

Curated prompts to feed /spec-design when a fresh visual language is needed. Each recipe is grounded in a concrete extraction goal so Claude does not hallucinate tokens or brand colors.

Reference-first extraction

When you already have a design you love - a product screenshot, a brand site, a Figma export - point /spec-design at it and let the skill extract tokens. This is the highest-fidelity route.

/spec-design
> Reference: ./references/monad.png
> Extract tokens: colors, typography, spacing scale, border radii.
> Rules: do not invent brand colors. If unclear, mark as INFERRED.

Inferred from SRS

When no reference exists, the skill must infer a system from the SRS. Anchor the inference in specific SRS clauses so the choices are traceable.

/spec-design
> No reference. Infer from:
>   - Product tone in srs.md §1.2 ("token-lean, deterministic")
>   - Target audience in srs.md §2 ("engineers, students")
>   - Constraint in srs.md §4.1 ("zero JS runtime dependencies")
> Rules: propose a single dominant surface + accent; label every choice with the SRS clause that motivated it.

Component-scoped recipes

Once tokens exist, drive component-level design by naming the surface, the states, and the accessibility floor.

Buttons - primary, secondary, ghost; hover / active / disabled; contrast ≥ WCAG AA.

Forms - text input, textarea, select; error / helper / success states; keyboard focus visible.

Cards - default, hover, selected; explicit shadow tokens; safe padding scale.

Nav - top bar, sidebar, breadcrumb; active-state, current-page semantics.

When to refuse

The skill refuses to fabricate brand colors when a reference is supplied. If your reference is ambiguous (bad photo, low-res crop, mixed brand kit), fix the reference before running the skill; do not ask it to guess.

No fabricated brand colors

FR-DESIGN-04 mandates that /spec-design refuse to invent brand colors when a reference is provided. If the reference is incomplete, the skill will halt and ask.