1DesignToolDownload

Steering · since v1.0.0

Point, comment and tweak

Pick an element in the preview and the comment carries its real context — tag, styles, place in the tree — so the agent edits the thing you meant, not its guess of it.

DownloadRead the docs

Why it matters

Text prompts for visual fixes are a translation tax: 'the blue button top-right, not that one, the other one'. Pick-and-comment removes the translation — you point at the thing, say what changes, and the steer is scoped to it. Tweaks go further: live controls for the continuous stuff (spacing, radius, type size) that shouldn't cost an agent turn at all.

How it works

  1. 1Pick the elementHover highlights, click selects. The pick carries the element's identity — what it is, where it lives, what styles it has.
  2. 2Comment in placeThe note attaches to the pick, so 'darker' means this element's color, and 'quieter' knows what it's quieting.
  3. 3Draw on itFor layout asks, draw the change — a box where the card should sit, an arrow where the panel moves — the sketch is part of the turn's context.
  4. 4Tweak without a turnContinuous controls — spacing, radius, type — adjust live on the preview and apply as values, no agent call required.

Capabilities

  • Element picking with real DOM context — the agent sees what you pointed at
  • Comment-in-place steering, each a verified turn in history
  • Draw-to-steer: sketches and arrows become part of the turn's context
  • Live tweak controls for continuous values — no agent spend for dragging a slider
  • Shared-component edits ask before spreading: 'Defined in <file> · N on this screen'

FAQ

What does the agent actually receive when I pick an element?

The element's identity and context — its tag, styles, and place in the tree — plus your note. The steer is scoped to that element, not the whole page.

What's the difference between a comment and a tweak?

A comment is a turn — the agent edits the files and the gate verifies. A tweak is a live control that changes values on the preview directly — instant and free.

If I edit a shared component, does it change everywhere?

Only with permission: when the picked element is defined in another file, the panel asks whether the change is for all N instances before it spreads — and verifies every one it touches.

In the docs

Related features

SteeringVariants and blind compareAsk for variants and each option is planned as its own direction, built independently, and shown unnamed — you pick with your eyes, not your biases.Read more →SteeringA design kit the agent has to passThe gate is the difference between 'generated' and 'shipped': kit checks run on every turn, and in Reviewed or Council mode independent critics judge the frozen evidence before the result counts.Read more →AgentsYour coding agent is the designerClaude Code, Codex, Cursor Agent, Gemini, Devin and eleven more — whichever CLI you trust, 1DesignTool drives it as a designer and holds its output to the same visual bar.Read more →

Design with the agent you already have.

Free to try, buy once — the studio and your own coding CLIs do the rest.

Download