screenshot-intake

Screenshot Intake — Structured Discovery

Purpose

Gather everything needed to build a React/Vue/Svelte/React Native app from screenshots or a live URL in a single structured pass. Captures pages, analyzes them with Claude vision, asks the user only what cannot be derived, and writes .claude/plans/build-spec.json that downstream phases consume without re-asking questions.

When to Use

• First phase of the /build-from-screenshot pipeline
• A user provides a URL and says "build something like this" or "clone this site"
• A user provides screenshot image paths and wants to build from them
• No Figma or Canva source is available, only screenshots or live pages

Inputs

• One of:
  • URL (http:// or https://) — captured via browser MCP
  • One or more image file paths (.png, .jpg, .webp)
• Optional: Existing project directory to integrate into
• Reads: .claude/pipeline.config.json for screenshot settings under screenshot

Process

Step 1: Determine Source Mode and Capture

digraph capture_flow {
    "Input received" [shape=diamond];
    "URL mode" [shape=box];
    "File mode" [shape=box];
    "Chrome DevTools MCP available?" [shape=diamond];
    "Use Chrome DevTools MCP" [shape=box];
    "Playwright MCP available?" [shape=diamond];
    "Use Playwright MCP" [shape=box];
    "Ask user to provide screenshots" [shape=box];
    "Validate image files" [shape=box];
    "Save to source dir" [shape=box];

    "Input received" -> "URL mode" [label="starts with http"];
    "Input received" -> "File mode" [label="otherwise"];
    "URL mode" -> "Chrome DevTools MCP available?";
    "Chrome DevTools MCP available?" -> "Use Chrome DevTools MCP" [label="yes"];
    "Chrome DevTools MCP available?" -> "Playwright MCP available?" [label="no"];
    "Playwright MCP available?" -> "Use Playwright MCP" [label="yes"];
    "Playwright MCP available?" -> "Ask user to provide screenshots" [label="no"];
    "File mode" -> "Validate image files";
    "Use Chrome DevTools MCP" -> "Save to source dir";
    "Use Playwright MCP" -> "Save to source dir";
    "Validate image files" -> "Save to source dir";
}