# anydesign

> A Claude agent skill that analyzes images, websites, and Figma files to generate structured design.md documents with token systems, component inventories, and reconstruction notes.

anydesign is an open-source Claude agent skill that turns any visual reference — an image, a live website, or a Figma file — into a structured `design.md` document paired with W3C DTCG-format design tokens. Built by GitHub user uxKero and released under the MIT license, it reached version 0.4.0 in May 2026. The output is plain Markdown and JSON, making it portable across AI builders and human workflows alike.

## What It Is

anydesign is a **design diagnostics** tool, not a description generator. It installs as a Claude Agent Skill inside Claude Code or claude.ai, and when triggered by design-analysis intent, it follows a strict 5-step workflow: identify the source, capture material (via direct vision, HTML/CSS extraction, Playwright multi-viewport screenshots, or the Figma MCP), run a layered analysis, generate output files, and deliver results with a suggested next step. Every inference in the output carries a confidence level — ✅ high, ⚠️ medium, or ❓ low — so the document is transparent about what was directly observed versus reasonably inferred.

## What the Skill Produces

Each run generates up to three artifacts:

- **`design.md`** — a 7-section structured document covering TL;DR, visual identity, full design system (colors, typography, spacing, radii, shadows, borders), component inventory, layout and composition, reconstruction notes, and open questions.
- **`design-tokens.json`** — tokens in the W3C Design Tokens Community Group (DTCG) format (`$value` / `$type`), directly consumable by Style Dictionary, Figma Variables, and Tokens Studio.
- **`design-a11y.md`** *(optional)* — a WCAG 2.1 contrast report for extracted color pairs with AA/AAA pass-fail markers.

## Standalone CLI Scripts

Six companion Python scripts in the `scripts/` directory work independently of Claude and can be used in any workflow:

- `extract_css_vars.py` — fetches a URL and extracts all CSS custom properties from linked stylesheets and inline style blocks.
- `capture_site.py` — multi-viewport Playwright screenshots with cookie-banner auto-dismiss and scroll-capture for lazy content.
- `extract_colors.py` — dominant color extraction from local images using Pillow quantization.
- `check_contrast.py` — WCAG 2.1 contrast checker that emits a Markdown table.
- `lint_design_md.py` — validates a `design.md` against the spec (YAML frontmatter, token references, component mapping, section completeness).
- `verify_design.py` — audits a `design-tokens.json` against a live URL to detect drift between declared values and current CSS.
- `export_for_claude_design.py` — generates a multi-format bundle (PPTX, DOCX, CSS, Tailwind config, README) for upload to claude.ai/design.

## Downstream Compatibility

The `design.md` output is intentionally structured so AI builders can quote-extract specific sections. The project documents compatibility with v0, Lovable, Cursor, Windsurf, Claude Code, and Bolt — and includes a live demo app at v0-anydesignexample.vercel.app built by v0 from a `design.md` the skill produced. Design token files can be imported directly into Style Dictionary, Tokens Studio, and Figma Variables. The `export_for_claude_design.py` script bridges the gap to Claude Design (Anthropic Labs, launched April 2026), which ingests PPTX and DOCX assets to build a persistent org-level design system.

## Update: v0.4.0 — Claude Design Bundle Exporter

Version 0.4.0, published May 19 2026, added the `export_for_claude_design.py` script as the headline feature. This release introduced the five-artifact bundle format (PPTX brand kit, DOCX brief, CSS tokens, Tailwind config, and upload README) specifically targeting Claude Design's setup flow. The repository was created May 18 2026 and last updated May 31 2026, indicating active early development. The project had 35 stars and 3 forks at the time of indexing.

## Features
- Analyzes images, websites, and Figma files for design extraction
- Generates structured design.md with 7-section format
- Outputs W3C DTCG-format design-tokens.json
- Optional WCAG 2.1 accessibility contrast report (design-a11y.md)
- Confidence levels on every inference (high/medium/low)
- Standalone CLI scripts usable without Claude
- CSS custom property extraction from live URLs
- Multi-viewport Playwright screenshot capture
- Dominant color extraction from images
- WCAG 2.1 contrast checker
- design.md spec validator
- Live-URL token drift auditor
- Claude Design bundle exporter (PPTX, DOCX, CSS, Tailwind)
- Figma MCP integration for variable and design context extraction
- Compatible with v0, Lovable, Cursor, Windsurf, Claude Code, Bolt
- Progressive disclosure architecture for efficient context window use

## Integrations
Claude Code, claude.ai, Figma (via MCP), v0, Lovable, Cursor, Windsurf, Bolt, Claude Design, Style Dictionary, Tokens Studio, Figma Variables, Playwright, Pillow, Tailwind CSS, Vercel

## Platforms
WEB, API, CLI

## Pricing
Open Source

## Version
0.4.0

## Links
- Website: https://github.com/uxKero/anydesign
- Documentation: https://github.com/uxKero/anydesign/blob/main/SKILL.md
- Repository: https://github.com/uxKero/anydesign
- EveryDev.ai: https://www.everydev.ai/tools/anydesign