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 assetsPhase 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.mdb. AI Task (Props): c. Save & Validate:node scripts/coderio-skill.mjs save-props "ComponentName" # If this fails, re-do step 'b' with better attention to the thumbnail
- 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.
Phase 2: Code Generation
Step 2.1: Plan Tasks
node scripts/coderio-skill.mjs list-gen-tasksThis 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.pngwas attached and visible to the AI. Retry the props generation step. - "Module not found": Ensure
node scripts/coderio-skill.mjs save-codewas 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.