Phase 1: Empathize

Purpose

The empathize phase researches the problem space before any design work begins. It gathers user needs, existing patterns, accessibility requirements, and contextual constraints.

Usage

/design:empathize <component-name>

Example:

/design:empathize button

What It Does

1. Researches common patterns for the component type
2. Uses figma_get_design_system and figma_get_components to research existing patterns in the Figma file
3. Identifies user needs and use cases
4. Reviews accessibility requirements (WCAG criteria)
5. Documents existing implementations and prior art
6. Writes findings to .metapowers/design/<component-name>/empathize-brief.md

Output

Creates .metapowers/design/<component-name>/empathize-brief.md containing:

• User needs and pain points
• Existing pattern analysis
• Accessibility considerations
• Contextual constraints
• Recommended approach

MCP Tools Used

• figma_get_design_system — Fetch the full design system (styles, components, tokens)
• figma_get_component — Retrieve a specific component by name or key
• figma_get_component_for_dev — Get component details optimized for developer handoff
• figma_export_image — Export a node as PNG, SVG, or PDF
• figma_a11y_contrast_check — Check color contrast ratios against WCAG thresholds

Next Phase

After empathize, proceed to Define to create the component contract.