mcpField
I
ingest-screenshot

ingest-screenshot

github.com/bluzirDesign & UI10765 installsUpdated 27w ago
Repository

About ingest-screenshot

ingest-screenshot is a design skill for extracting approximate design tokens from a static image with Claude’s vision. It helps designers use a screenshot as a starting point while making uncertainty explicit.

Key features

  1. 01Estimate dominant color swatches
  2. 02Identify typography and spacing
  3. 03Describe radii and component patterns
  4. 04Record confidence by category
  5. 05Save tokens as JSON

Use cases

  1. 01Derive initial tokens from a UI screenshot
  2. 02Review visual style before a redesign

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/bluzir/claude-code-design --skill ingest-screenshot

After installing, type/ingest-screenshotin Claude Code to confirm it loaded.

Details

From the project README

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.

Comments

Markdown supported