Visual Bridge Between You and AI Code Editors
Show AI exactly what you want to change
Website
English | 简体中文 | 日本語 | 한국어 | Español | Français | Deutsch
DOMPrompter is a macOS desktop app that lets you visually select elements, tweak CSS properties, and generate structured AI prompts — so tools like Cursor, Claude Code, Codex, and more can modify your source code accurately.
When fine-tuning a webpage with AI, screenshots never capture the right element. AI can't pinpoint "which element needs what change". You end up going back and forth, describing layout tweaks in words that get lost in translation.
DOMPrompter solves this — precise selection + precise description = precise code changes.
| Step | Description |
|---|---|
| 1 | Select — Click any element on your page to highlight it with a precise CSS selector |
| 2 | Tweak — Adjust CSS properties (width, height, padding, margin) visually in real time |
| 3 | Annotate — Add text tags describing what you want ("button too dark", "spacing too wide") |
| 4 | Generate — DOMPrompter merges selector + style diffs + annotations into a structured AI prompt |
| 5 | Hand Off — Paste into Cursor, Claude Code, Codex or any AI assistant for accurate code changes |
- Precise Element Selection — Click-to-select with CSS selector auto-identification
- Style Diff Tracking — Every change recorded as before/after diff (e.g.,
width: 200px → 300px) - Natural Language Tags — Tag elements with notes so AI understands your design intent
- Instant Feedback — Floating action buttons modify DOM directly, WYSIWYG
- Undo & Redo — Full operation history with
Cmd+Z/Cmd+Shift+Z - Local-First — No data collection, everything stays on your device
┌──────────────────────────────────┐
│ Target Page (Browser) │
│ └─ Injected Overlay Layer │
│ ├─ Selection highlight │
│ ├─ Floating action buttons │
│ └─ Tag badges │
└──────────┬───────────────────────┘
│ Chrome DevTools Protocol
▼
┌──────────────────────────────────┐
│ Core Engine │
│ ├─ CDP Client │
│ ├─ Inspector Service │
│ └─ Element Details Resolver │
└──────────┬───────────────────────┘
│ Electron IPC
▼
┌──────────────────────────────────┐
│ App UI (React) │
│ ├─ Properties Workbench │
│ ├─ Style Binding & Undo/Redo │
│ └─ Prompt Generator │
└──────────────────────────────────┘
DOMPrompter generates prompts compatible with any AI coding assistant:
Claude Code · Cursor · Codex · Windsurf · GitHub Copilot · Gemini · Cline · Trae · AmpCode · Kiro · Roo Code · and more
All rights reserved. © 2026 DOMPrompter.