design-to-code

# 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 ``` --- # Phase 0: Setup ## Step 0.1: Initialize Helper Script **User Action**: Run these commands to create the execution helper and isolate its dependencies. ```bash 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: 1. Run: `node scripts/coderio-skill.mjs scaffold-prompt "MyApp"` 2. **AI Task**: Follow the instructions output by the command to create files. --- # Phase 1: Protocol Generation ## Step 1.1: Fetch Data ```bash # 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 1. **Generate Prompt**: ```bash node scripts/coderio-skill.mjs structure-prompt > scripts/structure-prompt.md ``` 2. **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`. 3. **Process Result**: ```bash node scripts/coderio-skill.mjs save-structure ``` ## Step 1.3: Extract Props (Iterative) 1. **List Components**: ```bash node scripts/coderio-skill.mjs list-components ``` 2. **For EACH component in the list**: a. **Generate Prompt**: ```bash 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**: ```bash 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 ```bash 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)**: 1. **Generate Prompt**: ```bash node scripts/coderio-skill.mjs code-prompt 0 > scripts/code-prompt.md # Replace '0' with current task index ``` 2. **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`. 3. **Save Code**: ```bash 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. --- > Converted and distributed by [TomeVault](https://tomevault.io) | [Claim this content](https://tomevault.io/claim/davila7/claude-code-templates) <!-- tomevault:2.0:skill_md:2026-04-05 -->