A structured protocol for communicating visual context to Claude Code using numbered screenshots, master boards, and precise measurements.
v1.1 — February 2026 — JB Cloud
Claude Code can read images directly. One annotated screenshot with pixel measurements is worth more than five paragraphs of description. This system formalizes how to capture, organize, number, and reference visual context so every instruction is unambiguous.
Specificity beats volume. A numbered, annotated screenshot with exact measurements translates directly to code. No interpretation, no back-and-forth.
Element inspector, computed styles, box model visualization, node screenshots, forced element states, CSS Overview, grid/flexbox overlays, device emulation.
On-page spacing overlays, alignment guides, font inspection, color picking. Drag to measure distances between any elements.
Draw rulers directly on any page. Measure arbitrary distances between any two points in pixels.
Overlay a design mockup on top of a live page at adjustable opacity. Pixel-perfect comparison between design and implementation.
Gold standard Mac screenshot tool. Scrolling capture, instant annotation (arrows, numbered badges, blur, measurements), pin as floating window, auto-save to folder.
Native capture with Cmd+Shift+4 then annotate in Preview with markup tools. Slower than CleanShot but zero cost.
Infinite canvas for composing master boards. Drag in screenshots, add numbered labels, draw arrows, group sections. Export whole frame as single PNG.
Already on Mac, iPad, and iPhone. Infinite canvas, paste screenshots, add text annotations. Less precise than Figma but zero setup.
Rendering tab: emulate vision deficiencies (protanopia, deuteranopia, tritanopia, achromatopsia). Color picker: shows WCAG contrast ratio for any text. Lighthouse: full accessibility audit with score. CSS Overview: color inventory of every color in use on the page.
A single canvas containing everything needed for a feature or fix session. Every section is numbered for unambiguous reference during the conversation.
Apple engineers document every UI state, not just the happy path. Use DevTools to force element states: right-click element in inspector → Force state → select :hover, :active, :focus, :focus-visible.
| # | State | How to Capture |
|---|---|---|
| 1 | Default | Normal page load |
| 2 | Hover | Force :hover in DevTools |
| 3 | Active / Pressed | Force :active |
| 4 | Focused | Force :focus-visible or Tab to element |
| 5 | Loading | Throttle network in DevTools, capture mid-load |
| 6 | Empty | Clear data source or mock empty response |
| 7 | Error | Block network request or mock error |
| 8 | Disabled | Set attribute in Elements panel |
| 9 | Overflow | Inject long text via Elements panel |
| 10 | Dark Mode | Toggle in DevTools Rendering → prefers-color-scheme |
Use the DevTools device toolbar (Cmd+Shift+M) to capture at each critical width. Label screenshots with the viewport width.
| Label | Width | Device |
|---|---|---|
| #A | 375px | iPhone SE / mini |
| #B | 390px | iPhone standard |
| #C | 768px | iPad portrait |
| #D | 1024px | Small laptop / iPad landscape |
| #E | 1440px | Standard desktop |
| #F | 1920px | External monitor |
Follow these steps every time you prepare a visual brief for a Claude Code session.
~/briefs/project/feature/raw/.~/briefs/project/feature/board.png."Read ~/briefs/project/feature/board.png — work items #1 through #6 in order."Each project gets a folder. Each feature or fix gets a subfolder with a board.png and a raw/ directory for the individual captures before composition.
Use these phrases during a session to reference your board. Numbered items create a shared, precise vocabulary.
For small fixes where a full master board is overkill, use the 30-second version:
"Read ~/Desktop/Screenshot.png — the arrow shows where spacing is off, should be 16px."| Action | How |
|---|---|
| Inspect element | Cmd+Shift+C then click |
| Device toolbar | Cmd+Shift+M |
| Capture node screenshot | Right-click element in inspector → "Capture node screenshot" |
| Capture full page | Cmd+Shift+P → type "screenshot" → "Capture full size screenshot" |
| Force element state | Right-click element → Force state → :hover / :active / :focus |
| CSS Overview | More tools → CSS Overview → Capture |
| Emulate vision deficiency | Rendering tab → "Emulate vision deficiencies" |
| Toggle dark mode | Rendering tab → prefers-color-scheme: dark |
| Throttle network | Network tab → Throttling dropdown → Slow 3G |
| View computed styles | Elements → Computed tab (shows resolved values + box model) |
| Grid/Flexbox overlay | Click badge next to display: grid or flex in Styles |
The /brief skill automates the capture-compose-export pipeline. It uses Puppeteer to capture multi-breakpoint screenshots, assembles them into a self-contained HTML board, and exports the board as a single PNG.
| Command | Action |
|---|---|
| /brief [project] [feature] [url] | Full pipeline: init + capture + compose + export |
| /brief:init [project] [feature] | Create ~/briefs/{project}/{feature}/raw/ |
| /brief:capture [url] | Capture screenshots at all breakpoints |
| /brief:compose | Generate board.html from captures |
| /brief:export | Convert board.html to board.png |
| Flag | Description |
|---|---|
| --selector | CSS selector to screenshot instead of full page |
| --cookies | Path to JSON file with cookies to inject |
| --wait | Extra wait time in ms after page load |
| --dark | Emulate prefers-color-scheme: dark |
| --breakpoints | Comma-separated labels (e.g., A,C,E) |
/brief vaporforge prompt-width-fix https://vaporforge.dev
This runs the full pipeline:
~/briefs/vaporforge/prompt-width-fix/raw/manifest.json to raw/.board.html. Narrow widths paired two-per-row, wide widths full-width.board.html at 2400px and exports as board.png.Automation captures static page states only. For hover/active/focus states, annotations with measurements, before/after comparisons, or complex interactions, use the manual workflow from Sections 02-06 above.
Breakpoints and export settings live in ~/.claude/skills/brief/config.json. Add or remove breakpoints, change DPR, or adjust the pair threshold (default 800px) in one place.