Design to Code

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

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)

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

# Replace with your URL and Token
node scripts/coderio-skill.mjs fetch-figma "https://figma.com/file/..." "figd_..."

process/thumbnail.png

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

node scripts/coderio-skill.mjs list-gen-tasks

Step 2.2: Generate Components (Iterative)

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

App.tsx

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.