Iterating on pages

Once a page exists, you refine it three ways: edit it directly in the visual editor, ask the AI to change it, or bring a design in from Figma.

Full-screen preview

Click a page card to open it full screen. The preview renders the page's real HTML with the design system applied, inside a responsive container. From here you edit, iterate, or import.

The visual editor

Select any element and edit it in place:

• Text: click into any heading, paragraph, or label and type. What you see is what ships.
• Styles: spacing, typography, and colors, with values pulled from the design system's token palette. The style panel is cascade-aware: it shows every rule that could set a property, marks the one that wins, and tells you when an edit you made lost to a stronger rule instead of silently doing nothing.
• Structure: swap images, duplicate, reorder, or remove elements directly.

Edits persist into the page source, so they survive regeneration and follow the page into Code. If the element you're editing belongs to a shared component, the edit flows back into the component itself, and every page using it updates.

AI iteration

Hit Iterate and describe a change like "make the sidebar darker" or "add a recent-tips row under the hero." Modus rewrites the page and keeps the previous version, so iterations form a history you can step back through with undo.

Figma import

Two ways in, one pipeline:

• Share link: paste a figma.com/design/… URL. Modus pulls the file's frames through the Figma API, you pick the frames to import, and a Fonts step resolves every font family the design uses: Google-hosted families load automatically, and for the rest you upload the font files (per weight) or pick a fallback.
• Upload a .fig file: drop the file straight in, no Figma account or API token needed. Modus parses the file itself, including component instances, vector icons, and embedded images.

Either way, each frame compiles into a real page deterministically, not by asking a model to redraw it: every node's exact geometry, colors, typography, and assets become the page, the design's icons and images are exported into the workspace, and a reference image rides along. An agent pass then verifies the result against that reference, fixes concrete mismatches, and makes the page responsive by default, so a fixed-width frame reads well from phone to desktop.