Design Prompt Builder

Capture UI elements and build Claude prompts

Instead of writing "the blue button in the top-right of the dashboard card," you click it — and get structured context with HTML, selectors, computed styles, and page context, ready to paste. ── ELEMENT PICKER (Alt+Shift+P) ── Click any element on any webpage to capture it. Gets serialized with ARIA role, label, semantic HTML snippet (CSS-in-JS hashes stripped), unique selector, and computed styles. Works inside Storybook iframes. ── FREE-FORM PROMPT EDITOR ── Write natural language with inline element references: "Move [el-1] closer to [el-2] and make [el-3] red" Picking an element inserts a token at your cursor position. Each reference expands to full HTML + style context when copied. ── DOM EDITOR (Alt+Shift+E) ── Live-edit the page to show AI exactly what you mean: • Text edit — click to edit text content inline • Resize — drag corner handle to change dimensions • Move — pick up any element and place it anywhere in the DOM, even in a different container • Style controls — visual panel for flex-direction, justify-content, align-items, gap, margin, and padding with live preview ── ONE-CLICK COPY ── All captured elements and DOM edits assemble into a structured prompt with full HTML context, styles, and a clear implementation instruction. Built for frontend developers and designers who use AI coding assistants and need to communicate visual changes precisely — without writing long manual descriptions.