Design Prompt Builder

About

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.