Purpose

The define phase synthesizes empathize research into a concrete component contract — a specification document that drives all subsequent design and implementation.

Usage

/design:define <component-name>

Prerequisites

Requires .metapowers/design/<component-name>/empathize-brief.md from Phase 1. A soft gate warns if this file is missing.

What It Does

Reads the empathize brief
Reads the design system via figma_get_design_system and figma_get_variables
Defines variants, states, props, and constraints
Specifies accessibility requirements
Writes to .metapowers/design/<component-name>/component-contract.md

Output

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

Component name and purpose
Variants and states
Props/API surface
Accessibility requirements (from WCAG criteria)
Visual specifications
Interaction patterns

Hard Gate

The define phase output is a hard gate for prototyping — the Figma MCP write hook (check-define-exists.sh) blocks writing to Figma until a component contract exists.

MCP Tools Used

figma_get_design_system — Fetch the full design system (styles, components, tokens)
figma_get_variables — Retrieve design variables and their values

Next Phase

After define, proceed to Ideate to explore design approaches.

Phase 2: Define