Design Domain Overview

The design domain follows design thinking in five phases: empathize, define, ideate, prototype and test. You run one slash command per phase for each component. Each phase writes a numbered artifact to .singularskills/design/<project>/, from 01-empathize.md to 05-test.md. The prototype phase builds the component in Figma through a Figma MCP server.

The Five Phases

Artifact Flow

Each phase reads from previous phases and writes to .singularskills/design/<component-name>/:

.singularskills/design/button/
  01-empathize.md   ← Phase 1 output
  02-define.md      ← Phase 2 output (the component contract)
  03-ideate.md      ← Phase 3 output
  04-prototype.md   ← Phase 4 output
  05-test.md        ← Phase 5 output

Run the whole sequence with /workflow design button: the conductor runs one phase at a time and stops for your approval at each boundary (see Workflows).

Quality Gates

Phases 2 to 5 each ship a gate script, scripts/gate.sh, which the skill runs before it writes. If a required earlier artifact is missing (for example 02-define.md before ideation), the skill stops and tells you which phase to run. In Claude Code, the plugin's gate hook runs the same check before any write into .singularskills/.

Pass --skip-checks to go ahead anyway. The skill first records a skipped event in .singularskills/log.jsonl, so a bypass is never silent.

Figma MCP Server

Nine design skills (empathize, define, ideate, prototype, test, export tokens, accessibility audit, design review and system overview) have Figma steps: they read the design system from Figma, and the prototype phase writes the component to your canvas. These steps call figma_* tools from a Figma MCP server, which you configure in your agent yourself; the pack ships no MCP server and makes no network calls.

Skills in this domain