Phase 4: Prototype

Purpose

The prototype phase takes the chosen design from ideation and builds it as a Figma component using the Figma MCP server.

Prerequisites

• .singularskills/design/<component-name>/02-define.md (the component contract, from Phase 2)
• .singularskills/design/<component-name>/03-ideate.md (the chosen approach, from Phase 3)

Its gate script (scripts/gate.sh) stops the skill if either file is missing; --skip-checks bypasses it after logging a skipped event to .singularskills/log.jsonl. In Claude Code the gate hook enforces the same check on the write.

• A Figma MCP server configured in your agent (see the design workflow page)

What It Does

1. 01

   Reads the component contract and chosen ideation option
2. 02

   Creates the component structure with figma_create_component and figma_create_frame
3. 03

   Adds text layers with figma_create_text and shapes with figma_create_shape
4. 04

   Configures layout with figma_set_auto_layout and applies styles with figma_apply_styles
5. 05

   Arranges variant sets with figma_arrange_component_set
6. 06

   Exports preview images with figma_export_image
7. 07

   Writes notes to .singularskills/design/<component-name>/04-prototype.md

Figma MCP Integration

The prototype phase writes to your Figma canvas through the figma_* tools of a Figma MCP server you configure in your agent. Its gate checks that the component contract (02-define.md) and the ideation (03-ideate.md) exist before it writes.

Output

Next Phase