SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsingest-screenshot

ingest-screenshot

Frontend & websites

View repository

Updated 10-16 05:01

About this skill

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

  1. Write output:

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

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

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

  3. 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.