Domotion

Using Domotion with AI

How to drive captures from Claude Code, Cursor, or any LLM agent.

Domotion fits naturally into AI-driven workflows. The CLI is small enough to fit in a system prompt, the JSON config is easy for an LLM to author, and the SVG output is text — so an agent can read it, diff it, and iterate without leaving the editor.

Cheat sheet for the agent

Drop this into your AI's CLAUDE.md / .cursorrules / system prompt to give it the minimum it needs:

## Capturing UI as SVG with Domotion

The `domotion` CLI renders HTML/CSS to a self-contained, scalable SVG.

Single capture:
  domotion capture <input> -o out.svg [--width N] [--height N]
                                       [--selector ".foo"] [--clip x,y,w,h]
                                       [--scroll-to x,y] [--wait-for ".ready"]
                                       [--scroll <pattern>] [--scroll-speed N]
                                       [--scroll-selector .panel] [--no-prescroll]
                                       [--optimize] [--warnings]

  <input> is a URL, a path to an HTML file, or "-" for stdin.

Multi-frame animation:
  domotion animate config.json
  Config schema: { width, height, output, optimize?, frames: [{
    input, duration, transition: { type, duration },
    waitFor?, scroll?, actions?: [
      { type: "click"|"fill"|"press"|"hover"|"scroll"|"wait", ... }
    ],
    overlays?: [...]
  }] }
  Transition types: "crossfade" | "push-left" | "scroll".

Run `domotion --help` for the full reference.

Common patterns

Generate the HTML, then capture it

Have the AI write the HTML for the demo, then run capture. This works well because the AI can iterate on the source — rerunning the command and opening the SVG in a browser preview is the feedback loop.

# 1. Agent writes demo.html
# 2. Agent runs:
domotion capture demo.html --width 800 --height 400 --optimize -o demo.svg
# 3. Agent reads demo.svg or opens it in a preview to verify

Capture an existing site

You don't need source access. Point the agent at a URL:

domotion capture https://docs.example.com/getting-started \
  --width 1200 --selector ".content" --optimize -o doc.svg

Combined with a screenshot diff or visual inspection, this is a useful loop for "make my docs look like that one".

Iterate on an animation config

For multi-frame animations, the AI authors the JSON config rather than a full TypeScript script. Re-running domotion animate is fast and the diff between iterations is small.

# Agent writes / edits demo.json, then:
domotion animate demo.json
# Agent inspects steps.svg, adjusts duration / transition / actions, repeats.

Tips for prompting

  • Show one example HTML file in the prompt. A 20-line snippet of dark-mode HTML is enough for the agent to match your house style across frames.
  • Be explicit about the output dimensions. "800×400 for a marketing card" or "390×844 for a phone-style demo" stops the agent guessing.
  • Ask for --warnings on the first run so the agent sees CSS that didn't round-trip and can adjust the source.
  • Prefer the CLI over the JS API for AI workflows — the JSON config is easier to read in a diff than a hand-rolled TypeScript loop.

What Domotion can't (yet) do well from a prompt

  • Custom interaction loops. The action vocabulary covers click / fill / press / hover / scroll / wait. Anything more (drag-and-drop, multi-step async flows) needs the JS API.
  • CSS that falls back to raster. backdrop-filter, conic gradients, complex clip-path: path() — see CSS Support. The agent should learn to avoid these in generated HTML when possible.
  • Pixel-exact diff iteration. The output is text-diffable but small layout changes can produce large textual diffs. For visual iteration, screenshot the SVG between runs.

See also