Screenshot Spec

A screenshot spec is a living Notion page or Markdown file where every section opens with a captured interface from a real product. The image is not decoration. It is the spec. You grab a clean shot from Linear inbox in 2025, from Vercel deployments, from Stripe billing, or from Arc commands. You write one sentence that explains why you saved it. You feed the image to Claude or Gemini and extract the exact tokens, the 24 pixel section padding, the 400 weight on body copy, the 280 millisecond ease-out on the toggle. You add your constraint list limited to five bullets max. The Playwright script that will recapture the reference next month sits at the bottom. Engineers open the page, see the source, read the model output, check your rules, and build. The old loop of vague text and endless clarification disappears. The screenshot carries structure, hierarchy, tone, and motion in one asset that no paragraph ever matched.

A screenshot spec is not a Figma file packed with variants and redlines. It is not a moodboard of pretty Pinterest images without captions or rules. It is not a 15 page requirements document stuffed with words like premium and delightful. It is not a static PDF that rots the day the referenced product ships an update. It is not a green light to copy. The capture-caption-classify-recombine loop exists to force synthesis. Drop any of those steps and you either create an unsearchable mess or you ship someone else's work with new colors.

We built the new pricing page at our SaaS company in Q3 2025 using this exact format. The goal was a three-tier layout that felt generous without destroying margins. I used Playwright to capture Stripe's annual toggle at 1440px, Linear's billing screen from the prior month, Vercel's plans page, and Raycast's subscription modal. Each file followed the same naming pattern with date and component. Sidecar text files held the captions. One read Linear surfaces the yearly savings in a desaturated pill with 14 pixel Inter at 450 weight and moves the entire table height in 200 milliseconds to avoid layout shift. I pasted all four images into Claude, asked for pattern classification across layout type and motion, and received clean JSON with HSL values, a 4 pixel base grid, shadow presets, and confidence scores. The Notion spec opened every section with the full screenshot, the caption I wrote, the token JSON, my five constraints including never more than two CTAs per tier and always show VAT toggle on EU traffic, and the live Playwright link. Cursor consumed the page and images in one session. Frontend pushed the result to production with one adjustment for our brand blue. Total revision cycles dropped from four to zero.

Use a screenshot spec when your team already lives in Cursor, Claude, or v0 and ships multiple times per week. Use it for product surfaces where the industry has solved the problem dozens of times and your job is intelligent recombination. Use it for handoff to engineering teams that value visible references over wall texts. Skip it when creating brand new categories with no direct analogs. Skip it for marketing pages where voice and storytelling matter more than component precision. Skip it if your team still relies on native OS screenshots and stores untitled PNGs on the desktop. Never use it as a replacement for taste. The references are study material. Your judgment on what to combine and what to break remains the only defensible advantage.

The methodology is rigid. Capture with identical tools, viewports, and crops so the library stays machine-readable. Caption every shot yourself because only you know the exact reason it caught your eye. Classify against the same fifteen buckets you actually use: hero, pricing, empty-state, onboarding, motion, footer. Recombine three to five shots in a single prompt and demand the model synthesize instead of replicate. That last step is what keeps the work legal and original. When the distance between your library and your shipped product is obvious, you did it right. We ran this process on an empty state last quarter using Superhuman zero inbox, Figma new file screen, Linear no results state, and a Google Lens shot of a physical product box. Gemini spotted the 1.7x white space pattern. The resulting spec delivered components that lifted completion rate 40 percent.

Teams that adopt screenshot specs stop arguing about whether something feels right. They point at the reference, the caption, the tokens, and the constraints. Critique becomes surgical. Spec writing time falls by seventy percent. Revision cycles get cut in half. The tools will keep improving. Manual CleanShot X captures become automated Playwright fleets that refresh competitor libraries every night. Vector databases will replace folders. The methodology stays. The screenshots become the new sketchbook. Your judgment on which patterns to save and which rules to break is still the only thing that matters.

Screenshot specs turn every great product on the internet into raw material for your own work while keeping your taste firmly in the driver seat.