design-to-code

1# Design to Code
2 
3High-fidelity UI restoration from Figma designs to production-ready React + TypeScript components.
4This SKILL uses a **robust helper script** to minimize manual errors and ensure pixel-perfect results.
5 
6## Prerequisites
7 
81.  **Figma API Token**: Get from Figma → Settings → Personal Access Tokens
92.  **Node.js**: Version 18+
103.  **coderio**: Installed in `scripts/` folder (handled by Setup phase)
11 
12## Workflow Overview
13 
14```
15Phase 0: SETUP    → Create helper script and script environment
16Phase 1: PROTOCOL → Generate design protocol (Structure & Props)
17Phase 2: CODE     → Generate components and assets
18```
19 
20---
21 
22# Phase 0: Setup
23 
24## Step 0.1: Initialize Helper Script
25 
26**User Action**: Run these commands to create the execution helper and isolate its dependencies.
27 
28```bash
29mkdir -p scripts
30 
31# 1. Copy script files
32# Note: Ensure you have the 'skills/design-to-code/scripts' directory available
33cp skills/design-to-code/scripts/package.json scripts/package.json
34cp skills/design-to-code/scripts/coderio-skill.mjs scripts/coderio-skill.mjs
35 
36# 2. Install coderio in scripts directory (adjust version if needed)
37cd scripts && pnpm install && cd ..
38```
39 
40## Step 0.2: Scaffold Project (Optional)
41 
42If starting a new project:
43 
441.  Run: `node scripts/coderio-skill.mjs scaffold-prompt "MyApp"`
452.  **AI Task**: Follow the instructions output by the command to create files.
46 
47---
48 
49# Phase 1: Protocol Generation
50 
51## Step 1.1: Fetch Data
52 
53```bash
54# Replace with your URL and Token
55…