Design Jam

Description

Annotate any web page and export structured prompts for AI coding agents. annotate the browser. prompt the AI. Design Jam lets you pin comments directly on page elements and export them as structured prompts for AI coding agents like Claude Code, Cursor, or Copilot. No account. No cloud. Everything runs locally in your browser. // how it works 1. Click any element on a page to drop a comment pin 2. Describe the change you want — type, dictate, or paste an image 3. Hit export — a structured markdown prompt lands in your clipboard 4. Paste it into your AI coding agent // annotate mode — free Pin comments on live page elements. Design Jam reads CSS properties, detects React and Vue components, and builds a prompt your AI actually understands. → Click-to-pin on any DOM element → Speech-to-text input → Image paste (Ctrl+V) → CSS inspector panel → Structured markdown export → React & Vue component detection // jam mode Capture any page section as an editable ASCII wireframe. Rearrange the layout with box-drawing tools. Export a text-based layout diff your agent can apply. → DOM-to-ASCII flattening → Box, line & text tools → Select, move, resize, duplicate → Freehand character painting → Layout diff on export → Element-to-selector mapping // why text Everything Design Jam produces is plain text. Comments become markdown. Layouts become ASCII. Prompts fit in a clipboard. Text is universal. Text is diffable. Text is what LLMs understand natively. No screenshots to misinterpret. No figma links to parse. Just structured intent, straight from the browser. // details — Works on any page: localhost, staging, production — Keyboard shortcut: Alt+Shift+D — Dark monochrome UI, stays out of your way — Shadow DOM isolation — won't break your page styles — All data stored locally in your browser (IndexedDB) — No tracking, no analytics, no external requests — Manifest V3 // who it's for Designers reviewing dev server output. Frontend devs annotating their own UI. Anyone feeding visual context to AI coding tools. If you've ever taken a screenshot, opened a chat, and typed "make the button bigger" — this replaces that entire workflow. Built by a designer who got tired of explaining CSS changes in plain english.

Details & SEO