coderio 1.0.1-alpha.2 → 1.0.1

package/README.md

@@ -54,12 +54,12 @@ https://github.com/user-attachments/assets/bd0c3f18-e98a-4050-bf22-46b198fadac2
 
 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
@@ -79,34 +79,62 @@ npm install -g coderio
 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 for pnpm v9+ users**: If you see a warning about "Ignored build scripts", run:
+>
+> ```bash
+> pnpm approve-builds
+> ```
+>
+> This allows 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`).
+> **Important**: This tool requires an LLM with **multimodal (vision) capabilities** to analyze design screenshots.
+> We highly recommend using **`gemini-3-pro-preview`** for the best balance of performance and cost.
 
-Create config file at `~/.coderio/config.yaml` (Windows: `%USERPROFILE%\.coderio\config.yaml`):
+Create `~/.coderio/config.yaml` (Windows: `%USERPROFILE%\.coderio\config.yaml`) with:
 
 ```yaml
 model:
-    provider: openai # anthropic | openai | google
-    model: gemini-3-pro-preview
-    baseUrl: https://api.anthropic.com
-    apiKey: your-api-key-here
+  provider: openai          # anthropic | openai | google
+  model: gemini-3-pro-preview
+  baseUrl: https://api.anthropic.com
+  apiKey: your-api-key-here
+
+figma:
+  token: your-figma-token-here
+
+debug:
+  enabled: false
+```
+
+<details>
+<summary><strong>macOS / Linux One-click Command</strong></summary>
+
+```bash
+mkdir -p ~/.coderio
+cat > ~/.coderio/config.yaml << 'EOF'
+model:
+  provider: openai          # anthropic | openai | google
+  model: gemini-3-pro-preview
+  baseUrl: https://api.anthropic.com
+  apiKey: your-api-key-here
 
 figma:
-    token: your-figma-token-here
+  token: your-figma-token-here
 
 debug:
