Description
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.
Reviews
Loading reviews...
Permissions (3)
Permissions
activeTabℹ Can access the current tab when you click the extension scriptingℹ Can inject scripts into web pages storageℹ Can store data locally in your browser
Details
| Version | 0.1.1 |
| Updated | Mar 1, 2026 |
| Size | 107KiB |
| First Seen | Mar 24, 2026 |
Popular in developer
GoFullPage - Full Page Screen Capture
by GoFullPage
10M
★ 4.89
developer
10M
★ 4.89
developer
TouchEn PC보안 확장
by 라온시큐어
8M
★ 1.33
developer
8M
★ 1.33
developer
React Developer Tools
by Meta
5M
★ 3.95
developer
5M
★ 3.95
developer
Meta Pixel Helper
by Meta
4M
★ 3.90
developer
4M
★ 3.90
developer
ColorZilla
by colorzilla.com
4M
★ 4.59
developer
4M
★ 4.59
developer
Popular Extensions
Adobe Acrobat: PDF edit, convert, sign tools
by Adobe Inc.
322M
★ 4.40
workflow
322M
★ 4.40
workflow
AdBlock — block ads across the web
by AdBlock
62M
★ 4.48
workflow
62M
★ 4.48
workflow
迅雷下载支持
by Shenzhen Xunlei Network Technology Co., Ltd.
59M
★ 2.77
workflow
59M
★ 2.77
workflow
Grammarly: AI Writing Assistant and Grammar Checker App
by Grammarly
42M
★ 4.50
communication
42M
★ 4.50
communication
Adblock Plus - free ad blocker
by eyeo GmbH
40M
★ 4.39
workflow
40M
★ 4.39
workflow