🎨 CodeRio

<div align="center">

# 🎨 CodeRio

AI-Powered Design-to-Code Tool with High-Fidelity UI Restoration

[![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](LICENSE) [![Node Version](https://img.shields.io/badge/node-%3E%3D18.0.0%20%3C23.0.0-brightgreen)](https://nodejs.org/) [![npm version](https://img.shields.io/npm/v/coderio.svg)](https://www.npmjs.com/package/coderio) [![Contributors](https://img.shields.io/github/contributors/MigoXLab/coderio)](https://github.com/MigoXLab/coderio/graphs/contributors)

💬 Contact: <a href="https://aicarrier.feishu.cn/docx/KTZCddG2VoarFExTqBEcS55QnRd" target="_blank">WeChat Group</a> | <a href="mailto:coderio&#64;pjlab&#46;org&#46;cn">Email</a>

[English](README.md) | [简体中文](README_zh-CN.md)

</div>

---

## 📑 Table of Contents

- [What is CodeRio?](#what-is-coderio)
- [Examples](#-examples)
- [Quick Start](#-quick-start)
- [All Commands](#-all-commands)
- [Key Features](#-key-features)
- [How It Works](#-how-it-works)
- [Roadmap](#-roadmap)
- [Contributing](#-contributing)
- [License](#-license)

---

## What is CodeRio?

CodeRio is an intelligent **Figma-to-Code** automation tool that transforms designs into production-ready React code. Unlike traditional converters, CodeRio employs a multi-agent system that validates visual accuracy and iteratively refines misalignments, pursuing high-fidelity UI restoration and **production-ready code structure tailored for developers**.

https://github.com/user-attachments/assets/a0bc1b1c-6aaa-4fbb-a2d8-18aeba70759b

**Perfect for:**

- 🎯 Frontend developers who want accurate design implementation
- 🚀 Teams looking to accelerate development workflows
- 💎 Designers who want their vision precisely realized in code

## ✨ Examples

### Case: CLI with --mode full

After installing CodeRio, you can execute commands directly in the CLI. CodeRio excels at restoring complex landing page styles, handling intricate layouts, identifying and downloading diverse image resources, and encapsulating component structures. By selecting "FULL" mode, a visual fidelity evaluation report is generated upon completion. This report displays deviations between the design and the webpage using both annotation and overlay modes, providing effective guidance for further development by engineers. This example demonstrates a landing page converted from Figma ([Design Link](https://www.figma.com/design/c0UBII8lURfxZIY8W6tSDR/Top-16-Websites-of-2024---Awwwards--Community-?node-id=1-1482&t=FB3Hohq2nsH7ZFts-4)).

https://github.com/user-attachments/assets/bd0c3f18-e98a-4050-bf22-46b198fadac2

<a href="https://static.openxlab.org.cn/coderio/report.html" target="_blank">📊 View Interactive Validation Report</a>

### Case: Development with Cursor Skill

CodeRio can be seamlessly integrated into Cursor as a Skill. Simply input a prompt like **"Create a React project and restore this design with high fidelity,"** along with your output directory, Figma URL([Design Link](https://www.figma.com/design/c0UBII8lURfxZIY8W6tSDR/Top-16-Websites-of-2024---Awwwards--Community-?node-id=30-8264&t=FB3Hohq2nsH7ZFts-4)), and Token. The Agent will guide you step-by-step through the page generation process. For Landing Pages, it achieves **high-fidelity restoration**, accurately reproducing images and styles. It also automatically encapsulates reusable components (such as cards) and strictly adheres to **frontend development best practices**.

https://github.com/user-attachments/assets/43817e97-ffd2-40e3-9d33-78ee55b2ec2d

## 🚀 Quick Start

### Option 1: CLI (Recommended 👍🏻)

Best for one-click generation.

#### 1. Prerequisites

- Node.js >= 18.0.0 (< 25.0.0)
- [Figma Personal Access Token](https://www.figma.com/developers/api#access-tokens)
- **Figma Link**: Select a Frame or Component in Figma, right-click, and choose **Copy link to selection** ([Reference](docs/figma-link.jpg)).
- LLM API Key ([Anthropic](https://console.anthropic.com/) | [OpenAI](https://platform.openai.com/) | [Google](https://aistudio.google.com/))

#### 2. Installation

```bash
# Install globally (recommended)
npm install -g coderio

# Or using pnpm
pnpm add -g coderio
```

> **Note for pnpm v9+ users**: If you see a warning about "Ignored build scripts", run: `pnpm approve-builds` to allow native dependencies (better-sqlite3) to compile properly.
>
> **Note**: Validation features (e.g., `d2c --mode full`) require optional dependencies `playwright` and `sharp`. They are not bundled with coderio by default to keep installation lightweight. Please install them globally beforehand for smoother execution:
>
> ```bash
> npm install -g playwright sharp
> npx playwright install chromium
> ```

#### 3. Configuration

> **Important**: Requires a **multimodal (vision)** model (Recommended: `gemini-3-pro-preview`).

Create config file at `~/.coderio/config.yaml` (Windows: `%USERPROFILE%\.coderio\config.yaml`):

```yaml
model:
    provider: openai # anthropic | openai | google
    model: gemini-3-pro-p

... (truncated)