Skip to content

CodeRio v1.0.0

Choose a tag to compare

View all tags
@zhangmingemma zhangmingemma released this 04 Feb 12:29
· 4 commits to main since this release
v1.0.0
2d7a4ab
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

v1.0.0 - Initial Public Release

🎉 We are excited to announce the first major release of CodeRio!

CodeRio is an intelligent Design-to-Code automation tool that transforms designs into production-ready React code with high visual fidelity. Unlike traditional converters, CodeRio employs a multi-agent system that validates visual accuracy and iteratively refines misalignments to ensure pixel-perfect results.

✨ Key Features

🤖 Intelligent Design-to-Code

  • Multi-Agent Architecture: Autonomous agents collaborate to handle layout analysis, code generation, and refinement.
  • Modern Tech Stack: Generates clean, maintainable code using React, TypeScript, and Tailwind CSS.
  • Scientific Layouts: Prioritizes Flexbox/Grid over absolute positioning for robust responsiveness.

👁️ Visual Validation & Auto-Correction

  • Pixel-Perfect Accuracy: Built-in computer vision capabilities measure element positioning and visual fidelity.
  • Interactive Reports: Generates detailed HTML reports with heatmaps, overlays, and component-level accuracy metrics.
  • Self-Healing Loop: Automatically detects discrepancies and refines the code to match the original design.

🛠️ Robust Developer Workflow

  • Powerful CLI: Full suite of commands (d2c, d2p, val) for flexible integration.
  • Checkpoint & Resume: State preservation allows you to recover gracefully from network interruptions.
  • Skill Mode: Seamless integration as a "Skill" for AI coding assistants like Cursor.

🚀 Usage

CodeRio offers two powerful ways to integrate into your workflow:

Mode 1: CLI (Command Line Interface)

Best for automated pipelines and one-click generation.

# 1. Install globally
npm install -g coderio

# 2. Convert Figma design to code (Full Mode with validation)
coderio d2c -s "https://www.figma.com/design/..." --mode full

Mode 2: Agent Skill (Cursor / Claude)

Best for interactive development and granular control within your IDE.

  1. Install Skill: Copy the provided SKILL.md to your Cursor/Agent configuration.
  2. Prompt: Simply ask your AI assistant:

    "Use design-to-code skill to convert this Figma URL: [URL]"

  3. Interact: The agent will guide you step-by-step, allowing for customizations during the process.

🔗 Links

Thank you to all the contributors who helped make this release possible! ❤️

Assets 2
Loading