# Examples

Real outputs of the `anydesign` skill, included so you can see what the deliverable looks
like before installing.

## Index

### [`vercel-landing/`](./vercel-landing) — Real analysis of vercel.com

End-to-end run of the skill against the **live Vercel homepage**. Demonstrates the URL
flow with all three capture mechanisms: HTML via `WebFetch`, 808 CSS custom properties
extracted via `scripts/extract_css_vars.py`, plus a Playwright screenshot.

The output includes the full Geist design-system token map (10-shade palette × 8 hues,
4px spacing scale, 7-tier shadow system), a real desktop screenshot, and a WCAG contrast
report. Nothing is invented — every value is verbatim from the live site's CSS variables.

**Files:**
- [`source.md`](./vercel-landing/source.md) — capture method + reproduction commands
- [`design.md`](./vercel-landing/design.md) — full structured analysis
- [`design-tokens.json`](./vercel-landing/design-tokens.json) — DTCG tokens
- [`design-a11y.md`](./vercel-landing/design-a11y.md) — WCAG 2.1 contrast report
- [`capture.png`](./vercel-landing/capture.png) — desktop screenshot (1440×900, downsized)
- [`claude-design-bundle/`](./vercel-landing/claude-design-bundle) — ready-to-upload bundle for [claude.ai/design](https://claude.ai/design), generated by `scripts/export_for_claude_design.py` from the two files above. Includes `brand-kit.pptx` (13 slides), `brand-overview.docx`, `tokens.css`, `tailwind.config.ts`, and an upload-instructions README.

### [`landing-example/`](./landing-example) — Synthetic landing ("Lumen Notes")

Smaller fictional example used to demonstrate the output structure without depending on
any third-party brand. Useful as a minimal reference for the file shape.

**Files:**
- [`source.md`](./landing-example/source.md)
- [`design.md`](./landing-example/design.md)
- [`design-tokens.json`](./landing-example/design-tokens.json)
- [`design-a11y.md`](./landing-example/design-a11y.md)

### [`poolsuite-player-element/`](./poolsuite-player-element) — Element mode on poolsuite.net

First real-world run of **element mode** (v0.5.0). Targets the signature component of
[poolsuite.net](https://poolsuite.net) — the retro Mac OS player window — via DOM-precise
capture (`capture_site.py --selector "#component-is-fm"`).

The output is a `hybrid` **`element.md`**: a scoped token spec (pixel-sampled accents,
the verbatim bevel-shadow system, the `active:invert` signature interaction), a
ready-to-paste reconstruction prompt for v0/Claude Code, and a **token-grounded
generative image prompt** for the VHS footage frame the window plays — palette anchored
to the extracted hexes so the regenerated asset harmonizes with the chrome.

Downstream proof included: the reconstruction prompt pasted into v0 produced
[retro-radio-player-zz.vercel.app](https://retro-radio-player-zz.vercel.app/) in two
iterations (the second fixing typographic case discipline — a lesson now baked into
the skill).

**Files:**
- [`source.md`](./poolsuite-player-element/source.md) — capture method + reproduction commands
- [`element.md`](./poolsuite-player-element/element.md) — the element-mode output
- [`element.png`](./poolsuite-player-element/element.png) — the captured element (607×640)
- [`element.html`](./poolsuite-player-element/element.html) — the element's outerHTML
- [`v0-result.png`](./poolsuite-player-element/v0-result.png) — the v0 rebuild

### [`discord-hero-asset/`](./discord-hero-asset) — Element mode, `asset` kind

Validation of element mode's **asset path**: the target is visual art (discord.com's
clay-style 3D hero scene), so the `element.md` contains a **token-grounded generative
image prompt** instead of a code spec — palette locked hex by hex to the extracted
crop, plus an `isolated` variant (transparent PNG) for web-ready cutouts.

Downstream proof for **both delivery formats**: the scene prompt produced
[`element-3D.png`](./discord-hero-asset/element-3D.png) **first pass** — indigo world
held, accents landed on the extracted hexes, the scarce pink stayed scoped to the
screen UI, and the IP guardrail kept the characters original. The `isolated` variant
produced [`element-3D-isolated.png`](./discord-hero-asset/element-3D-isolated.png) —
the robot alone with real alpha, ready to drop into a web.

**Files:**
- [`source.md`](./discord-hero-asset/source.md) — capture method + reproduction commands
- [`element.md`](./discord-hero-asset/element.md) — the asset-kind output
- [`element.png`](./discord-hero-asset/element.png) — the captured element (774×526)
- [`element-3D.png`](./discord-hero-asset/element-3D.png) — the scene generated from the prompt
- [`element-3D-isolated.png`](./discord-hero-asset/element-3D-isolated.png) — the isolated cutout (real alpha)

### [`game-asset-pack/`](./game-asset-pack) — Element mode for game assets

The game-dev use case: **one extraction → N consistent assets**. Element mode
pointed at the toon key art of a mobile battle-royale extracts the art direction
once (palette hex by hex, lighting recipe, color-allocation rules like "energy
green is VFX-only"), then emits a **prompt pack**: a shared style base + three
isolated asset prompts (original character, pickup, prop) — all transparent-PNG
game sprites that read as one game.

Downstream proof: the character prompt produced
[`asset-character.png`](./game-asset-pack/asset-character.png) with real alpha and
the palette grounding visibly held. IP-safe by design: original subjects sharing
the style vocabulary, never the source game's characters.

**Files:**
- [`source.md`](./game-asset-pack/source.md) — capture method + reproduction commands
- [`element.md`](./game-asset-pack/element.md) — the asset-pack output
- [`element.png`](./game-asset-pack/element.png) — the captured key art (1440×580)
- [`asset-character.png`](./game-asset-pack/asset-character.png) — generated character (real alpha)

### [`v0-downstream-demo/`](./v0-downstream-demo) — Proof that the output flows to v0

A screenshot of a running app at
[v0-anydesignexample.vercel.app](https://v0-anydesignexample.vercel.app/) generated by
[v0](https://v0.dev) from a `design.md` this skill produced. Demonstrates that the
output isn't Claude-specific — any AI builder can consume it.

## Notes

- All `design-tokens.json` files follow the
  [W3C Design Tokens Community Group](https://www.designtokens.org/) format
  (`$value` / `$type`), with skill-specific confidence metadata under
  `$extensions.anydesign`.
- Confidence markers (✅ high / ⚠️ medium / ❓ low) reflect what was directly observed
  vs. reasonably inferred — the same honesty principle the skill enforces.
- For the Vercel example, intermediate artifacts (`capture.html`, `css-vars-raw.json`)
  are regenerable via the commands in `source.md` and are intentionally not committed
  to keep the repo small.
