SKILL.md
Design Handoff Brief Skill
Produce a design brief that sets designers up for success — grounding them in user context and constraints before they open Figma, not after they've gone in the wrong direction.
Required Inputs
Ask the user for these if not provided:
- Feature brief or PRD (even rough notes work)
- Designer's name or team (for personalisation)
- Technical constraints (any engineering limitations already known)
- Timeline (when does design need to be done?)
What Designers Actually Need (and PMs Often Skip)
- The user's goal, not the feature name
- The emotional state of the user at this moment in the journey
- What success looks like — how will we know the design worked?
- Constraints: technical, legal, brand, accessibility
- Edge cases that must be handled
- What we're explicitly NOT solving for
Process
- Read the feature brief or PRD provided
- Extract user goal (reframe from feature language to user outcome language)
- Identify constraints — technical limitations, brand guidelines, accessibility requirements
- List edge cases the design must handle
- Define success criteria the design should be evaluated against
- Write a "not in scope" section to prevent scope creep in design
- Validate — Confirm every edge case listed is specific enough to design for, and every out-of-scope item is concrete enough to say "no" to
Programmatic Helper
Contrast ratios cannot be eyeballed. The AA line sits at 4.5:1, and #777777
on white is 4.478 (fails) while #767676 is 4.54 (passes) — no amount of
looking at a screenshot separates those. Compute them:
npx --yes notugly fix "#8ab4f8" "#ffffff" # ratio, APCA, and the nearest passing colour
npx --yes notugly onepager <url> --out review.html # every pairing, printable
npx --yes notugly vision # which colours merge for colour-blind viewers