Ingest Screenshot

Ingest Screenshot

Extract design tokens from a static image using Claude's vision. Honest caveats: exact hex codes are approximate without source files. Claude recreates UIs more reliably from code than from screenshots.

Steps

1. Resolve image path: $0. Bash(file <path>) to confirm it's an image (png/jpg/webp/heic).

2. Read via multimodal Read: this loads the image for vision. Claude can see it.

3. Analyze systematically. From the image, identify:

   • Dominant colors — pick 5-8 swatches with hex approximations. Flag uncertain ones ("looks like #2A4B6D but vision hex is approximate").
   • Typography — font family (match to common families: Inter-like, serif-like, display, mono), sizes (relative), weights (light/regular/medium/bold), line-height impression
   • Spacing rhythm — estimate base unit (4/6/8px) from gaps + padding
   • Radii — sharp / small / medium / pill
   • Component patterns — what types of elements appear (buttons, cards, navigation, inputs)
   • Aesthetic register — minimal / dense / decorative / playful / corporate / brutalist

4. Write output:

   artifacts/ingested/screenshot-<timestamp>-tokens.json
   

   Same schema as ingest-github + "source": { "image": "<path>", "ingested_at": "..." } + "confidence": "low|medium|high" per category.

5. Preview confidence: for each uncertain value, add a "confidence" field (low | medium | high). Vision-derived hex codes should be low or medium.

6. Offer next step:

   • "Extracted tokens saved. Colors are approximate — do you have the source file (CSS, design system, brand guide) to cross-check?"
   • Follow-up: /create-design-system or start /make-deck / /interactive-prototype using these as starting point.

Limitations — tell the user

• Vision returns approximate hex, not exact. For production accuracy, provide source files.
• Multiple overlapping colors → Claude picks representative samples, not all variations
• Typography recognition is fuzzy — "looks like Inter" ≠ "is Inter"
• Pixel dimensions require the image's actual resolution to be readable

Workflow integration

After ingest, always offer to pair with a real source (Figma, codebase) to lock in exact values — the screenshot gives a starting direction, not ground truth.