anydesign

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.