Ilse
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Ilsewatch the Ilse annotations and fix the selected button color"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
The designer's eye inside the code agent.
You open your app in the browser, point at what's wrong and say how it should be — or adjust it right there, like in Figma. Your AI coding agent changes the code. You see the result on the page, and keep it or undo it.
Side project, in beta. Made by a designer, for designers who work with code agents. Free to use, with the code open to read.
What you can do
Point and say. Click an element, select a piece of text or draw an area, and write what should change: "more space between the cards", "this title should be stronger".
Adjust it yourself. A property panel like Figma's: size, layout, spacing, typography, colors, borders. You see the change live before sending it.
Edit text and remove things. Retype a text right in the panel, or remove an element.
Move things around. Drag to reorder, move into or out of a container, resize.
Draw it. Sketch on the page with the pencil, or paste a screenshot as a reference.
Undo anything. ⌘Z puts the code back exactly as it was. No need to ask the AI to revert.
Keeps CI green. After each change Ilse runs your project's typecheck and the tests that cover it. What the change broke, the agent fixes before it's called done.
Related MCP server: relay-inspect
What you need
A React project that runs on your computer (Next.js, Vite…).
An AI coding agent installed and logged in: Claude Code, Codex, Cursor CLI or Gemini CLI.
Ilse uses your agent and your account. It has no account, key or server of its own, and nothing leaves your machine.
Try it
In your project's folder — no need to start the app first — run:
npx ilse-design@latestIlse is on npm as ilse-design and needs Node.js 18 or newer. @latest makes sure you get the newest version, even if an older one is installed on your machine.
Ilse starts your dev server (npm run dev) behind itself and opens your app at its usual address — http://localhost:3000, or whatever port it uses — with the toolbar on top. Logins, SSO and callbacks keep working. The first run asks a few questions and takes about a minute. Next time, just ilse if you installed it.
Prefer to run the dev server yourself? --separate opens Ilse on its own address, localhost:4700. More ways: the Vite plugin, the bookmarklet or the Chrome extension (experimental).
Not comfortable with the terminal? Ask your agent: "Install and run Ilse in this project — see https://github.com/idantas/ilse".
What it costs
Ilse runs on your agent's plan, so it uses that plan's limits. It always picks the cheapest way that works:
Panel adjustments that map to a class in your code are made by Ilse itself — no AI, instant, nothing from your plan.
Small requests go to a fast, cheaper model: a few seconds.
Bigger ones (new screens, structure) go to the full agent — the most expensive step, so it's used only when needed.
Go deeper
How it works — how Ilse finds the code, the cost ladder, models, safety checks, usage limits, undo and commits.
Reference — commands, settings, connecting your agent over MCP, logs, compatibility.
AGENTS.md — for contributors and their agents.
Why "Ilse"
AI freed designers from the execution bottleneck, but craft still needs human judgment. Ilse is the designer's eye inside the agent: you point at what's wrong, the agent fixes it, you approve.
"Design is a tool for improving humanity." — Ilse Crawford
Contributing
Issues and pull requests are welcome — see CONTRIBUTING.md. Security problems go privately: SECURITY.md.
PolyForm Shield 1.0.0: free to use, change and share — just not to build a product that competes with Ilse. Versions up to 0.5.1 were MIT; see NOTICE.
This server cannot be deployed
Maintenance
Related MCP Connectors
Live browser debugging for AI assistants — DOM, console, network via MCP.
Comment on AI-generated webpages; feedback flows back to your coding agent. Free, MIT, local-first.
Build and publish full-stack apps from your coding agent: models, rules, pages, auth, per-app MCP.
Visual website feedback your coding agent applies: pin change requests on the live site over MCP.
Related MCP Servers
- FlicenseNot gradedqualityCmaintenanceHuman-to-AI code review bridge. Annotate UI elements in the browser with review comments, and AI agents read the feedback via MCP to fix code automatically — with full element context (CSS selector, styles, DOM path, accessibility info). 10 MCP tools, framework-agnostic Web Component, zero-config install via uvx.9-
- AlicenseAqualityDmaintenanceProvides AI coding agents real-time browser access to console logs, network requests, DOM elements, and screenshots via MCP, enabling tight edit-reload-verify feedback loops.153 npm2MIT
- AlicenseAqualityCmaintenanceMCP server that opens a browser and adds a comment/pencil overlay to every page, letting you annotate live sites and send the marks to your coding agent.82MIT
- AlicenseNot gradedqualityBmaintenanceEnables users to capture any screen or URL, box the region they mean, attach notes, and deliver that annotated feedback—including cropped images, numbered boxes, and the underlying DOM elements or component names—directly to an AI coding agent over MCP. It also lets agents open the annotator, capture a URL, and wait for or retrieve feedback bundles from earlier sessions.MIT