# imugi
[](https://www.npmjs.com/package/imugi-ai)
[](https://github.com/M00N7682/imugi/stargazers)
[](https://opensource.org/licenses/MIT)
[](https://nodejs.org)
[](https://github.com/M00N7682/imugi)
**Give AI eyes to see your frontend.**
*Figma design → pixel-perfect code, with zero manual CSS tweaking.*
*imugi is an MCP tool that captures your running UI, compares it against the original design using image similarity, and keeps pushing AI to fix the code until it's a perfect match.*
[Get Started](#quick-start) · [Docs](https://imugi.ddstudio.co.kr) · [MCP Tools](#mcp-tools) · [Examples](#examples) · [Contributing](CONTRIBUTING.md)
---
## The Problem
You give AI a Figma design and ask it to build the frontend. The result looks... *close*. But then you spend the next 2 hours manually tweaking padding, font sizes, colors, and alignment — because AI has no way to verify what it actually produced.
**imugi fixes this.** It gives AI the ability to screenshot its own output, compare it pixel-by-pixel against the design, see exactly where the differences are, and fix them — automatically, in a loop, until the implementation matches the design.
No more eyeballing. No more manual CSS tweaking. The AI does it all.
---
## How it works
```
Design Image → Code Generation → Screenshot → Compare → Analyze → Patch
↓
Score ≥ 95%? → Done!
↓ No
Repeat
```
imugi uses **SSIM** (Structural Similarity) + **pixelmatch** + **Claude Vision** to compare design images against live rendered output, then automatically patches the code to close the gap. This is the **Boulder Loop** — it keeps rolling until your code matches the design.
---
## Why imugi?
| | Without imugi | With imugi |
|---|---|---|
| **Design fidelity** | "Looks close enough" — eyeball and pray | Pixel-level verification with composite score (SSIM + pixel diff + AI vision) |
| **CSS tweaking** | 2+ hours of manual padding/color/font fixes | AI fixes its own mistakes automatically |
| **Feedback loop** | You are the feedback loop | imugi is the feedback loop — screenshots, compares, patches, repeats |
| **Framework support** | Configure each project manually | Auto-detects React, Vue, Svelte, Next.js, Tailwind, CSS Modules, and more |
| **AI integration** | Copy-paste screenshots between tools | Drop-in MCP server for Claude Code / Cursor — zero setup |
| **Cost** | Extra API keys, extra subscriptions | **No API key needed in MCP mode** — uses your existing AI editor |
---
## Quick Start
### Step 1: Install & Setup
```bash
npm install -g imugi-ai
# One-click setup: installs Playwright browser, detects project, creates config
imugi init
```
### Step 2: Add to your AI tool
Add imugi as an MCP server in your Claude Code or Cursor config (no API key required):
```json
{
"mcpServers": {
"imugi": {
"command": "npx",
"args": ["-y", "imugi-ai", "mcp"]
}
}
}
```
### Step 3: Build something
Ask your AI to implement a design — imugi handles the visual verification loop.
```
Implement this login page design. Here's the reference: ./login-design.png
```
That's it. imugi captures, compares, and patches until the output matches your design.
---
## Examples
### Design → Code (zero manual CSS)
A terminal-inspired hero section — designed in Figma/Pencil, implemented entirely by AI + imugi. No manual CSS tweaking involved.
