- 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
1. Copy script files
Note: Ensure you have the 'skills/design-to-code/scripts' directory available
cp skills/design-to-code/scripts/package.json scripts/package.json cp skills/design-to-code/scripts/coderio-skill.mjs scripts/coderio-skill.mjs
2. Install coderio in scripts directory (adjust version if needed)
- 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
Replace with your URL and Token
- 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"
If this fails, re-do step 'b' with better attention to the thumbnail
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
Replace '0' with current task index
- 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
Replace '0' with current task index
- 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.