Spec Sketch

About

Numbered badges and annotations on UI, with one-click full/viewport screenshots.
Spec Sketch lets you click elements on a page to overlay outlines and numbered badges, then add comments and other annotations fast. Appearance (color, shape, size, label format), visibility, position, groups, and comments are all edited from the side panel—clear and immediate, with changes applied instantly. It supports full-page and viewport captures, exporting images with annotations baked in for quick sharing across your workflow.

🧩 What you can do
• 🖱 Click to select: pick an element to show an outline + numbered badge (click again to unselect)
• 🛠 Side-panel edits: adjust color / shape / size / label format / visibility / position / groups / comments in one place
• ↕ Reorder: tidy up the sequence; collapse groups to focus
• 📸 Capture: choose Full Page or Viewport; export PNG/JPEG with quality and scale options
• 💾 Auto-restore: page-specific annotations are saved and redrawn on revisit
• 🎨 Theme: Light / Dark / Device (follows OS/browser setting)

🎯 Primary use cases
• 📐 Design reviews: make feedback precise with numbered callouts
• ✅ UAT: embed annotations in each step’s screenshot to reduce misses
• 🐞 Bug reports: share “what you see” evidence aligned with repro steps
• 📄 UI specs: pair element definitions with comments for efficient reviews

📦 Import / Export (JSON)
• Export/import annotations per page
• During import, anchors ({ kind, version, value }) are matched; duplicates are safely skipped, and the page’s visual settings take precedence

🔐 Permissions & data (highlights)
• Storage: uses chrome.storage.local; data stays on device, not sent externally
• Output: generated images are saved via the Downloads API

⚠ Support & limitations
• Not available on internal pages like chrome://
• Very long pages or image-heavy pages may occasionally fail due to memory limits
• Large DOM changes can break matches with past selections