generate
Name an element, compare variations, and keep your favorite.
On this page 4 sections
Use generate when you know which part of a running web page you want to explore. Name the element and the direction in your agent chat. Impeccable finds it, scrolls to it, and prepares alternatives for you to compare in the browser.
Try it
/impeccable generate 3 bold variants of the pricing cards
Keep your agent session active. Impeccable connects to your development server and uses the page already open in your coding tool when available, or opens it in your browser. The comparison controls appear beside the named element.
Generate uses Live Mode, including its beta status. You can go straight from a written request to alternatives on the page without selecting the element yourself.
Give it a direction
A useful request names three things:
- The element: “the pricing cards,” “the hero heading,” or “the checkout summary.” Include the page when the project has several.
- The direction: bolder, quieter, simpler, polished, typography, color, layout, motion, or another concrete outcome.
- The count: ask for 1 to 8 alternatives. Leave the number out to get three.
/impeccable generate 2 quieter variants of the hero heading. Keep our font and colors.
Or describe the outcome you want:
/impeccable generate layout variants of the checkout summary. Make the total and delivery date easier to find.
If you only ask for “better” or “different” versions, Impeccable asks which direction you want. If the element could refer to several parts of the page, it helps narrow the target before making changes.
Variations keep your existing identity by default. They use the current page and any saved product and design context. You do not need to create PRODUCT.md or DESIGN.md to try the command.
Compare and choose
Use the previous and next arrows beside the element to cycle through the alternatives. Each version appears in the real page, so you can judge its hierarchy, spacing, and relationship to everything around it. Some variations also offer Tune controls for adjustments such as spacing or emphasis.
Choose Accept to keep the current version in your source. Discard the set to restore the original. Impeccable removes the temporary preview code and closes the Live Mode connection after your choice; your development server keeps running.
Review the source changes and try the result at narrow and wide widths. Check any interaction the visual comparison did not exercise.
When to use Live Mode instead
Use live when you want to pick elements yourself, add comments or drawn annotations, or steer the whole page while browsing. The browser iteration tutorial walks through the comparison and acceptance controls shared by both entry points.
Generate works with web projects on a development server or local static HTML. It does not attach to native iOS or Android interfaces. For those, ask for a focused source change with a command such as bolder or quieter.