Features

Everything between a design you like and a brief that builds.

SpecShot captures the full context of any section and turns it into precise, builder-specific prompts. It adds the handoff, search, and collaboration tooling a real team needs.

CapturePrompt StudioHandoffsSemantic searchShare and review
Capture

Capture the context, not just a screenshot

The Chrome extension lets you hover, outline, and click any section. SpecShot records the visible screenshot plus the structured details an AI agent needs, and never stores runnable code.

  • Cropped screenshot of the exact section.
  • Type, spacing and color scales as design tokens.
  • Layout, container width and responsive notes.
  • Auto-detected section type, such as hero, pricing, or FAQ.
example.com
Captured section
hero
#2563eb16/24/32flexHero
Generated prompt for Cursor

Build a hero with a centered headline,

subtext, and two CTAs. Primary blue

(#2563eb), flex layout, 24px gap,

and 32px section padding.

Prompt Studio

The right prompt for every AI builder

Generate a prompt tuned to your target tool, choose a quality level, then copy, export or hand it off. Each prompt keeps a version history so you can iterate without losing the good one.

  • 15 builder targets, including Next, React, Astro, Svelte, Vue, Webflow, Framer, WordPress, Cursor, Claude Code, and EtchWP.
  • Quality levels from quick draft to production.
  • Markdown and JSON export with full capture data.
  • Version history and reuse tracking.
Prompt target
Generated prompt for Cursor

Build a hero with a centered headline,

subtext, and two CTAs. Primary blue

(#2563eb), flex layout, 24px gap.

Handoffs

From capture to your team's workflow

A prompt is not useful stuck in a tab. Push it straight into the tools your team already runs, or fire a webhook into anything else.

  • Create a GitHub issue from a prompt.
  • Send to Linear with one click.
  • Custom signed webhooks.
  • Share links with client approve and request changes.
specshot.app/handoff
GitHub issueissue #128 created
LinearENG-42 added to backlog
Signed webhookPOST 200 delivered
Client share linkapprove / request changes
example.com/pricing
pricing1
2tokens
#2563eb16/24/32grid-cols-3gap-6
3layout

max-w-6xl, 3-col grid, 24px gap.

5responsive

stacks to 1-col under 640px.

4section type
Pricing Section
Capture anatomy

Every capture is a labeled specimen

SpecShot does not save a flat picture. It breaks a section into the parts an AI builder needs, then stores each one as data.

  • 1
    Screenshot

    Cropped image of the exact section you selected.

  • 2
    Design tokens

    Type scale, spacing, and color values pulled from the DOM.

  • 3
    Layout

    Container width, flex and grid structure, and gaps.

  • 4
    Section type

    Auto-classified as hero, pricing, FAQ, footer, and more.

  • 5
    Responsive notes

    Breakpoint hints so the prompt scales the way the original does.

And more

A complete toolkit

The smaller things that add up to a serious workflow.

Custom templates

Author your own prompt templates with a live preview and reuse them across captures.

Semantic search

Bring an OpenAI key and search your library by meaning, not just keywords.

Client share links

Read-only branded viewer with approve and request changes per capture.

White-label exports

Agency tier drops SpecShot branding and applies your studio's identity.

Team workspaces

Invite members, organize by project and client folder, share one library.

Portable data

Export any capture or prompt as Markdown or JSON. Your context, your files.

Reuse tracking

See which captures and prompts get reused most so your best work surfaces.

Manual upload

No extension handy? Upload a screenshot in the portal and prompt from it.

GitHubLinearWebhooks

Ready to capture your first section?

Free forever to start. No credit card required.