Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
davila7 avatar

Design To Code

  • 134 installs
  • 30.1k repo stars
  • Updated August 4, 2026
  • davila7/claude-code-templates

Translate Figma or mockup specs into responsive, accessible frontend components that match spacing, typography, color tokens, and interaction states.

About

Design-to-code skill guides Claude to convert visual designs into clean frontend implementations: map frames to components, honor design tokens, preserve UX states, and deliver accessible responsive UI for web or hybrid product surfaces.

  • Token-aligned spacing and typography
  • Component breakdown from mockups
  • Responsive and accessible markup
  • State variants and hover/focus styles
  • Design-system consistent naming

Design To Code by the numbers

  • 134 all-time installs (skills.sh)
  • Ranked #1,040 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/davila7/claude-code-templates --skill design-to-code

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs134
repo stars30.1k
Last updatedAugust 4, 2026
Repositorydavila7/claude-code-templates

What it does

Translate Figma or mockup specs into responsive, accessible frontend components that match spacing, typography, color tokens, and interaction states.

Files

SKILL.mdMarkdownGitHub ↗

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.

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

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

    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:

    node scripts/coderio-skill.mjs save-structure

Step 1.3: Extract Props (Iterative)

1. List Components:

    node scripts/coderio-skill.mjs list-components

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

1. Generate Prompt:

    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:

    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.

Related skills

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.