English · Português
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.
- Every screen size. Open the page at phone, tablet or desktop width, with rulers, and adjust each one with the same toolbar.
- 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.
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@latest
Ilse 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.