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 s...