Agent skill · design visual · aiskillstore
design-to-code
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.
Why this skill is useful
Adds a robust helper script that automates the conversion of Figma designs to production-ready React components, significantly enhancing the AI's capabilities.
What it needs
Requires node installed locally. Requires figma account access. About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 Step 0.1: Initialize Helper Script User Action: Run these commands to create the execution helper and isolate its dependencies. 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 Verify: process/thumbnail.png should exist. Step 1.2: Generate Structure 1. Generate Prompt: 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: Step 1.3: Extract Props (Iterative) 1. List Components: 2. For EACH component in the list: a. Generate Prompt: 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: --- Phase 2: Code Generation Step 2.1: Plan 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: 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/design-to-code