| name | design-to-code |
| description | Pixel-perfect Figma to React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. Features robust error handling, checkpoint recovery, and streamlined execution via helper script. |
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
- Figma API Token: Get from Figma → Settings → Personal Access Tokens
- Node.js: Version 18+
- 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
Phase 0: Setup
Step 0.1: Initialize Helper Script
User Action: Run these commands to create the execution helper and isolate its dependencies.
mkdir -p scripts
cp skills/design-to-code/scripts/package.json scripts/package.json
cp skills/design-to-code/scripts/coderio-skill.mjs scripts/coderio-skill.mjs
cd scripts && pnpm install && cd ..
Step 0.2: Scaffold Project (Optional)
If starting a new project:
- Run:
node scripts/coderio-skill.mjs scaffold-prompt "MyApp"
- AI Task: Follow the instructions output by the command to create files.
Phase 1: Protocol Generation
Step 1.1: Fetch Data
node scripts/coderio-skill.mjs fetch-figma "https://figma.com/file/..." "figd_..."
Verify: process/thumbnail.png should exist.
Step 1.2: Generate Structure
-
Generate Prompt:
node scripts/coderio-skill.mjs structure-prompt > scripts/structure-prompt.md
-
AI Task (Structure):
- ATTACH:
process/thumbnail.png (MANDATORY)
- READ:
scripts/structure-prompt.md
- INSTRUCTION: "Generate the component structure JSON based on the prompt and the attached thumbnail. Focus on visual grouping. Use text content to name components accurately (e.g. 'SafeProducts', not 'FAQ')."
- SAVE: Paste the JSON result into
scripts/structure-output.json.
-
Process Result:
node scripts/coderio-skill.mjs save-structure
Step 1.3: Extract Props (Iterative)
-
List Components:
node scripts/coderio-skill.mjs list-components
-
For EACH component in the list:
a. Generate Prompt:
node scripts/coderio-skill.mjs props-prompt "ComponentName" > scripts/current-props-prompt.md
b. AI Task (Props):
- ATTACH:
process/thumbnail.png (MANDATORY)
- READ:
scripts/current-props-prompt.md
- INSTRUCTION: "Extract props and state data. Be pixel-perfect with text and image paths."
- SAVE: Paste the JSON result into
scripts/ComponentName-props.json.
c. Save & Validate:
node scripts/coderio-skill.mjs save-props "ComponentName"
Phase 2: Code Generation
Step 2.1: Plan Tasks
node scripts/coderio-skill.mjs list-gen-tasks
This outputs a list of tasks with indices (0, 1, 2...).
Step 2.2: Generate Components (Iterative)
For EACH task index (starting from 0):
-
Generate Prompt:
node scripts/coderio-skill.mjs code-prompt 0 > scripts/code-prompt.md
-
AI Task (Code):
- ATTACH:
process/thumbnail.png (MANDATORY)
- READ:
scripts/code-prompt.md
- INSTRUCTION: "Generate the React component code. Match the thumbnail EXACTLY. Use STRICT text content from input data, do not hallucinate."
- SAVE: Paste the code block into
scripts/code-output.txt.
-
Save Code:
node scripts/coderio-skill.mjs save-code 0
Step 2.3: Final Integration
Inject the root component into App.tsx. Use the path found in the last task of Phase 2.1.
Troubleshooting
- "Props validation failed": The AI generated empty props. Check if
process/thumbnail.png was attached and visible to the AI. Retry the props generation step.
- "Module not found": Ensure
node scripts/coderio-skill.mjs save-code was run for the child component before the parent component. Phase 2 must be done in order (0, 1, 2...).
- "Visuals don't match": Did you attach the thumbnail? The AI relies on it for spacing and layout nuances not present in the raw data.