Hyper Spec

Select elements on any live page, note what to change, and export a precise spec for Claude Code, Codex, or your team.

Turn any live page into a spec your AI can build from. Stop describing UI in words and screenshots. Hyper Spec lets you click the exact element on a live page, write what should change, and export a clean Markdown spec — selector, computed styles, a marked screenshot, and your notes — that Claude Code, Codex, or a teammate can act on accurately. Built for designers, product managers, and front-end developers. SELECT • Click any element; a label shows its name and size. Use ↑/↓ to pick the parent or child. • Readable names such as Button · “Reply”, or the React/Vue component name when available. • Capture the visible page when an issue spans the whole screen. ANNOTATE • Type your note right beside the element, with lists, bold, code, and links styled as you type. • Set priority, add quick tags, and attach Figma or other design links. • Keep going across pages and tabs; findings are grouped by page with thumbnails. EXPORT • Copy a Markdown spec to paste straight into Claude Code, Codex, Linear, or Slack. • Or download a ZIP with the Markdown spec, structured JSON, marked screenshots, and close-ups. • Keyboard-first: S select, P capture page, ⌘/Ctrl+Enter save, ⌘/Ctrl+Z undo, E export. PRIVATE BY DESIGN Everything stays in browser storage on your device. No account, analytics, ads, tracking, or automatic AI requests. You choose what to share. WHAT TO EXPECT Screenshots capture the visible viewport, not a stitched full page. Component names are best-effort. Browser-protected pages, cross-origin iframes, closed shadow roots, and canvas internals can't be inspected. Made by Madhav Nair — madhavnair.in. Screenshots show the extension on madhavnair.in. Hyper Spec is an independent tool and is not affiliated with Anthropic, OpenAI, Linear, Figma, or Google. Support: mad7droid@gmail.com