anydesign runs in Claude — its output is universal. Plain Markdown + W3C DTCG JSON that v0, Lovable, Cursor, Bolt, Claude Code, or a human designer can consume. No lock-in. It's not a description generator — it's a design diagnostics tool: every inference carries a confidence marker (✅ ⚠️ ❓), every color is a real hex, and inventing tokens is treated as worse than saying "not enough info".

Two modes, picked automatically from what you ask:

Every image below is a real, reproducible run — sources and commands live in examples/.

The skill analyzed vercel.com (808 CSS custom properties extracted, nothing invented), produced a design.md, and v0 built this from it:

Element mode pointed at the retro Mac OS player of poolsuite.net: DOM-precise capture, pixel-sampled palette, the verbatim bevel-shadow system — and a rebuild prompt that v0 turned into a working app.

Captured element	Rebuilt by v0 from the element.md

When the element is art, you get a generative image prompt grounded in the extracted palette — hex by hex. Discord's 3D hero scene, regenerated on the first pass: indigo world locked, every accent on its exact extracted hex, original characters (no brand mascots — there's an IP guardrail).

Captured element	Generated from the token-grounded prompt

And the same extraction as an isolated, web-ready cutout — single subject, real alpha, no scenery. Drop it straight into your site:

The #1 pain of AI game art is consistency between assets. Element mode extracts a game's art direction once — palette, lighting recipe, color-allocation rules — and emits a prompt pack where every asset shares that base. One key art in, a coherent sprite set out:

Captured key art	Original character generated from the pack

git clone https://github.com/uxKero/anydesign.git

# Personal skills (all projects)
cp -r anydesign ~/.claude/skills/

# OR for a single project
cp -r anydesign /path/to/project/.claude/skills/

Optional extras:

# Python deps for the companion scripts
pip install -r requirements.txt
playwright install chromium   # only for capture_site.py (~300MB first time)

To analyze Figma files, connect the Figma MCP in the Claude app (Settings → Connectors).

That's it — the skill activates automatically when Claude detects design-analysis intent ("extract the design system from X", "copy this navbar", "what palette does this site use"). No command to remember.

Sometimes you don't want the whole system — you want that navbar, that pricing card, that 3D illustration. Say so and the skill captures just the element (capture_site.py --selector grabs its exact bounding box + outerHTML on URLs) and classifies it:

The image prompts are the differentiator: instead of an impressionistic description, the prompt embeds the exact extracted palette, observed lighting, and the parent brand's mood — so the regenerated asset belongs to the source design. Two delivery formats: scene (composition with background) or isolated (single subject, transparent PNG with alpha, ready for the web).

The deliverable is plain text. Anything that reads Markdown can use it.

Seven pure-Python tools in scripts/ that work without Claude:

# Pull design tokens from any URL — no Claude needed
python scripts/extract_css_vars.py https://vercel.com/ --pretty

# Multi-viewport responsive captures
python scripts/capture_site.py https://your-site.com --viewports desktop,tablet,mobile

# Capture a single element (screenshot + outerHTML)
python scripts/capture_site.py https://your-site.com --selector "header.navbar" -o element.png

# WCAG contrast check
python scripts/check_contrast.py --pair "#111,#FFF" --pair "#3B82F6,#FFF"

# Validate a generated design.md
python scripts/lint_design_md.py path/to/design.md

# Audit declared tokens vs live site (the drift tool)
python scripts/verify_design.py path/to/design-tokens.json https://vercel.com/

# Bundle a design.md + tokens for upload to claude.ai/design
python scripts/export_for_claude_design.py path/to/design.md --out my-brand-bundle/

python scripts/export_for_claude_design.py path/to/design.md --out my-brand/

Step 1 — Identify source, mode (full vs element), and emphasis
   ↓
Step 2 — Capture material
         (vision / HTML + CSS vars / Playwright / Figma MCP)
   ↓
Step 3 — Layered analysis (Identity → System → Components → Layout
         → Reconstruction → Brand rules) + Art Direction QA pass
   ↓
Step 4 — Generate design.md + design-tokens.json   (or element.md)
   ↓
Step 5 — Deliver + suggest next step

anydesign/
├── SKILL.md                       Main instructions (the "brain")
├── references/                    Loaded on-demand (progressive disclosure)
│   ├── capture-flows.md           How to capture each source type
│   ├── analysis-framework.md      The analysis layers in detail
│   ├── token-extraction.md        Token inference rigor + DTCG
│   ├── output-template.md         design.md template
│   └── element-copy.md            Element mode: element.md + image prompts
├── scripts/                       7 standalone CLI tools
└── examples/                      Real, reproducible runs
    ├── vercel-landing/            Full analysis of vercel.com (+ Claude Design bundle)
    ├── landing-example/           Synthetic minimal example
    ├── poolsuite-player-element/  Element mode, code path (+ v0 rebuild)
    ├── discord-hero-asset/        Element mode, asset path (+ generated images)
    └── v0-downstream-demo/        The original downstream proof