feat: add docker support (#59)

Author: uzuku

.dockerignore

@@ -0,0 +1,36 @@
+# Dependencies
+node_modules/
+
+# Build output (will be rebuilt in container)
+dist/
+
+# Git
+.git/
+.gitignore
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Test and coverage
+coverage/
+.nyc_output/
+
+# Logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Environment files
+.env
+.env.*
+
+# Docker
+Dockerfile
+.dockerignore

Dockerfile

@@ -0,0 +1,46 @@
+FROM node:22
+
+WORKDIR /app
+
+RUN apt-get update \
+ && apt-get install -y vim git build-essential \
+ && rm -rf /var/lib/apt/lists/*
+
+# Copy dependency files for version extraction
+COPY package.json pnpm-lock.yaml ./
+
+# Parse peerDependenciesMeta and install corresponding versions
+RUN node -e " \
+  const fs = require('fs'); \
+  const { execSync } = require('child_process'); \
+  const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf8')); \
+  const lock = fs.readFileSync('./pnpm-lock.yaml', 'utf8'); \
+  const peers = Object.keys(pkg.peerDependenciesMeta || {}); \
+  const packages = peers.map(name => { \
+    const regex = new RegExp('[/\\\\s]' + name + '@([0-9.]+)[:\\\\)]'); \
+    const match = lock.match(regex); \
+    if (!match) throw new Error('Version not found in lockfile for: ' + name); \
+    return name + '@' + match[1]; \
+  }); \
+  console.log('Installing peerDependencies:', packages.join(' ')); \
+  if (packages.length > 0) { \
+    execSync('npm install -g ' + packages.join(' '), { stdio: 'inherit' }); \
+  } \
+"
+
+# Set environment variables
+ENV PLAYWRIGHT_BROWSERS_PATH=/opt/playwright-browsers
+ENV NODE_PATH=/usr/local/lib/node_modules
+
+# Install Playwright browsers and system dependencies
+RUN npx playwright install --with-deps chromium \
+ && chmod -R 755 $PLAYWRIGHT_BROWSERS_PATH
+
+RUN npm install -g pnpm
+
+# Install coderio
+RUN npm install -g coderio
+
+
+# Clean up temporary files
+RUN rm -f package.json pnpm-lock.yaml

README.md

@@ -147,7 +147,94 @@ report path: coderio/<design-name_node-id>/process/validation/index.html
 | `validate`        | `val` | Run validation on generated code                    |
 | `images`          | -     | Download and process Figma assets                   |
 
-### Option 2: Skill (Portable Embedded Workflow)
+### Option 2: Docker
+
+Best for portable environments without Node.js installation.
+
+#### 1. Prerequisites
+
+- [Docker](https://docs.docker.com/get-docker/)
+- [Figma Personal Access Token](https://www.figma.com/developers/api#access-tokens)
+- LLM API Key ([Anthropic](https://console.anthropic.com/) | [OpenAI](https://platform.openai.com/) | [Google](https://aistudio.google.com/))
+
+> **For Windows Users:** The commands below use bash syntax (heredoc, `${PWD}`, `--network=host`, etc.) which are not compatible with CMD or PowerShell. Please use **WSL2** to run them:
+>
+> 1. Install [WSL2](https://learn.microsoft.com/en-us/windows/wsl/install) and a Linux distribution (e.g. Ubuntu)
+> 2. Install [Docker Desktop](https://docs.docker.com/desktop/install/windows-install/) and enable **WSL2 integration** in Settings → Resources → WSL Integration
+> 3. Open a WSL2 terminal (run `wsl` in CMD/PowerShell, or open Ubuntu from the Start menu)
+> 4. Run all the following commands inside the WSL2 terminal
+
+#### 2. Installation
+
+```bash
+docker pull crpi-p4hwwrt00km3axuk.cn-shanghai.personal.cr.aliyuncs.com/coderio/coderio
+```
+
+#### 3. Configuration
+
+Create a working directory and `config.yaml`:
+
+```bash
+mkdir -p ./coderio-app && cd ./coderio-app
+cat > 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
+
+debug:
+  enabled: false
+EOF
+```
+
+#### 4. Usage
+
+```bash
+docker run -ti --rm \
+  --network=host \
+  -v ${PWD}:/app \
+  -v ./config.yaml:/root/.coderio/config.yaml \
+  crpi-p4hwwrt00km3axuk.cn-shanghai.personal.cr.aliyuncs.com/coderio/coderio bash
+```
+
+Once inside the container, use CodeRio commands:
+
+```bash
+# Convert Figma design to code (default mode: code only)
+coderio d2c -s 'https://www.figma.com/design/your-file-id/...'
+
+# Full mode: Generate code + visual validation + auto-refinement
+coderio d2c -s 'https://www.figma.com/design/your-file-id/...' -m full
+```
+
+#### 5. Run Your Project
+
+```bash
+# Navigate to generated project
+cd coderio/<design-name_node-id>/my-app
+
+# Install dependencies
+pnpm install
+
+# Start dev server
+pnpm dev
+
+# 🎉 Open http://localhost:5173
+```
+
+#### 6. View Validation Report
+
+Generated files are mounted to your host machine. Open the validation report in your browser:
+
+```
+./coderio/<design-name_node-id>/process/validation/index.html
+```
+
+### Option 3: Skill (Portable Embedded Workflow)
 
 Best for control and precision using AI Agents.
 

README_zh-CN.md

@@ -146,7 +146,94 @@ pnpm dev
 | `validate`        | `val` | 对生成的代码运行验证                 |
 | `images`          | -     | 下载和处理 Figma 资源                |
 
-### 方式 2：Skill（便携式嵌入工作流）
+### 方式 2：Docker
+
+基于 Docker 提供了完整运行时环境，适用于未安装 Node.js 的场景。
+
+#### 1. 前置要求
+
+- [Docker](https://docs.docker.com/get-docker/)
+- [Figma 个人访问令牌](https://www.figma.com/developers/api#access-tokens)
+- LLM API 密钥（[Anthropic](https://console.anthropic.com/) | [OpenAI](https://platform.openai.com/) | [Google](https://aistudio.google.com/)）
+
+> **Windows 用户指南：** 以下命令使用了 bash 语法（heredoc、`${PWD}`、`--network=host` 等），无法在 CMD 或 PowerShell 中直接运行。请通过 **WSL2** 执行：
+>
+> 1. 安装 [WSL2](https://learn.microsoft.com/zh-cn/windows/wsl/install) 和 Linux 发行版（如 Ubuntu）
+> 2. 安装 [Docker Desktop](https://docs.docker.com/desktop/install/windows-install/)，并在 Settings → Resources → WSL Integration 中开启 **WSL2 集成**
+> 3. 打开 WSL2 终端（在 CMD/PowerShell 中运行 `wsl`，或从开始菜单打开 Ubuntu）
+> 4. 在 WSL2 终端中执行以下所有命令
+
+#### 2. 安装
+
+```bash
+docker pull crpi-p4hwwrt00km3axuk.cn-shanghai.personal.cr.aliyuncs.com/coderio/coderio
+```
+
+#### 3. 配置
+
+创建工作目录和 `config.yaml` 配置文件：
+
+```bash
+mkdir -p ./coderio-app && cd ./coderio-app
+cat > 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
+
+debug:
+  enabled: false
+EOF
+```
+
+#### 4. 使用
+
+```bash
+docker run -ti --rm \
+  --network=host \
+  -v ${PWD}:/app \
+  -v ./config.yaml:/root/.coderio/config.yaml \
+  crpi-p4hwwrt00km3axuk.cn-shanghai.personal.cr.aliyuncs.com/coderio/coderio bash
+```
+
+进入容器后，使用 CodeRio 命令：
+
+```bash
+# 将 Figma 设计转换为代码（默认模式：仅代码）
+coderio d2c -s 'https://www.figma.com/design/your-file-id/...'
+
+# 完整模式：生成代码 + 视觉验证 + 自动优化
+coderio d2c -s 'https://www.figma.com/design/your-file-id/...' -m full
+```
+
+#### 5. 运行项目
+
+```bash
+# 进入生成的项目目录
+cd coderio/<设计文件名-页面节点编号>/my-app
+
+# 安装依赖
+pnpm install
+
+# 启动开发服务器
+pnpm dev
+
+# 🎉 打开 http://localhost:5173
+```
+
+#### 6. 查看验证报告
+
+生成的文件会挂载到宿主机。在浏览器中打开验证报告：
+
+```
+./coderio/<设计文件名-页面节点编号>/process/validation/index.html
+```
+
+### 方式 3：Skill（便携式嵌入工作流）
 
 适用于需要 AI 辅助和更精准控制的场景。