AnyDesign
Turns screenshots, websites, and Figma files into structured, executable design specs that any AI or designer can rebuild from.
Evidence shows a read-only analysis skill: fetching pages/images and generating documents; no destructive defaults, no credential handling, no covert exfiltration; failure policy explicitly instructs telling the user instead of inventing content. Deductions: no explicit user-confirmation mechanism or data-flow disclosure (e.g., privacy boundaries when Playwright fetches third-party sites), capture-script source and cookie auto-dismiss behavior not provided for review, attribution rests only on author-declared MIT; scored 15.
SKILL.md workflow is self-consistent with a lint delivery gate, explicit failure-feedback principles, and progressive reference loading; the happy path is plausible. Deductions: static review cannot execute; script sources and references/ files were not in scope, so error handling on abnormal inputs is unverified; capped at 10 per calibration.
Audience, input types (image/URL/Figma), two modes, ambiguity routing, and trigger phrases are clearly documented with stated boundaries (lint not applying to element.md, mandatory Open Questions). Deductions: core function depends on Figma MCP, claude.ai/design, v0 and other overseas services with no declared mainland-China reachability; Chinese support only generic ('user's language'); scored 10.
Well-layered docs (SKILL.md brain + on-demand references), MIT license, full Keep-a-Changelog semver history, maintainer identity visible in LICENSE. Deductions: SKILL.md structure tree lists 4 scripts while the script table lists 7 — an internal inconsistency; reference/script sources not in review scope; publisher unverified; scored 12.
Changelog and README claim end-to-end runs against vercel.com with v0 downstream rebuilds; outputs (design.md + DTCG JSON) are directly usable with clear marginal value over manual analysis. Deductions: all evidence is author-reported; correctness of representative outputs cannot be verified statically; capped at 7.
Multiple auditable primary-material leads exist: examples directory, live downstream URLs, lint validation claims, concrete figures (808 CSS variables, 96 tokens / 0 drift). Deductions: these remain at the claim/examples level; the examples and script sources were not assessed, so independent reproduction is not possible; capped at 4.
- Static review only; no script was executed. Audit the scripts/ sources yourself before running.
- Core function depends on Figma MCP, claude.ai/design, v0 and other overseas services; reachability from mainland-China networks may be limited.
- SKILL.md's structure tree contradicts its script table (4 vs 7 scripts); defer to the actual repository contents.
- capture_site.py auto-dismisses cookie banners and fetches third-party sites; be mindful of target-site terms and privacy boundaries.
- Publisher is not verified by the FollowSkills registry; ongoing-maintenance evidence is limited.
What does this skill do, and when should you use it?
AnyDesign is a Claude skill that acts as a design systems analyst: it analyzes an image, website, or Figma file and produces a confidence-marked design.md (token system, component inventory, layout, reconstruction notes), optionally paired with a W3C DTCG design-tokens. and a WCAG contrast report. It offers two modes: full analysis of an entire page/file, and element mode for copying a single element such as a navbar or 3D illustration. Output is plain Markdown and JSON consumable by v0, Lovable, Cursor, Claude Code, or a human designer. Seven standalone Python CLI scripts also work without Claude for CSS variable extraction, screenshots, and contrast checks.
Reads three input types: local images (direct multimodal vision), website URLs (WebFetch for HTML, extraction of CSS custom properties, with Playwright multi-viewport screenshots for SPAs), and Figma links (via Figma MCP, calling get_metadata, get_variable_defs, get_design_context, get_screenshot in order). It then runs a six-layer analysis (identity → token system → components → layout → reconstruction → brand rules) plus an Art Direction Patterns QA pass. Outputs include design.md (with YAML frontmatter and confidence markers), DTCG-format design-tokens., an optional design-a11y.md WCAG report; element mode produces element.md with a code rebuild prompt or a token-grounded image-generation prompt. A mandatory lint_design_md.py run validates output before delivery.
- A frontend developer wants to extract the design system of a reference site like vercel.com and hand it to v0 or Claude Code to rebuild a similar-style page.
- A designer has only a Dribbble screenshot and needs precise hex palettes and typography specs for documentation.
- A brand team wants just one element—a navbar or pricing card—copied; element mode delivers a paste-ready rebuild prompt.
- A game art team needs consistent AI asset packs: the skill extracts art direction once (palette, lighting recipe) and emits a prompt pack sharing that base.
- A design lead wants to audit token drift between a Figma handoff and the live site using verify_design.py.
- A team inheriting a legacy product wants to document the implicit, never-named design system as a baseline.
What are this skill's strengths and limitations?
- Universal output: Markdown + W3C DTCG JSON, directly consumable by v0, Lovable, Cursor, Style Dictionary, and Figma Variables—no lock-in.
- Enforced honesty: every inference carries a confidence marker (✅⚠️❓), inventing tokens is prohibited, and an Open Questions section is mandatory.
- Distinctive element mode: generates image-model prompts grounded in the exact extracted palette so regenerated assets match the source design, with an IP guardrail (original characters only).
- Seven pure-Python CLI scripts, most stdlib-only, usable without Claude—including token drift audit and WCAG contrast checking.
- Real, reproducible examples: full vercel.com analysis (808 CSS variables extracted), Poolsuite player element rebuild, Discord 3D scene image prompts—all with live verified results.
- Figma analysis depends on a Figma MCP connection; without it, that input type is unavailable.
- Playwright is a ~300MB first-time install for capture_site.py, adding dependency cost.
- SPAs (non-SSR React/Next sites) must fall back to the Playwright screenshot path; the plain-HTML route fails there.
- No automated test suite is visible in the repo; image token extraction relies on multimodal vision approximation, with precision depending on helpers like extract_colors.py.
- The downstream results touted in the README (v0 rebuilds) are self-demonstrated by the author, without independent verification.
How do you install this skill?
git clone https://github.com/uxKero/anydesign.git, then copy the folder to ~/.claude/skills/ (personal, all projects) or into a project's .claude/skills/. Optional: pip install -r requirements.txt, and playwright install chromium for screenshots. For Figma analysis, connect the Figma MCP in the Claude app (Settings → Connectors). No other installation methods (e.g., marketplace one-click) are documented.
How do you use this skill?
After installation, no commands are needed—trigger it with natural language such as "extract the design system from this site", "copy this navbar", or "what palette does this site use?" along with an image, URL, or Figma link. The skill auto-selects full or element mode and generates design.md and design-tokens.. The seven scripts also run standalone, e.g.: python scripts/extract_css_vars.py https://vercel.com/ --pretty to pull tokens, or python scripts/lint_design_md.py design.md to validate output.
How does this skill compare with similar options?
The source names no direct competitors, but explicitly positions the tool as "not a description generator—it's a design diagnostics tool" and emphasizes integration with DTCG consumers like Style Dictionary and Tokens Studio, where it serves as the upstream extraction step.