coderio 0.1.2-alpha.1 → 1.0.0

package/README.md

@@ -6,7 +6,7 @@ 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: [WeChat Group](https://aicarrier.feishu.cn/docx/KTZCddG2VoarFExTqBEcS55QnRd) | <a href="mailto:coderio&#64;pjlab&#46;org&#46;cn">Email</a>
+💬 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)
 
@@ -32,7 +32,7 @@ AI-Powered Design-to-Code Tool with High-Fidelity UI Restoration
 
 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**.
 
-![How CodeRio works](./docs/framework.gif)
+https://github.com/user-attachments/assets/a0bc1b1c-6aaa-4fbb-a2d8-18aeba70759b
 
 **Perfect for:**
 
@@ -42,11 +42,19 @@ CodeRio is an intelligent **Figma-to-Code** automation tool that transforms desi
 
 ## ✨ Examples
 
-### Case: Landing Page (CLI with --mode full) 
+### Case: CLI with --mode full
 
-This example demonstrates a landing page converted from Figma. It includes a header, main content area, and footer, showcasing CodeRio's ability to handle complex layouts and component structures.
+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)).
 
-[View Validation Report](https://htmlpreview.github.io/?https://github.com/MigoXLab/coderio/blob/main/examples/case1/report.html)
+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/a66dc680-f68d-4121-b416-aa6b778bd895
 
 ## 🚀 Quick Start
 

package/dist/cli.js

@@ -475,7 +475,7 @@ var AGENT_CONTEXT_WINDOW_TOKENS = 128e3;
 
 // src/cli/init.ts
 function registerCommands(program) {
-  const version = false ? "0.0.1" : "0.1.2-alpha.1";
+  const version = false ? "0.0.1" : "1.0.0";
   program.name(CLI_NAME).description(`${CLI_NAME} - Convert Figma designs to code`).version(version, "-v, -V, --version", "Output the version number").showHelpAfterError();
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "coderio",
-    "version": "0.1.2-alpha.1",
+    "version": "1.0.0",
     "description": "A modern CLI development tool built with TypeScript",
     "type": "module",
     "bin": {