Design · phase

Phase 1: Empathize

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

/design-empathize <component-name>

Figma

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

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

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 .singularskills/design/<component-name>/01-empathize.md

Output

Creates .singularskills/design/<component-name>/01-empathize.md containing:

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

Next Phase

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

Design Domain Overview

A five-phase design thinking process for building UI components with AI coding assistants.

Phase 2: Define

Create a component contract with specifications and constraints.