The idea

Building HTML mockups with AI agents works surprisingly well - until you need to tell the agent which element to change. Describing "the second card in the pricing section" in plain text wastes tokens and is error-prone. Copying the full HTML back and forth is even worse.

Aceto takes a different approach: you point at an element in the browser, the agent gets a precise CSS selector. No pasting HTML, no guessing.

How it works

Aceto is not a drawing tool or visual editor. It is a feedback loop:

1. Tell the agent what you want
2. The agent generates or modifies real HTML + Tailwind CSS
3. See the result live in your browser
4. Point at an element and say "change this"
5. The agent understands which element you mean and modifies it

The agent connects via MCP (Model Context Protocol), so it works with Claude Code out of the box. The browser overlay provides the visual layer - hover highlighting, element selection, and inline editing - while the agent handles all structural changes through standard HTML manipulation.

Browser overlay

When you move the mouse over any element, a blue outline appears with the element's tag and classes:

Clicking an element selects it with a pink outline. The breadcrumb bar at the bottom shows the full DOM path. The scroll wheel navigates up and down the tree - parent and child elements:

The agent can also highlight elements in cyan to communicate visually - for example to ask "Do you mean this one?":

Both selections - pink for the user, cyan for the agent - can be visible at the same time.

Inline editing

Double-clicking any editable element lets you modify it directly in the browser. Text elements like headings and paragraphs open for text editing, inputs let you change their value, and checkboxes toggle on double-click:

Pressing c on a selected element opens an inline editor for its Tailwind classes:

Tables get special treatment - selecting a table cell shows a floating toolbar with controls for adding and removing rows and columns:

Token efficiency

This is where Aceto differs from other AI-driven UI tools. The agent does not need to read and parse the full HTML to understand what you mean. You point at an element in the browser, the agent gets a precise selector. Write tools use the current selection by default - one tool call, no roundtrip.

Component libraries

Aceto supports adding component libraries via the CLI. DaisyUI works out of the box with Tailwind v4:

aceto add daisyui

More features

• Yank and paste - press y to copy a selected element, p to paste it after another selection
• Paste images - Ctrl+V with a selection inserts an image instantly; without selection, it stages the image for agent-driven placement
• Asset picker - press a to browse and reuse previously pasted images
• Slash commands - type /list in an empty element to create lists
• Content shortcuts - type [] or [x] in a cell to insert a checkbox
• Element defaults - define default Tailwind classes for generated elements via aceto.defaults.json
• Screenshots - the agent captures full-page or element-level screenshots via get_screenshot()
• Live reload - DOM morphing keeps scroll position and selection state without page reload flicker

Getting started

Aceto requires Bun:

bun install -g github:alexzeitler/aceto

Create a new project and start the dev server:

mkdir my-mockup && cd my-mockup
aceto init
aceto dev

Then add it as an MCP server to Claude Code:

claude mcp add aceto -s user --transport http http://localhost:3000/mcp

That is all you need. Tell the agent what you want, point at elements to refine, and iterate until the mockup looks right.

What Aceto does not do

• No build system - the output is a plain HTML file you can read with cat
• No framework - Tailwind v4 via CDN, optionally DaisyUI or Flowbite
• No abstraction layer - real HTML, no component model

The source code is on GitHub.