imugi-ai 1.0.0 → 1.1.0

package/README.md

@@ -1,8 +1,10 @@
 <div align="center">
 
+<img src="https://raw.githubusercontent.com/M00N7682/imugi/main/assets/hero.png" alt="imugi" width="200" />
+
 # imugi
 
-[![npm version](https://img.shields.io/npm/v/imugi?color=cb3837&labelColor=black&style=flat-square)](https://www.npmjs.com/package/imugi)
+[![npm version](https://img.shields.io/npm/v/imugi-ai?color=cb3837&labelColor=black&style=flat-square)](https://www.npmjs.com/package/imugi-ai)
 [![GitHub stars](https://img.shields.io/github/stars/M00N7682/imugi?style=flat-square&color=ffcb47&labelColor=black)](https://github.com/M00N7682/imugi/stargazers)
 [![License: MIT](https://img.shields.io/badge/License-MIT-green?labelColor=black&style=flat-square)](https://opensource.org/licenses/MIT)
 [![Node.js](https://img.shields.io/badge/Node.js-%3E%3D18-339933?labelColor=black&style=flat-square&logo=node.js&logoColor=white)](https://nodejs.org)
@@ -13,6 +15,10 @@
 
 [Get Started](#quick-start) · [MCP Tools](#mcp-tools) · [Configuration](#configuration) · [Contributing](CONTRIBUTING.md)
 
+<br />
+
+<img src="https://raw.githubusercontent.com/M00N7682/imugi/main/assets/demo-visual.png" alt="imugi — Design to Code visual verification flow" width="820" />
+
 </div>
 
 ---
@@ -45,10 +51,13 @@ imugi uses **SSIM** (Structural Similarity) + **pixelmatch** + **Claude Vision**
 
 ## Quick Start
 
-### Step 1: Install
+### Step 1: Install & Setup
 
 ```bash
-npm install -g imugi
+npm install -g imugi-ai
+
+# One-click setup: installs Playwright browser, detects project, creates config
+imugi init
 ```
 
 ### Step 2: Add to your AI tool
@@ -60,7 +69,7 @@ Add imugi as an MCP server in your Claude Code or Cursor config:
   "mcpServers": {
     "imugi": {
       "command": "npx",
-      "args": ["-y", "imugi", "mcp"]
+      "args": ["-y", "imugi-ai", "mcp"]
     }
   }
 }
@@ -78,11 +87,35 @@ That's it. imugi captures, compares, and patches until the output matches your d
 
 ---
 
+## Example: Design to Code
+
+A terminal-inspired hero section — designed in Pencil, implemented by imugi.
+
+<div align="center">
+<img src="https://raw.githubusercontent.com/M00N7682/imugi/main/assets/example-comparison.png" alt="imugi — design vs implementation comparison" width="820" />
+</div>
+
+> Dark mode terminal aesthetic with JetBrains Mono, `#10B981` green accent, nav bar, hero CTA, 4-step flow diagram, MCP tools grid, and footer — pixel-perfect match from design to code.
+
+See the full example at [`examples/hero-section/`](examples/hero-section/).
+
+### More Examples
+
+| Example | Description |
+|---------|-------------|
+| [`hero-section/`](examples/hero-section/) | Terminal-inspired landing hero with flow diagram |
+| [`login-page/`](examples/login-page/) | Split-panel login with social auth buttons |
+| [`pricing-page/`](examples/pricing-page/) | 3-tier pricing cards (Starter / Pro / Enterprise) |
+| [`dashboard/`](examples/dashboard/) | Analytics dashboard with sidebar, stats, and chart |
+
+---
+
 ## Features
 
 - **Visual Comparison Engine** — SSIM + pixel diff + Claude Vision scoring with heatmap output
 - **Boulder Loop** — Iterative code improvement that keeps going until the design match threshold is met
 - **MCP Server** — Drop-in integration with Claude Code, Cursor, or any MCP-compatible AI tool
+- **Figma Integration** — Export Figma frames directly via URL, no manual export needed
 - **Project Detection** — Auto-detects framework (React/Vue/Svelte), CSS method (Tailwind/modules/styled-components), language (TypeScript/JavaScript)
 - **Interactive Agent** — Terminal UI with real-time iteration progress (powered by Ink)
 - **Smart Patching** — Full regeneration for scores below 0.7, surgical patches for scores above 0.7
@@ -124,6 +157,21 @@ imugi generate ./design.png --output src/app/page.tsx
 imugi compare ./design.png --screenshot ./current.png
 ```
 
+### Figma Export
+
+```bash
+# Export a Figma frame as PNG
+imugi figma "https://www.figma.com/design/FILE_KEY/name?node-id=42-1234"
+
+# Export at 3x scale with custom output path
+imugi figma "https://www.figma.com/design/FILE_KEY/name?node-id=42-1234" -s 3 -o design.png
+
+# Export and immediately compare against dev server
+imugi figma "https://www.figma.com/design/FILE_KEY/name?node-id=42-1234" --compare
+```
+
+Requires a Figma personal access token via `FIGMA_TOKEN` environment variable or `figma.token` in config.
+
 ---
 
 ## MCP Tools
@@ -133,6 +181,7 @@ imugi compare ./design.png --screenshot ./current.png
 | `imugi_capture` | Screenshot a URL via headless Chromium |
 | `imugi_compare` | Compare design vs screenshot — returns SSIM score, pixel diff, and heatmap |
 | `imugi_analyze` | Analyze visual differences with actionable fix suggestions |
+| `imugi_figma_export` | Export a Figma frame as PNG via URL or file key + node ID |
 | `imugi_detect` | Detect project tech stack (framework, CSS, language) |
 | `imugi_serve` | Start a dev server for the target project |
 
@@ -183,6 +232,7 @@ Create `imugi.config.json` in your project root:
 | `IMUGI_THRESHOLD` | Similarity threshold (0.8–0.99) |
 | `IMUGI_MAX_ITERATIONS` | Max iterations (1–50) |
 | `IMUGI_PORT` | Dev server port |
+| `FIGMA_TOKEN` | Figma personal access token (for `imugi figma` and `imugi_figma_export`) |
 
 ---
 
@@ -202,7 +252,8 @@ src/
 │   ├── analyzer.ts     # Diff classification + strategy
 │   ├── renderer.ts     # Playwright screenshot engine
 │   ├── patcher.ts      # Code generation + patching
-│   └── context.ts      # Project tech stack detection
+│   ├── context.ts      # Project tech stack detection
+│   └── figma.ts        # Figma URL parsing + API export
 ├── llm/
 │   ├── client.ts       # Anthropic SDK wrapper
 │   └── prompts.ts      # Prompt engineering