Everything in SpecShot

From a brief to a build-ready design, in one workspace.

Projects, an AI agent that builds real designs, a review portal your clients actually use, and the capture-to-prompt tools that started it.

Free forever to start. No card. Designs and captures stored as data, never as a running site.

One workspace for the whole path, from a design you like to a site your client signs off on.

CaptureBriefBuildReviewShip
Projects

Every build starts with a project brief

Open a project, write the brief, and set the goal and audience. Add the pages the site needs, and each page becomes its own board the agent files work under.

  • A brief that pins down the goal, the audience, and the brand.
  • Brand tokens for color, type, and spacing in one place.
  • Pages laid out as boards, one per screen you plan to ship.
  • Reference captures and inspiration collected next to the brief.
specshot.app/projects/acme-rebrand
Brief
Acme rebrand marketing site

Goal: book more demos. Audience: RevOps leads at mid-market SaaS.

Goal setAudience#4f46e5Inter
Pages
Home
Pricing
Features
Contact
Connect your agent

Point your AI agent at the whole project over MCP

SpecShot speaks MCP, so your agent reads the project directly. Connect the hosted endpoint or run the @scayver/specshot-mcp-server npm package, and it sees the brief, the brand, the pages, and every capture.

  • Use the hosted MCP endpoint or the npm package.
  • Works with MCP-capable agents like Claude and Cursor.
  • The agent reads the brief, brand tokens, pages, and captures.
  • No copy-paste. The context stays in sync with the project.
Connect over MCP
# Hosted endpoint
Add the SpecShot MCP server to your agent.
# or run the npm package
npx @scayver/specshot-mcp-server
ClaudeCursorAny MCP agent
Agent build

Watch it build real, multi-page designs onto a live canvas

The agent builds full-fidelity designs and files each one under its page. Every run lands on the build canvas next to the last, so you compare versions side by side and keep the one that works.

  • Real, full designs, not a single screenshot or a rough sketch.
  • Each design filed under the page it belongs to.
  • Versions stack on the canvas for a side-by-side compare.
  • Iterate with the agent until a page is right.
specshot.app/build
Page: Home3 versions
v1
v2
v3Latest
Client review

Your client reviews it section by section

Share a design through the review portal. Your client opens it from a link, pins feedback on the exact section they mean, and the thread flows straight back to the agent for the next pass.

  • A clean review portal your client opens from a share link.
  • Feedback pinned to the exact section, not a vague email.
  • Comments route back to the agent for the next version.
  • Share links on the Pro and Agency plans.
specshot.app/review/acme
1
2
1

Make the headline punchier and lead with the outcome.

Client feedback

Sent to agent
Handoff

Hand off a build-ready spec, not a screenshot

When a page is approved, SpecShot hands off a spec a developer or an agent can build from. Sections carry stable ids, real copy, and brand tokens, with a ready-to-paste build instruction on top.

  • Stable section ids so nothing gets renamed in translation.
  • Real copy and brand tokens baked into the spec.
  • A ready-to-paste build instruction for your agent.
  • Export the whole thing as Markdown or JSON.
specshot.app/handoff/acme
Build-ready spec
#hero-01Herocopy + tokens
#pricing-03Pricingcopy + tokens
#footer-07Footercopy + tokens
Generated prompt

Build these sections in order.

Use the brand tokens and the approved copy.

Match version v3 on the canvas.

Where it started

The capture tools that started it all.

SpecShot began as a way to capture a section and write a great prompt. That still ships, and it feeds every project.

example.com/pricing
pricing1
2tokens
#2563eb16/24/32grid-cols-3gap-6
3layout

max-w-6xl, 3-col grid, 1.5rem gap.

5responsive

stacks to a single column on mobile.

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.

Prompt targets

One capture, the right prompt for every builder.

Turn any capture into a prompt tuned to your target tool, pick a quality level, then copy it, export it, or drop it into the project. Every prompt keeps a version history.

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

Build a hero with a centered headline,

subtext, and two CTAs. Primary blue

(#2563eb), flex layout, 1.5rem gap.

And more

A complete toolkit.

The smaller things that add up to a serious workflow.

Semantic search

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

Custom templates

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

Section-type detection

SpecShot infers whether a section is a hero, pricing, FAQ, or footer, so the prompt frames it right.

White-label exports

The Agency plan drops SpecShot branding and applies your studio's identity to what clients see.

Team seats

Invite up to three members on Pro or fifteen on Agency, all sharing one library.

Manual upload

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

Reuse tracking

See which captures and prompts get reused most, so your best work surfaces on its own.

Project analytics

Watch captures, prompts, and versions add up across every project in one view.

Ready to brief your first project?

Free forever to start. No credit card required.