Changelog

Fixes

• +The panel's line height follows a font-size change, instead of showing the old value.
• +In Screens, no tooltip is left over the screen once the pointer is inside it.

What's new

• +Screens. The devices button in the toolbar opens the page you're on at phone, tablet or desktop width (iPhone 15 · 390, iPad Mini · 768, Desktop · 1280), one at a time, over the page. It's the same address, so your login and cookies still hold, and media queries answer to the screen's real width.
• +The same toolbar on every screen. While Screens is open, the toolbar works on the screen: select, adjust in the panel, draw, Run, undo. The panel opens outside the screen, so it never covers a 390px layout. The change goes to your code and hot reload updates the screen.
• +Any size, with rulers. Drag the screen's right or bottom edge (or its corner) for any size in between. Turn the phone to landscape. Rulers on the top and left show the selected element in orange.
• +Apps that refuse iframes still open. Through Ilse's address, X-Frame-Options and frame-ancestors are dropped only for the screen's own load.

What's new

• +Component library. The catalog and your design system now live in one tab, the Library. The list of your project's components is Free: search by name or by what a component is for, see where each one is on the page, and open its Component section.
• +Create design system. One click (or ilse ds) and Ilse writes .ilse/ds/DESIGN.md from your code: your components with their props and variants, and your tokens (colors, spacing, radius, type, shadows). No AI, done in seconds.
• +Your agent follows it. The design system window opens what was written. Add to AGENTS.md (or CLAUDE.md) points any agent at it on a click, so Claude Code, Codex, Cursor or Gemini use your components and tokens even with Ilse closed. Ilse reads it too.

Fixes

• +Editing pixels no longer flashes a horizontal scrollbar.
• +Reasoning lines rise above open bubbles and panels instead of being covered by them.

English

Components in the panel. Select a component and the panel shows its props and variants, read from your code (types, cva(), how it's used) or from a library's types. Pick another variant and Ilse rewrites that prop where this instance is written — no AI.

Duplicate anything. Duplicate a list row and the agent adds a new item to the data behind the list (with a unique key); duplicate any other block and it writes a copy of the JSX. Drag the copy where you want it and restyle it in the panel — the copy goes there, with that style, and the original stays as it was.

An edit on one instance stays on that instance. When the element comes from a component used in several places, the change applies only here unless you choose "All".

Changes show without a reload. What you previewed — a style, a copy, a hidden element — stays on screen until the page re-renders with the real change. If it doesn't on its own, Ilse asks the framework to re-render (Next's App Router: no reload, state kept). It asks you to reload only as a last resort.

The page must not break. After a change, new errors the page logs (a duplicated React key, an uncaught exception) show up with Ask for a fix, Undo and Ignore.

Undo survives a restart. The undo history is kept per project outside your repo (ILSE_UNDO_SAVE=0 keeps it in memory only).

Smaller things

• +Panel size: Hug/Fill show the measured size; a Fill that changes nothing says why
• +The property panel keeps the spot you dragged it to
• +Chrome extension: right-click → Open with Ilse, which selects the element
• +A project's own app takes its Ilse server back from another project's tab
• +Old notes no longer come back as pending after a restart
• +The same request on the same element isn't sent twice
• +A cleaner terminal log

Português

Componentes no painel. Selecione um componente e o painel mostra as props e variantes dele, lidas do seu código (tipos, cva(), como ele é usado) ou dos tipos de uma biblioteca. Escolha outra variante e a Ilse reescreve essa prop onde esta instância está escrita — sem IA.

Duplicar qualquer coisa. Duplique uma linha de lista e o agente acrescenta um item novo aos dados dela (com key única); duplique qualquer outro bloco e ele escreve uma cópia do JSX. Arraste a cópia para onde quiser e mude o estilo dela no painel — a cópia vai para lá, com esse estilo, e o original fica como estava.

Uma edição numa instância fica nela. Quando o elemento vem de um componente usado em vários lugares, a mudança vale só aqui, a não ser que você escolha "Todos".

As mudanças aparecem sem recarregar. O que você viu em prévia — um estilo, uma cópia, um elemento escondido — continua na tela até a página renderizar a mudança real. Se ela não renderizar sozinha, a Ilse pede ao framework que renderize de novo (App Router do Next: sem recarregar, sem perder o estado). Pedir para você recarregar é o último recurso.

A página não pode quebrar. Depois de uma mudança, erros novos que a página registra (uma key repetida do React, uma exceção não tratada) aparecem com Pedir correção, Desfazer e Ignorar.

Desfazer sobrevive a reiniciar. O histórico de desfazer fica guardado por projeto, fora do seu repositório (ILSE_UNDO_SAVE=0 mantém só em memória).

Coisas menores

• +Tamanho no painel: Hug/Fill mostram o tamanho medido; um Fill que não muda nada diz por quê
• +O painel de propriedades fica onde você o arrastou
• +Extensão do Chrome: botão direito → Abrir com a Ilse, que já seleciona o elemento
• +O app de um projeto pega de volta o servidor da Ilse que a aba de outro projeto tinha pegado
• +Notas antigas não voltam mais como pendentes depois de reiniciar
• +O mesmo pedido no mesmo elemento não é enviado duas vezes
• +Log do terminal mais limpo

