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