feat: add docker support

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,87 @@ 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/))
+
+#### 2. Installation
+
+```bash
+docker pull crpi-p4hwwrt00km3axuk.cn-shanghai.personal.cr.aliyuncs.com/coderio/coderio:v1.0.0
+```
+
+#### 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:v1.0.0 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.