Design To Code

Turns Figma designs into production React components with TypeScript, Vite, and Tailwind v4. Built around a helper script that walks you through three phases: setup, protocol generation where you extract structure and props with AI assistance, then iterative code generation. The workflow is prescriptive but thorough, with checkpoint recovery if something breaks. You'll be attaching thumbnails and copying JSON outputs repeatedly, so it's more of a guided assembly line than magic automation. Works well if you need pixel-perfect fidelity and don't mind the structured back-and-forth. Best for converting complete designs rather than quick UI snippets.

skills.sh installs: 135
GitHub stars: 33.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --skill design-to-code --agent claude-code

Installs into .claude/skills of the current project.

Files

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

SKILL.md on GitHub