live

Use live when you want to work visually on a running website. Pick an element, describe the change, and compare alternatives in the page. You can also give the agent a direction for the whole page through Steer.

Live Mode is in beta. It is ready to try, though uncommon project setups can still need troubleshooting.

Try it

Run this in your agent chat:

/impeccable live

Impeccable opens your site with the Live Mode controls. First-time setup may need to configure the connection to your project. Keep the agent session active while you work in the browser.

Already know the element and direction? Use generate to start the same comparison from your agent chat:

/impeccable generate 3 bold variants of the pricing cards

Impeccable finds the element and prepares the alternatives for you. Use live when you want to pick, annotate, or steer as you browse.

How it works

• Pick and describe: select the part you want to change. Write a request, choose an action such as layout or bolder, or add comments and strokes to show what you mean.
• Compare variations: choose how many you want and press the Generate variants arrow. The default is three alternatives for the selection, which you can cycle through in the page.
• Adjust the result: use any controls offered with a variant to tune qualities such as density or emphasis without another generation round.
• Keep or discard: choose Accept to keep a variant in source. Discard the set to restore the original selection.

Thursday24September · 7 pm

The next
chapter.

One novel. A room full of different readings. Join our monthly book club.

Reserve a seat

Variations preserve your identity by default. They can differ in hierarchy, layout, density, or use of the palette while still looking like the same product. Ask explicitly for a redesign when you want to depart from that identity.

Existing code remains useful context even without DESIGN.md. Recording the visual system with document helps make those choices explicit; init saves the product context behind them.

Steer beyond one element

Use Steer for page-wide direction, such as “make the delivery information easier to find throughout this page.” You can type or speak your request. The agent works on the page without requiring an element selection or generating a set of variants first.

Live Mode also supports inserting a new element and editing text directly before applying it to source. The step-by-step tutorial walks through the core picking and comparison flow.

What kind of project does Live Mode need?

Live Mode works with web pages on a running development server or local static HTML. It supports common frameworks, including Vite-based apps, Next.js, SvelteKit, Astro, and Nuxt. It does not attach to native iOS or Android interfaces.

If a Content Security Policy prevents the controls from loading, first-time setup explains the change needed and asks before modifying it. Open your app’s URL, rather than the local helper server’s address.

What changes when I accept a variant?

Accept keeps the selected version and its parameter choices in the project’s source. Impeccable removes the temporary preview code and integrates the result with the surrounding implementation.

When the page is generated from another file, the change needs to reach the actual source. Follow any source-mapping message rather than forcing a change into build output.

Review the result and the source diff as you would any other agent edit, especially behavior that the visual preview alone cannot establish.

Finish the session

Accept or discard the current set, then use the exit control or tell the agent to stop Live Mode. It stops the helper and cleans up the temporary connection.

If the session is interrupted, ask the agent to resume it. Live Mode keeps session records so it can check what is still pending instead of starting the same work again.

For a new page or a substantial redesign, you can also describe the work directly to Impeccable.