ingest-screenshot

Name: ingest-screenshot
Author: bluzir

53installs10forks

How to install ingest-screenshot?

bluzir/claude-code-design/ingest-screenshot

$npx -y skills add bluzir/claude-code-design --skill ingest-screenshot

Installs into the current project.

Summary

Analyze an uploaded image (screenshot of a design, website, app) and extract design tokens to use as a starting point. Use when user pastes or attaches an image and says "recreate this", "match this image", "use this style".

Files · 1

View on GitHub

SKILL.md

1	# Ingest Screenshot
2
3	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.
4
5	## Steps
6
7	1. Resolve image path: `$0`. `Bash(file <path>)` to confirm it's an image (png/jpg/webp/heic).
8
9	2. Read via multimodal `Read`: this loads the image for vision. Claude can see it.
10
11	3. Analyze systematically. From the image, identify:
12	- Dominant colors — pick 5-8 swatches with hex approximations. Flag uncertain ones ("looks like #2A4B6D but vision hex is approximate").
13	- Typography — font family (match to common families: Inter-like, serif-like, display, mono), sizes (relative), weights (light/regular/medium/bold), line-height impression
14	- Spacing rhythm — estimate base unit (4/6/8px) from gaps + padding
15	- Radii — sharp / small / medium / pill
16	- Component patterns — what types of elements appear (buttons, cards, navigation, inputs)
17	- Aesthetic register — minimal / dense / decorative / playful / corporate / brutalist
18
19	4. Write output:
20	```
21	artifacts/ingested/screenshot-<timestamp>-tokens.json
22	```
23	Same schema as `ingest-github` + `"source": { "image": "<path>", "ingested_at": "..." }` + `"confidence": "low\|medium\|high"` per category.
24
25	5. Preview confidence: for each uncertain value, add a `"confidence"` field (`low` \| `medium` \| `high`). Vision-derived hex codes should be `low` or `medium`.
26
27	6. Offer next step:
28	- "Extracted tokens saved. Colors are approximate — do you have the source file (CSS, design system, brand guide) to cross-check?"
29	- Follow-up: `/create-design-system` or start `/make-deck` / `/interactive-prototype` using these as starting point.
30
31	## Limitations — tell the user
32
33	- Vision returns approximate hex, not exact. For production accuracy, provide source files.
34	- Multiple overlapping colors → Claude picks representative samples, not all variations
35	- Typography recognition is fuzzy — "looks like Inter" ≠ "is Inter"
36	- Pixel dimensions require the image's actual resolution to be readable
37
38	## Workflow integration
39
40	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.

People who liked this also viewed

6 picks

Type

ingest-screenshot

53installs10forks

View on GitHub

How to install ingest-screenshot?

bluzir/claude-code-design/ingest-screenshot

$npx -y skills add bluzir/claude-code-design --skill ingest-screenshot

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Ingest Screenshot
2
3	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.
4
5	## Steps
6
7	1. Resolve image path: `$0`. `Bash(file <path>)` to confirm it's an image (png/jpg/webp/heic).
8
9	2. Read via multimodal `Read`: this loads the image for vision. Claude can see it.
10
11	3. Analyze systematically. From the image, identify:
12	- Dominant colors — pick 5-8 swatches with hex approximations. Flag uncertain ones ("looks like #2A4B6D but vision hex is approximate").
13	- Typography — font family (match to common families: Inter-like, serif-like, display, mono), sizes (relative), weights (light/regular/medium/bold), line-height impression
14	- Spacing rhythm — estimate base unit (4/6/8px) from gaps + padding
15	- Radii — sharp / small / medium / pill
16	- Component patterns — what types of elements appear (buttons, cards, navigation, inputs)
17	- Aesthetic register — minimal / dense / decorative / playful / corporate / brutalist
18
19	4. Write output:
20	```
21	artifacts/ingested/screenshot-<timestamp>-tokens.json
22	```
23	Same schema as `ingest-github` + `"source": { "image": "<path>", "ingested_at": "..." }` + `"confidence": "low\|medium\|high"` per category.
24
25	5. Preview confidence: for each uncertain value, add a `"confidence"` field (`low` \| `medium` \| `high`). Vision-derived hex codes should be `low` or `medium`.
26
27	6. Offer next step:
28	- "Extracted tokens saved. Colors are approximate — do you have the source file (CSS, design system, brand guide) to cross-check?"
29	- Follow-up: `/create-design-system` or start `/make-deck` / `/interactive-prototype` using these as starting point.
30
31	## Limitations — tell the user
32
33	- Vision returns approximate hex, not exact. For production accuracy, provide source files.
34	- Multiple overlapping colors → Claude picks representative samples, not all variations
35	- Typography recognition is fuzzy — "looks like Inter" ≠ "is Inter"
36	- Pixel dimensions require the image's actual resolution to be readable
37
38	## Workflow integration
39
40	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.

People who liked this also viewed

6 picks

Type