Design to code

Skill aiskillstore/marketplace/skills/migoxlab/design-to-code

Security-audited skills for Claude, Codex & Claude Code. One-click install, quality verified.

Install

npx -y skills add aiskillstore/marketplace --skill design-to-code

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

Pixel-perfect Figma to React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. Features robust error handling, checkpoint recovery, and streamlined execution via helper script.

SKILL.md

4.9 KB, ~1.2k tokens by cl100k_base, as published. Nobody here has run it

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):