Ingest Screenshot
- 54 installs
- 98 repo stars
- Updated April 20, 2026
- bluzir/claude-code-design
Ingest-screenshot is a Claude Code skill that extracts approximate design tokens from an uploaded image using Claude's vision.
About
Ingest-screenshot analyzes an uploaded image with Claude's vision and extracts approximate design tokens: dominant colors, typography, spacing rhythm, radii, and component patterns. It flags confidence per category because vision hex is approximate. A developer runs it when they paste a design image and want to match its style.
- Extracts approximate design tokens (colors, type, spacing, radii) from a screenshot via Claude vision
- Flags per-category confidence since vision hex is approximate
- Writes a tokens.json to use as a starting direction, not ground truth
Ingest Screenshot by the numbers
- 54 all-time installs (skills.sh)
- Ranked #1,229 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 1, 2026 (Skillselion catalog sync)
ingest-screenshot capabilities & compatibility
Free; runs on Claude vision, no external service
- Capabilities
- ingest figma · ingest github · make deck · interactive prototype
- Use cases
- ui design · web design
- Pricing
- Free
What ingest-screenshot says it does
Analyze an uploaded image (screenshot of a design, website, app) and extract design tokens to use as a starting point.
Vision returns approximate hex, not exact. For production accuracy, provide source files.
npx skills add https://github.com/bluzir/claude-code-design --skill ingest-screenshotAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 54 |
|---|---|
| repo stars | ★ 98 |
| Last updated | April 20, 2026 |
| Repository | bluzir/claude-code-design ↗ |
What it does
Extract approximate colors, typography, and spacing from a design screenshot into a tokens.json starting point.
Who is it for?
Skip if: Exact production hex values (vision hex is approximate; pair with a source file)
When should I use this skill?
when a user pastes an image and says recreate this or match this style
What you get
A tokens.json of approximate colors, type, and spacing with per-category confidence flags.
- screenshot tokens.json with confidence flags
By the numbers
- 5-8 color swatches extracted per image
- low/medium/high confidence per category
Files
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.jsonSame 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-systemor start/make-deck//interactive-prototypeusing 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.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k