design-handoff-brief

Design Handoff Brief Skill

Purpose

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.

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

1. Read the feature brief or PRD provided
2. Extract user goal (reframe from feature language to user outcome language)
3. Identify constraints — technical limitations, brand guidelines, accessibility requirements
4. List edge cases the design must handle
5. Define success criteria the design should be evaluated against
6. Write a "not in scope" section to prevent scope creep in design

Output Format

Design Brief: [Feature Name]

User Goal: (in the user's words, not ours) "When I [situation], I want to [motivation] so that I can [outcome]."

Context & Emotional State: [Where is the user in their journey? What are they feeling? What just happened?]

Design Success Criteria:

• [Criterion 1 — measurable where possible]
• [Criterion 2]
• [Criterion 3]

Constraints:

• Technical: [limitations engineering has flagged]
• Brand: [relevant brand guidelines]
• Accessibility: [WCAG level required, any specific requirements]
• Legal/Compliance: [if applicable]

Edge Cases to Design For:

• [Edge case 1]
• [Edge case 2]
• [Edge case 3]

Explicitly Out of Scope:

• [What we are NOT solving in this design iteration]

Reference Material:

• User research: [link]
• Existing patterns: [Figma component library link]
• Competitor examples: [links if relevant]