shotspec

Turn a screenshot of a website, app, or social post into clean Markdown that an LLM can actually use.

Two modes:

• Content — extract what the screen says (a tweet, thread, chat, article, dashboard) into faithful, structured text you can paste into an LLM as context.
• Design — extract how the screen looks (colors, fonts, spacing, components, imagery) into a precise design spec, so an LLM can rebuild the UI in that style instead of guessing from a raw image.

Why

Handing a raw screenshot to an LLM is lossy. For content, OCR loses the structure (who said what, headings, hierarchy). For design, the model guesses at hex values and fonts and gets them subtly wrong. shotspec writes the structure down explicitly — semantic or visual — so the result matches the screenshot instead of vaguely resembling it.

Install

This is an Agent Skill. Add the shotspec/ folder to your skills directory, or upload the packaged shotspec.skill file in a supported client.

shotspec/
├── SKILL.md                  # workflow + mode selection
└── references/
    ├── templates.md          # content templates per UI type
    ├── design-spec.md        # design extraction checklist + template
    └── examples.md           # worked before/after examples

Use

Upload a screenshot and say what you want:

• "turn this into context for an LLM" → content mode
• "extract this tweet / thread / chat" → content mode
• "clone this design" / "build a site that looks like this" / "match this style" → design mode
• "give me the content and the design" → both

Example — design mode

You: [screenshot of a recipe site] Build a landing page that looks like this.

# Design Spec: Julienne

## Color palette
| Role | Hex (est.) | Usage |
|------|-----------|-------|
| Background | #FFFFFF | page |
| Card surface | #F5F4F2 | recipe cards |
| Accent | #D4622A | primary CTA, active states |
...

## Typography
- Display / H1: elegant serif (similar to Playfair Display), italic for emphasis
- Nav / body: neutral sans (similar to Inter)
...

## Implementation hint
Tailwind: white bg, rounded-xl flat grey cards (no shadow), py-24 hero,
Playfair Display headings + Inter UI, single terracotta accent (#D4622A).

Paste that under "build a landing page using this design system" and the result looks like the reference.

Notes

• Every hex value and font name in design mode is an estimate from the image and is labeled as such. For exact colors, confirm with a color picker.
• Content mode is verbatim — it transcribes what's written (even visible typos), flags unreadable text with [?], and never invents numbers or names.

License

MIT EOF echo "README created"