Skip to main content

Design Mode

AI-assisted UI iteration on an existing element. The developer picks an element on the live page; the agent generates several design alternatives; the developer navigates them and refines via chat. Where Sketch Mode draws from scratch, design mode reworks what's already there.

Defaults that stay on-scheme: On-scheme by default.

Prompt-steered iteration: Steer it. Iterate. Then build..

API​

window.__devtool.design.start()             // enter design mode
window.__devtool.design.stop()              // exit
window.__devtool.design.selectElement()     // pick the element to iterate on
window.__devtool.design.next()              // next alternative
window.__devtool.design.previous()          // previous alternative
window.__devtool.design.addAlternative(d)   // add an agent-generated alternative
window.__devtool.design.applyAlternative(i) // select alternative i for preview (navigation only)
window.__devtool.design.chat(message)       // refine via natural-language chat
window.__devtool.design.getState()          // read current element + alternatives + index

Workflow​

  1. Select — design.start() then design.selectElement(); the developer hovers and clicks the element to redesign.
  2. Context to agent — selecting emits a design_state event with the element's markup, computed styles, and surrounding context.
  3. Generate — the agent produces 3–5 alternatives and feeds them back with design.addAlternative(). A request for more is a design_request event.
  4. Navigate — design.next() / design.previous() cycle the alternatives in the isolated preview panel; the preview never writes into the target subtree (React/HMR would wipe it). Shipping the winner is the agent's normal path — a source edit and an HMR reload.
  5. Refine — design.chat("make the CTA larger and use the brand green") emits a design_chat event; the agent revises.

Events​

EventEmitted whenPayload
design_stateAn element is selected for iterationelement markup, computed styles, context, slot geometry, same-signature exemplars, whole-page thumbnail
design_requestA request for new alternativescurrent element + constraints (preserve / vary / steer), slot, exemplars
design_chatA chat refinement messagemessage + current element + slot + constraints

The generation contract rides in constraints: preserve lists the scheme axes that stay fixed (palette, typography, spacing, radius), vary lists the axes alternatives should explore (layout, hierarchy, density, affordance), and steer is the user's latest message — highest precedence. slot is the parent container's box and layout mode, so alternatives fit the space they must render into. exemplars are truncated outerHTML snippets of same-signature components elsewhere on the page, anchoring variation in the site's own component grammar. The whole-page thumbnail (page_thumb_path, a saved JPEG) gives page-level continuity context beyond the element-region screenshot.

Read them from the proxy log:

proxylog {proxy_id: "dev", types: ["design_state", "design_request", "design_chat"]}

Inspecting State​

const s = window.__devtool.design.getState()
// { element, alternatives: [...], index, ... }

See Also​