Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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.
.claude/skills/kunanonj-design-to-code/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | -30% | 0% |
| case-04 | ✗→✓ | ▲ Improved | 25% | 0% |
| case-06 | ✗→✓ | ▲ Improved | 6% | 0% |
| case-08 | ✗→✓ | ▲ Improved | 11% | 0% |
| case-09 | ✗→✓ | ▲ Improved | -3% | 0% |
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.
scripts/ folder (handled by Setup phase)Phase 0: SETUP → Create helper script and script environment
Phase 1: PROTOCOL → Generate design protocol (Structure & Props)
Phase 2: CODE → Generate components and assetsUser Action: Run these commands to create the execution helper and isolate its dependencies.
bashmkdir -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 ..
If starting a new project:
node scripts/coderio-skill.mjs scaffold-prompt "MyApp"bash# Replace with your URL and Token node scripts/coderio-skill.mjs fetch-figma "https://figma.com/file/..." "figd_..."
Verify: process/thumbnail.png should exist.
bash node scripts/coderio-skill.mjs structure-prompt > scripts/structure-prompt.md
process/thumbnail.png (MANDATORY)scripts/structure-prompt.mdscripts/structure-output.json.bash node scripts/coderio-skill.mjs save-structure
bash node scripts/coderio-skill.mjs list-components
a. Generate Prompt:
bash node scripts/coderio-skill.mjs props-prompt "ComponentName" > scripts/current-props-prompt.md
b. AI Task (Props):
process/thumbnail.png (MANDATORY)scripts/current-props-prompt.mdscripts/ComponentName-props.json.c. Save & Validate:
bash node scripts/coderio-skill.mjs save-props "ComponentName" # If this fails, re-do step 'b' with better attention to the thumbnail
bashnode scripts/coderio-skill.mjs list-gen-tasks
This outputs a list of tasks with indices (0, 1, 2...).
For EACH task index (starting from 0):
bash node scripts/coderio-skill.mjs code-prompt 0 > scripts/code-prompt.md # Replace '0' with current task index
process/thumbnail.png (MANDATORY)scripts/code-prompt.mdscripts/code-output.txt.bash node scripts/coderio-skill.mjs save-code 0 # Replace '0' with current task index
Inject the root component into App.tsx. Use the path found in the last task of Phase 2.1.
process/thumbnail.png was attached and visible to the AI. Retry the props generation step.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...).| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→pass | 15,126 | 4,786 | -68% | 1 | 1 | 0% | 3,264 | 2,276 | -30% | 0 | 0 | — |
case-02 | fail→fail | 2,971 | 4,013 | +35% | 1 | 1 | 0% | 541 | 1,789 | +231% | 0 | 0 | — |
case-03 | fail→fail | 24,789 | 3,400 | -86% | 1 | 1 | 0% | 5,407 | 2,027 | -63% | 0 | 0 | — |
case-04 | fail→pass | 8,614 | 2,620 | -70% | 1 | 1 | 0% | 1,526 | 1,908 | +25% | 0 | 0 | — |
case-05 | pass→pass | 4,599 | 2,684 | -42% | 1 | 1 | 0% | 785 | 1,760 | +124% | 0 | 0 | — |
case-06 | fail→pass | 8,963 | 2,220 | -75% | 1 | 1 | 0% | 1,545 | 1,633 | +6% | 0 | 0 | — |
case-07 | fail→fail | 7,049 | 1,853 | -74% | 1 | 1 | 0% | 1,195 | 1,601 | +34% | 0 | 0 | — |
case-08 | fail→pass | 10,755 | 4,208 | -61% | 1 | 1 | 0% | 1,891 | 2,094 | +11% | 0 | 0 | — |
case-09 | fail→pass | 9,828 | 1,743 | -82% | 1 | 1 | 0% | 1,606 | 1,557 | -3% | 0 | 0 | — |
case-10 | fail→fail | 11,167 | 2,036 | -82% | 1 | 1 | 0% | 1,981 | 1,574 | -21% | 0 | 0 | — |
case-11 | fail→pass | 7,037 | 3,434 | -51% | 1 | 1 | 0% | 1,176 | 1,986 | +69% | 0 | 0 | — |
case-12 | fail→fail | 25,997 | 2,341 | -91% | 1 | 1 | 0% | 4,415 | 1,711 | -61% | 0 | 0 | — |
case-13 | fail→pass | 7,430 | 2,634 | -65% | 1 | 1 | 0% | 1,275 | 1,741 | +37% | 0 | 0 | — |
case-14 | pass→pass | 5,017 | 3,412 | -32% | 1 | 1 | 0% | 812 | 1,871 | +130% | 0 | 0 | — |
case-15 | fail→fail | 8,238 | 1,880 | -77% | 1 | 1 | 0% | 1,492 | 1,490 | -0% | 0 | 0 | — |
case-16 | fail→pass | 8,048 | 2,084 | -74% | 1 | 1 | 0% | 1,271 | 1,671 | +31% | 0 | 0 | — |
case-17 | pass→pass | 14,731 | 7,919 | -46% | 1 | 1 | 0% | 2,621 | 2,706 | +3% | 0 | 0 | — |
case-18 | fail→pass | 14,149 | 1,987 | -86% | 1 | 1 | 0% | 2,440 | 1,590 | -35% | 0 | 0 | — |
case-19 | fail→pass | 7,017 | 1,468 | -79% | 1 | 1 | 0% | 1,254 | 1,551 | +24% | 0 | 0 | — |
case-20 | pass→pass | 2,549 | 2,202 | -14% | 1 | 1 | 0% | 465 | 1,743 | +275% | 0 | 0 | — |
case-21 | fail→pass | 11,047 | 5,272 | -52% | 1 | 1 | 0% | 2,018 | 2,327 | +15% | 0 | 0 | — |
case-22 | pass→pass | 2,660 | 2,331 | -12% | 1 | 1 | 0% | 460 | 1,693 | +268% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +50 percentage points is the difference between those two pass rates over the 22 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.