How to Use Ilse: The Beginner's Guide
CodexFuse Team · 2026-11-03T19:52:43.172Z · 11 min read min read
How to Use Ilse: The Beginner's Guide
Learning how to use Ilse starts with understanding what it is not: Ilse is not another AI coding assistant, and it is not a design tool that exports code. Ilse is a toolbar that sits on top of the React app you already have running — you click an element on the real, rendered page, say what should change, and the note reaches your own AI coding agent already pointing at the right file and line. The agent you already use — Claude Code beginner guide, Codex, Cursor CLI, or Gemini CLI — does the actual coding, on your own machine. Ilse's maker calls it "the designer's eye inside the code agent": you point at what's wrong in the browser, and your agent fixes it in the code. This Ilse tutorial walks you through installation, your first edit, the panel, the component library, and Pro test mode, all as of November 2026.
What Is Ilse, Exactly?
Ilse is a visual-editing layer for React apps. It puts a floating toolbar over your running app — Next.js, Vite, Remix, Astro, or Create React App — and gives you five ways to change what you see: click an element and describe the change in words (point and say), tweak spacing, size, type, and color with your project's own tokens (panel), drag to reorder, resize, retype, or remove elements directly (move/resize/edit/draw), capture screen widths from phone to desktop (screens), and read your component library back to your agent as a written design system.
Simple tweaks land instantly, with no AI. Everything else goes to the AI agent you already use, aimed at the exact file and line instead of a vague prompt. Pro adds test mode: Ilse walks real user journeys through your app on its own and reports accessibility problems, errors, and layout issues. It was built by Iverson, a designer of nine-plus years who says he now spends more time in code than in Figma, and named after designer Ilse Crawford — "design is a tool for improving humanity." The product launched on Product Hunt on October 29, 2026; the public repo (idantas/ilse) dates to October 1, with version 0.10.0 as the latest noted release. One important caution: this is an early product in founder pre-sale, so install commands and screens may move — everything below is verified as of November 3, 2026.
How Do You Install Ilse?
You install Ilse with one command — npx ilse-design@latest — and you need Node.js 18 or newer plus a React project on your computer. Here is the full first-run arc:
- Open a terminal in your React project folder. Ilse works with React apps only: Next.js, Vite, Remix, Astro, or Create React App. Non-React projects are not supported — plan accordingly.
- Run the install command. Type
npx ilse-design@latestand press Enter. If you want it globally, runnpm install -g ilse-design@latestonce, then use it asilse. - Let Ilse start your dev server behind itself. On first run, Ilse launches your
npm run devon a hidden port — your app's port plus 10000 — and proxies the toolbar onto your app's own port. You keep using your normal localhost URL, and hot reload, logins, SSO, and callbacks all keep working. If you prefer, there is a Vite plugin, a bookmarklet, an experimental Chrome extension, or--separatemode (Ilse onlocalhost:4700while you run the dev server yourself). - Make sure your AI coding agent is installed and logged in. Ilse needs one of Claude Code, Codex, Cursor CLI, or Gemini CLI, installed and authenticated. State this plainly once: Ilse never touches an API key — your own agent, on your own plan, does the coding on your machine.
- Pick a handoff mode. Automatic (Ilse calls your agent directly), MCP, or Clipboard (Ilse prepares the note and you paste it into your agent yourself).
What Can You Do From the Toolbar?
The toolbar gives you five kinds of work. The first three cover almost every beginner session:
Point and say. Click an element, select text, or draw an area on the page, then write the note in words. This is the core Ilse point and say flow: the note reaches your agent already pointing at the right file and line — Ilse resolves the target using AST parsing plus the React dev stack, and tells the agent only the slice of code it needs. That is the whole point-and-say lesson: the agent stops hunting for the file and starts editing.
Panel. Size, position, layout, spacing, typography, colors, borders, and effects — edited against your project's own scale and tokens, not invented values. Panel tweaks that map to a Tailwind class are applied by Ilse itself with no AI. Changing a component prop (for example, variant="outlined" to "contained") is rewritten in the code, also with no AI.
Move, resize, edit text, draw. Drag elements to reorder them or move them into containers, resize with snap-to-grid, retype text in place, Duplicate (a list row becomes a new data item), Remove, sketch with a pencil, or paste a screenshot or SVG as a visual reference. The page reacts live; the agent makes it real in the code.
Screens. Preview and edit at phone (iPhone 15, 390 pixels), tablet (iPad Mini, 768 pixels), and desktop (1280 pixels) widths, with rulers on the side — the same toolbar works inside every width, so a mobile fix is a mobile edit, not a guess.
Library. The component library is read from your code with no AI involved, shows where each component appears on the page, and feeds the design-system workflow below.
How Does the Panel Save Your Agent's Tokens?
Ilse works in a three-tier cost ladder, and the cheapest tier uses no AI at all. The maker's line: "Ilse runs on your agent's plan, so it uses that plan's limits" — the tiers decide how much of that plan you burn.
| Tier | Example | AI cost |
|---|---|---|
| No-AI class swap | Panel tweak that maps to a Tailwind class; a prop change like variant | Zero tokens — Ilse itself applies it |
| Quick model | Small edits routed to a fast model (Claude Haiku/Sonnet defaults, configurable in .ilserc.json) | Small |
| Full agent | Bigger work handed to your agent with the file:line note attached | Your agent's plan limits |
The practical takeaway: do all your styling in the panel before you write a single prompt. Every spacing, size, type, and color decision that lands in the panel costs you nothing; only the changes that need judgment reach an agent, and they arrive pre-aimed at the right file and line.
How Does Ilse Hand Your Note to the Agent?
Three handoff modes — Automatic, MCP, or Clipboard — and in every mode, Ilse itself never sees an API key. Automatic means Ilse calls your agent directly; MCP hands the note over through the Model Context Protocol (the MCP explainer); Clipboard prepares the note so you can paste it into your agent yourself. Whichever you pick, the underlying privacy model is the same: Ilse has no account, no key, and no server of its own, and nothing leaves your machine. The agent Ilse calls runs isolated — no shell access, it reads and edits files only, and it does not touch your personal CLAUDE.md or agent memory.
There is also a safety net under every change. After your agent edits code, Ilse runs your project's typecheck (tsc --noEmit) and the tests covering the changed files (vitest related or jest --findRelatedTests) — the agent must fix what it broke before the change counts as done. Command-Z undoes applied changes, and the undo survives restarts. Previews never touch React's DOM structure, so looking costs you nothing.
What Is Test Mode (Ilse Pro)?
Test mode is Ilse's Pro feature, and it is the paid tier — do not treat it as free. You describe what a person does, for example "buy the paper lamp," and Ilse test mode walks the real app in a separate browser on its own, then reports accessibility issues, errors, and layout problems, and remembers what you fixed. It is the "she walks the real app on her own" loop from the launch pitch.
Two details matter for beginners. First, recording a journey needs Claude Code; the replays run with no AI, so re-running a suite is cheap. Second, Pro is in founder pre-sale as of November 3, 2026, and no price is published on the Product Hunt listing, the README, or any docs page — check the listing for the current price before you plan around it. The core toolbar is free (Product Hunt lists the price as 0 USD), and the license is PolyForm Shield 1.0.0, which is free to use, change, and share as long as you are not building a competing product.
How Do the Component Library and Design System Work?
Ilse reads your components straight from the code — no AI involved — lists them in the library panel, and shows where each one appears on the page. That on-page map is the "design tool" half of Ilse: it answers "where is this button actually used" without a codebase search.
The deeper feature is ilse ds ("Create design system"): it writes your components and tokens to .ilse/ds/DESIGN.md, generated from the code with no AI. "Add to AGENTS.md" then points any agent at that file, so your agent stops inventing new buttons and starts reusing the ones you have. The maker pairs this with a pricing promise worth quoting: "What's free never becomes paid" — the design-system output stays in the free tier.
What Should You Set Up Before Your First Session?
Three things: a committed git repo, a logged-in coding agent, and Node 18 or newer. Miss any one and your first session will stall.
| Beginner mistake | What to do instead |
|---|---|
| Letting the agent rewrite files in an uncommitted repo | Commit first — an agent's edits are only undoable if git can see the before-state (Git beginner guide) |
| Starting Ilse with no agent installed or logged in | Install and authenticate Claude Code, Codex, Cursor CLI, or Gemini CLI first — Ilse cannot write code without one |
| Assuming it works on any framework | React only: Next.js, Vite, Remix, Astro, or CRA |
| Writing prompts for styling tweaks | Use the panel for spacing, size, type, and color — those land instantly with zero tokens |
| Treating test mode as part of the free tier | Test mode is the paid Pro feature, currently in founder pre-sale with no published price |
Where Does Ilse Fit in Your Agent Workflow?
Ilse opens the visual-editing lane: as an Ilse design tool, it sits between your eyes and your coding agent. The agent itself — our Claude Code walkthrough covers the setup — still writes the code. Frontend behavior plumbing is its own lane (HTMX beginner guide), and the agent-handoff protocol is another (what MCP is). No Figma-to-code or visual-builder sibling exists on this site yet, so this page is the lane's pillar — point-and-say editing, the panel, and the design-system loop all live here.
Sources
Every fact in this guide was verified from pages fetched on November 3, 2026:
- Product Hunt — "ilse: Point at your app and your AI agent changes the code" (https://www.producthunt.com/products/ilse) — tagline, description, install command, price 0 USD, Pro test mode, published October 29, 2026.
- GitHub — idantas/ilse README — install modes, agent prerequisites, handoff modes (Automatic/MCP/Clipboard), safety nets (typecheck, related tests, undo), screens, component library,
ilse ds, license (PolyForm Shield 1.0.0), maker statement. - npm — ilse-design package page — package name and
npx ilse-design@latestinstall command. - Chris Pirillo's Mastodon post (October 31, 2026) — v0.10.0 release note on responsive Screens (phone/tablet/desktop widths) — social signal only.
Frequently Asked Questions
Is Ilse free?
The core toolbar is free — Product Hunt lists the price as 0 USD, and the license (PolyForm Shield 1.0.0) is free to use, change, and share as long as you are not building a competing product. Pro, which is the test-mode feature, is the paid tier; it is in founder pre-sale as of November 3, 2026, with no price published yet.
Does Ilse replace my AI coding agent?
No — it requires one. Ilse needs Claude Code, Codex, Cursor CLI, or Gemini CLI installed and logged in before it can change any code. Ilse never touches an API key; your own agent, on your own plan, does the coding on your machine. Think of Ilse as the pointing finger and your agent as the hand.
Which frameworks does Ilse work with?
React only: Next.js, Vite, Remix, Astro, and Create React App. There is no Vue, Svelte, Angular, or plain-HTML support — the whole mechanism (AST parsing plus the React dev stack) is React-specific.
Will Ilse mess up my code?
It is built not to. Notes resolve to the exact file and line, every agent change is followed by a typecheck and the related tests (which the agent must fix), Command-Z undoes applied changes even after restarts, and previews never touch React's DOM structure. Still, commit your work in git first — that is the one safety net no tool can replace.
How is Ilse different from describing UI changes in a chat?
In a chat you describe the change in words and the agent hunts for the right file; with Ilse you click the element and the note arrives pre-aimed at the exact file and line, and styling tweaks in the panel land instantly with zero tokens. The difference is pointing versus describing — and on a real page, pointing wins.
