Show AI exactly what to change — down to the pixel.
The macOS visual bridge between your browser and any AI code editor — click an element, tweak its style, generate a prompt Cursor / Claude Code / Codex can execute.
If DOMPrompter cuts your back-and-forth with AI editors, please ⭐ star this repo — it helps other vibe-coders find it.
English | 简体中文 | 日本語 | 한국어 | Español | Français | Deutsch
DOMPrompter is a macOS desktop app that turns any webpage element into a ready-to-run AI coding prompt. Click an element, tweak its CSS visually, drop in a plain-language annotation — DOMPrompter packages the exact selector + style diff + intent into a single prompt that Cursor, Claude Code, Codex, Windsurf, or any AI coding assistant can execute without guessing.
Screenshots don't tell AI which element. Words don't tell AI how much. DOMPrompter tells it both — precisely.
When fine-tuning a page with AI, the loop usually looks like this:
- You take a screenshot
- AI guesses which element you meant, often wrong
- You describe the change in words ("make it tighter, the one on the right…")
- AI over-corrects or mis-targets — you try again
- Repeat
DOMPrompter cuts the loop to one pass: precise selection + precise style diff + plain-language intent = precise code change, first try.
Click any element inside the embedded browser. DOMPrompter captures the live CSS selector, the computed style, and the node's position in the DOM. The AI gets the exact target — no "the third card from the left" guessing.
Adjust width / height / padding / margin / color / font in a properties panel. Every change is recorded as a before/after diff (width: 200px → 300px). The prompt you send carries the diff, not a vague "make it bigger".
Drop text tags on elements — "button too dark", "spacing too wide", "make this feel premium". Tags ride alongside the style diff so the AI understands both what you changed and why.
DOMPrompter merges selector + style diff + annotations + surrounding context into a structured prompt optimized for code-editing AIs. Copy to clipboard, paste into Cursor / Claude Code / Codex / Windsurf / Copilot / Gemini / Cline / Trae / AmpCode / Kiro / Roo Code — the prompt is model-agnostic.
Cmd+Z / Cmd+Shift+Z through every style change and annotation. Experiment freely; nothing is committed to your source until the AI applies the generated prompt.
DOMPrompter runs entirely on your Mac. No cloud relay, no telemetry, no account. Your pages, selectors, and prompts never leave your device.
Target webpage (embedded Chromium)
↕ Chrome DevTools Protocol — live selectors, computed styles, DOM paths
DOMPrompter Core Engine
├─ CDP Client
├─ Inspector Service
└─ Element Details Resolver
↕ Electron IPC
DOMPrompter App (React UI)
├─ Properties Workbench — visual style tweaks, recorded as diffs
├─ Style Binding & Undo/Redo — full history
└─ Prompt Generator — selector + diff + annotations → AI prompt
↓ copy to clipboard
Any AI code editor (Cursor / Claude Code / Codex / Windsurf / Copilot / …)
↓ paste → apply
Your source code — pixel-precise change, first try
- Install — Download from the Mac App Store (Apple Silicon M1–M5).
- Open your local site — Paste a
localhost:3000/127.0.0.1URL into DOMPrompter's address bar (or open a staging URL). - Select + tweak — Click an element, adjust styles in the Properties panel, drop an annotation tag.
- Generate + paste — Click Generate Prompt, paste into Cursor / Claude Code / Codex / your AI of choice. Done.
DOMPrompter's generated prompts are compatible with every major AI coding assistant:
Claude Code · Cursor · Codex · Windsurf · GitHub Copilot · Gemini · Cline · Trae · AmpCode · Kiro · Roo Code · and anything else that takes a text prompt.
| Screenshot + description | Browser DevTools → copy selector | Generic "fix this CSS" prompt | DOMPrompter | |
|---|---|---|---|---|
| Element targeting | AI guesses from pixels | Manual copy each time | No targeting at all | Live CSS selector captured on click |
| Style change intent | Vague words | You diff by hand | Vague words | Before/after style diff auto-recorded |
| Context | Just the cropped image | Selector only | Just the free-form prompt | Selector + diff + annotation + DOM path |
| Iteration speed | High — many back-and-forths | Medium — manual every round | High — vague → wrong → retry | Low — one pass often lands |
| AI compatibility | Any (but noisy) | Any (but incomplete) | Any (but imprecise) | Any (optimized payload) |
| Local-first | — | — | — | ✅ 100% local |
What makes DOMPrompter unique: it's the only tool that captures selector + visual diff + intent in one structured payload, ready for any AI editor. No screenshots to interpret, no manual selector copying, no vague prose.
- Design polish — "this card feels heavy" → exact padding/shadow diff → AI tightens it in code
- Responsive tweaks — live-adjust at a breakpoint, send the diff to AI, skip the manual media-query hunt
- Onboarding a new codebase — click the element, let DOMPrompter show you its selector chain + computed styles
- AI pair programming — give Cursor / Claude Code a precise payload every time you reach into visual design
- Website: hooosberg.github.io/DOMPrompter
- Mac App Store: Download DOMPrompter
- Support: Support Center
- Privacy Policy: Privacy Policy
- Terms of Service: Terms of Service
- GitHub: hooosberg/DOMPrompter
- Email: zikedece@proton.me
Built by hooosberg:
- AgentLimb — teach AI to control your browser
- BeRaw — Behance raw-image grabber
- Packpour — App Store Connect locale filler
- WitNote — local-first AI writing companion
- GlotShot — perfect App Store preview images
- TrekReel — outdoor trails, cinematic reels
- UIXskills — AI → JSON → Whiteboard → UI
All rights reserved. Copyright © 2026 DOMPrompter.