anydesign skill
A Claude skill that turns sites, images and Figma files into a design system: Markdown, DTCG tokens and element rebuild prompts
- 245 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The capture_site.py script opens sites in a Playwright browser and reads their styles
- Figma files are read through a connected Figma MCP with access to your account
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/anydesignDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The capture_site.py script opens sites in a Playwright browser and reads their styles
- Figma files are read through a connected Figma MCP with access to your account
This is third-party code. Review the repository files before installing.
What it does
anydesign runs in Claude, and its output suits any tool: plain Markdown and W3C DTCG JSON that v0, Lovable, Cursor, Bolt, Claude Code or a human designer can consume. Every inference carries a confidence marker, colors are real hex values, and the author treats inventing tokens as worse than admitting there is not enough information. There are two modes, chosen from the request. Full analysis (`extract the design system from this site`) gives a seven-section `design.md`, `design-tokens.json` in DTCG and an optional WCAG report. Element mode (`copy this navbar`, `recreate this 3D graphic`) gives a short `element.md` with a code spec and a rebuild prompt, or an image prompt grounded in the extracted palette. The skill installs by copying its folder into `~/.claude/skills/`. The standalone scripts need Python and Playwright with Chromium (`capture_site.py`). Figma files are read through a connected Figma MCP.
Who it is for. Designers and frontend developers who want to extract tokens and a spec from a live site, an image or a mockup and hand them to an agent for building.
Good fit when
- A reference site needs a design system with colors, fonts and spacing as tokens
- From a screenshot you need to understand the palette and get real hex values
- From a competitor you need one element, such as a navbar, as a rebuild prompt
- A WCAG contrast report is needed for the extracted colors
- A Figma mockup gets turned into a Markdown spec for v0 or Cursor
Not a fit when
- You want to clone a whole site: the skill extracts tokens and single elements, and copyright and site terms remain your concern
- You need a finished app built: the output is a spec for another tool
- Figma MCP is not connected: Figma files cannot be read without it
Example request
Extract the design system from this site and save design.md and design-tokens.jsonLimitations
The skill runs in Claude only: other clients receive its output but not the skill itself. The capture_site.py script needs Python, the dependencies from requirements.txt and Playwright Chromium, about 300 MB on first download. Figma files are analyzed only with the Figma MCP connector enabled in the Claude app. The output is inferences with confidence markers, so check low-confidence parts by hand. The last commit is from September 2026.
How to disable. Delete the anydesign folder from ~/.claude/skills/ or the project's .claude/skills/. The downloaded Playwright Chromium is removed separately.
FAQ
What do I get as output?
In full mode a seven-section design.md and design-tokens.json in DTCG, plus an optional WCAG report. In element mode a short element.md with a code spec and a rebuild prompt.
How does the skill treat guesses?
Every inference is tagged with a confidence level, colors are real, and missing information is named as missing instead of inventing tokens.
Can I analyze a Figma file?
Yes, but connect the Figma MCP in the Claude app under Settings, Connectors.
What is element mode?
A mode for copying a single element, from a navbar to 3D art. It gives a code spec and a rebuild prompt, or an image prompt grounded in the palette.
Do I need commands to run it?
No, the skill activates by itself when you ask it to extract a design system, copy an element or name a site's palette.
Discussion
No questions or reviews yet.
Related
SkillsA web-design skill for Claude Code: a DESIGN.md spec first, then code that follows it
designlang
designlang (design-extract)
A CLI and MCP server that reads a live website and pulls out its design system: DTCG tokens, a Tailwind config, Figma variables and a brand book
A skill for Figma design systems: read-only audits with WCAG checks, component building and token export to code.
A skill and CLI that pull colors, type, spacing, radius and shadows from a public site and save them as JSON and CSS tokens
A design engine skill for local agents: mockups, prototypes, landing pages, dashboards and slides as self-contained HTML right in your editor
A Claude Code skill pack: token and component audits, governance, docs and reports for a design system team
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| anydesign (this card) | no | 245 | ||
| Design Systems MCP | no | not required | 227 | an MCP server with design-system data; anydesign extracts the system from a site, image or Figma itself |
| Design System Extractor MCP | no | not required | 73 | an MCP extractor for Storybook; anydesign works from sites, images and Figma |
README in short
The description promises a design system from anything visual. It then covers two modes, examples in three acts (Vercel's site, Poolsuite's player, Discord's 3D scene), install and standalone command-line scripts.