Design · phase

Phase 2: Define

Create a component contract with specifications and constraints.

/design-define-component <component-name>

Figma

Figma steps require a Figma MCP server; see the design workflow page.

Purpose

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

Prerequisites

Requires .singularskills/design/<component-name>/01-empathize.md from Phase 1. Its gate script (scripts/gate.sh) stops the skill if it is missing; --skip-checks bypasses it after logging a skipped event to .singularskills/log.jsonl.

What It Does

  1. Reads the empathize brief
  2. Reads the design system via figma_get_design_system and figma_get_variables
  3. Defines variants, states, props, and constraints
  4. Specifies accessibility requirements
  5. Writes to .singularskills/design/<component-name>/02-define.md

Output

Creates .singularskills/design/<component-name>/02-define.md (the component contract) containing:

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

Gate

The define phase output, 02-define.md, is required by the ideate and prototype phases: their gates refuse to run until it exists.

Next Phase

NextIdeate
After define, proceed to Ideate to explore design approaches.

Phase 1: Empathize

Research user needs, context, and existing patterns for your component.

Phase 3: Ideate

Explore multiple design approaches for your component.