-    enabled: false # set 'true', if you want to save model and request information
+  enabled: false
+EOF
 ```
+</details>
 
 #### 4. Usage
 
@@ -135,7 +163,10 @@ pnpm dev
 
 #### 6. View Validation Report
 
-report path: coderio/<design-name_node-id>/process/validation/index.html
+```bash
+# Open validation report in browser
+open coderio/<design-name_node-id>/process/validation/index.html
+```
 
 #### 📖 All Commands
 
@@ -148,22 +179,21 @@ report path: coderio/<design-name_node-id>/process/validation/index.html
 | `images`          | -     | Download and process Figma assets                   |
 
 ### Option 2: Skill (Portable Embedded Workflow)
-
 Best for control and precision using AI Agents.
 
 **Prerequisites**:
 Copy the Skill file to your Cursor configuration directory:
-
-Copy `skills\design-to-code` folder to `~\.cursor\skills` (Windows: `%USERPROFILE%\.cursor\skills`)
+```bash
+mkdir -p ~/.cursor/skills/design-to-code
+cp docs/skills/SKILL.md ~/.cursor/skills/design-to-code/SKILL.md
+```
 
 **Using in Cursor**:
-
-1. Open Cursor Chat.
+1. Open Cursor Chat (`Cmd` + `L`).
 2. Type: **"Use design-to-code skill to convert this design: [Your Figma URL]"**
 3. The Agent will guide you step-by-step through protocol extraction and code generation.
 
 **Using in Claude Code**:
-
 1. Start Claude Code.
 2. Type: **"Read docs/skills/SKILL.md and perform design conversion: [Your Figma URL]"**
 

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" : "1.0.1-alpha.2";
+  const version = false ? "0.0.1" : "1.0.1";
   program.name(CLI_NAME).description(`${CLI_NAME} - Convert Figma designs to code`).version(version, "-v, -V, --version", "Output the version number").showHelpAfterError();
 }
 
@@ -594,17 +594,12 @@ var Workspace = class {
   }
   /**
    * Delete all files and directories inside the workspace
-   * @param workspace - The workspace structure
-   * @param exclude - Optional list of file/directory names to exclude from deletion
    */
-  deleteWorkspace(workspace, exclude = []) {
+  deleteWorkspace(workspace) {
     try {
       if (fs2.existsSync(workspace.root)) {
         const entries = fs2.readdirSync(workspace.root);
         for (const entry of entries) {
-          if (exclude.includes(entry)) {
-            continue;
-          }
           const fullPath = path2.join(workspace.root, entry);
           fs2.rmSync(fullPath, { recursive: true, force: true });
         }
@@ -658,7 +653,7 @@ function saveDebugLog(requestInfo, responseInfo) {
     "------------response------------",
     JSON.stringify(responseInfo, null, 2)
   ].join("\n");
-  writeFile(workspaceManager.path?.debug ?? "", `fetch_${(/* @__PURE__ */ new Date()).toISOString().replace(/:/g, "-")}.md`, debugContent);
+  writeFile(workspaceManager.path?.debug ?? "", `fetch_${(/* @__PURE__ */ new Date()).toISOString()}.md`, debugContent);
 }
 async function get(url, config) {
   const response = await axios.get(url, config);
@@ -1558,7 +1553,7 @@ async function callModel(options) {
         "------------response------------",
         JSON.stringify(message.text, null, 2)
       ].join("\n");
-      writeFile(workspaceManager.path?.debug ?? "", `model_${(/* @__PURE__ */ new Date()).toISOString().replace(/:/g, "-")}.md`, debugContent);
+      writeFile(workspaceManager.path?.debug ?? "", `model_${(/* @__PURE__ */ new Date()).toISOString()}.md`, debugContent);
     }
     return message.text;
   } catch (error) {
@@ -2017,7 +2012,7 @@ var parseFigmaUrl = (url) => {
   if (!fileId || !nodeId) {
     throw new Error("Invalid Figma URL");
   }
-  return { fileId, name, nodeId, projectName: `${name}_${nodeId.replace(/:/g, "_")}` };
+  return { fileId, name, nodeId, projectName: `${name}_${nodeId}` };
 };
 
 // src/cli/d2p.ts
@@ -6338,14 +6333,6 @@ async function checkpointExists(checkpointer, threadId) {
     return false;
   }
 }
-async function clearCheckpoint(checkpointer, threadId) {
-  try {
-    await checkpointer.deleteThread(threadId);
-  } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : String(error);
-    logger.printWarnLog(`Failed to clear checkpoint: ${errorMessage}`);
-  }
-}
 async function promptCheckpointChoice(checkpointer, threadId) {
   const hasCheckpoint = await checkpointExists(checkpointer, threadId);
   if (!hasCheckpoint) {
@@ -6354,9 +6341,6 @@ async function promptCheckpointChoice(checkpointer, threadId) {
   const choice = await promptUserChoice();
   return choice === "resume";
 }
-async function clearThreadCheckpoint(checkpointer, threadId) {
-  await clearCheckpoint(checkpointer, threadId);
-}
 function initializeSqliteSaver(dbPath) {
   const dbDir = path14.dirname(dbPath);
   if (!fs11.existsSync(dbDir)) {
@@ -6372,13 +6356,13 @@ async function design2code(url, mode) {
   const urlInfo = parseFigmaUrl(url);
   const threadId = urlInfo.projectName;
   const workspace = workspaceManager.initWorkspace(threadId);
-  const checkpointer = initializeSqliteSaver(workspace.db);
+  let checkpointer = initializeSqliteSaver(workspace.db);
   const resume = await promptCheckpointChoice(checkpointer, threadId);
   logger.printInfoLog(`Starting design-to-code process for: ${urlInfo.projectName}`);
   if (resume !== true) {
-    workspaceManager.deleteWorkspace(workspace, ["checkpoint"]);
+    workspaceManager.deleteWorkspace(workspace);
     logger.printInfoLog("Starting fresh...");
-    await clearThreadCheckpoint(checkpointer, threadId);
+    checkpointer = initializeSqliteSaver(workspace.db);
   } else {
     logger.printInfoLog("Resuming from cache...");
   }