What's new

• +Position in the panel: static · relative · absolute · fixed · sticky, with X/Y. Out of the flow, the element drags anywhere, ignoring the parent's layout (like Figma's "Ignore auto layout"). It doesn't jump when you switch, and keeps its width.
• +Effects in the panel: shadow, blur and background blur, on the project's scale (shadow-md, blur-md, backdrop-blur-md). They show when the element has them; "+" adds a shadow.
• +Text alignment: left · center · right, under Typography.
• +Formatted text (<em>, <strong>, <span>…) can be retyped in the panel; each piece keeps its formatting.

Everything applied without AI lands in the code as a Tailwind class.

Fixes

• +Closing Ilse with a card open no longer leaves the page in selection mode.
• +Disabled buttons and fields can be selected.
• +Markers inside lists and panels that scroll on their own follow their element.

Novidades

• +Mantém o CI verde. Depois de cada mudança, a Ilse roda o typecheck do projeto e os testes que cobrem o que mudou. O que a mudança quebrou, o agente corrige antes de dizer que terminou — testes de aparência são atualizados, testes de comportamento ficam e o código é corrigido. Falhas que já existiam não são atribuídas à mudança. ILSE_CHECK=off desliga; .ilserc.json ganha check e protected.
• +Memória do projeto (Configurações → Memória do projeto): as mudanças de design que a Ilse fez aqui, com a sua nota e o que ainda não tem commit. Com o Ilse Pro, também o que o modo teste lembra.
• +Árvore de componentes no card, no lugar do bloco de CSS: suba para o pai ou desça para o filho sem fechar a nota.
• +A mudança cai na página certa: o pedido leva a página; um desenho em área vazia fica ancorado no elemento que a contém; se o agente mexer em outra tela, a barra avisa, com Refazer nesta página / Desfazer / Manter.
• +Arrastar move o que você selecionou, não o pai.
• +✕ fecha o card; menus da página não fecham mais quando você clica no card.
• +Cabeçalho das configurações: plano da Ilse, agente e conta ("Claude Pro"), modelo e chamadas da sessão.
• +"Sem cor" no Fill e no Stroke do painel.

Ilse Pro

O modo teste agora vem só no Ilse Pro, que se conecta ao pacote grátis por plugin. Sem o Pro, o mascote do modo teste aparece dormindo. Veja ilse.design/#pro.

``bash npx ilse-design ``

What's new

• +Your app's port, confirmed once per project. The first time, Ilse shows the port it detected — *Your app will run at localhost:5173* — and you run on it or change it. Saved per project (never in the repo); ilse --port <n> changes it later. Thanks @huxleydias for asking.
• +Monorepos from the root. With turbo dev (or another task runner) at the root, Ilse finds the Vite or Next app in the workspace and runs it from its own folder, on the right port. Several apps: it asks once which one (#17).
• +npm page in English, with working logo and links. The Portuguese README is now LEIAME.md.

Ilse 0.5 — first stable release — the designer's eye inside the code agent. Point at what's wrong in the running app, or adjust it like in Figma; your own coding agent changes the code, or Ilse applies it itself when no AI is needed.

Try it

In your React project's folder (no need to start the app first):

``bash npx ilse-design ``

Ilse starts your dev server behind itself and opens your app at its usual address, toolbar on top.

Since v0.5.0-beta.1

• +On npm: npx ilse-design (or npm install -g ilse-design) — no git install, no --allow-git (#15, #16).
• +Port already taken: Ilse says so and stops, instead of opening over a server it didn't start (#16).
• +The update notice understands betas and shows the command to update (#15).

Highlights

• +Your usual address, nothing in the project (#14). Ilse runs your dev script on a hidden port and takes the app's own port, so logins, SSO and OAuth callbacks keep working. --separate opens it on localhost:4700 instead.
• +Vite plugin, bookmarklet and Chrome extension (#13, thanks @huxleydias — first contribution 🧡), plus a fix for a WebSocket reconnection storm.
• +Property panel with your project's scale and tokens: size, layout, spacing, typography, colors, stroke, radius, opacity. *Apply to: only this one or All · N*, previewed on every instance. Edit text, remove elements (#4, #8).
• +Move for real and resize: drag to reorder or move into containers, live; resize with snap-to-grid. Select the parent (↰), whole-SVG selection, ⌘-click for the exact element (#11).
• +The cheapest step that works: Tailwind class swaps without AI, a fast model for small requests, the full agent only when needed. Code checked after every agent batch; ⌘Z undoes applied changes (#6).
• +Keyboard shortcuts: I I brings the toolbar back, Settings → Keyboard shortcuts, shortcuts in tooltips (#14).
• +English and Portuguese everywhere in the UI (#10).

Docs: README · How it works · Reference