Design to Code

High-fidelity UI restoration from Figma designs to production-ready React + TypeScript components. This SKILL uses a robust helper script to minimize manual errors and ensure pixel-perfect results.

Prerequisites

1. Figma API Token: Get from Figma → Settings → Personal Access Tokens
2. Node.js: Version 18+
3. coderio: Installed in scripts/ folder (handled by Setup phase)

Workflow Overview

Phase 0: SETUP    → Create helper script and script environment
Phase 1: PROTOCOL → Generate design protocol (Structure & Props)
Phase 2: CODE     → Generate components and assets