서우 AgentOffice
← 라이브러리
design-to-code

디자인 To 코드

원문: 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.

무엇을 하나요

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

실행 시 본인 API 키(BYOK)로 동작하며, 모델 비용은 사용자 계정에서 직접 결제됩니다.