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.
Target: Design & content creation. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- Design to Code
- Prerequisites
- Workflow Overview
- Phase 0: Setup
- Step 0.1: Initialize Helper Script
- Step 0.2: Scaffold Project (Optional)
- Phase 1: Protocol Generation
- Step 1.1: Fetch Data
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. 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) -- User Action: Run these commands to create the execution helper and isolate its dependencies. 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. -- Verify: process/thumbnail.png should exist. 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: 1. List Components: 2. For EACH component in the list: a. Generate Prompt: b. AI Task (Props): ATTACH: process/thumbnail.p
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- davila7/claude-code-templates
- Source file
- cli-tool/components/skills/design-to-code/SKILL.md
- Fixed revision
- 21be197f100a12b8d0dd9a211cc244c8179f84d3
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: davila7/claude-code-templates · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-09T14:01:44.000Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.