AnyDesign Skill: Turn Any Design Into design.md

What is the anydesign skill?

The anydesign README opens with a real run: 808 CSS custom properties pulled from vercel.com, a design.md written from them, and a running app that v0 built from that file. The skill documents a visual design instead of just describing it.

Point it at a screenshot, a URL or a Figma file and it returns a seven section design.md, a W3C DTCG token file and an optional contrast report. Every inference carries a confidence marker, and inventing tokens counts as worse than admitting a gap.

What a run hands back

• design.md: a seven section spec with YAML frontmatter and token references, running from a short summary through visual identity, tokens, components, layout and reconstruction notes to do's, don'ts and open questions.
• design-tokens.json: W3C DTCG output generated by a script from the frontmatter. SKILL.md says it is never written by hand.
• design-a11y.md: a WCAG contrast table with AA and AAA results, produced when two or more text and surface color pairs are known.
• element.md: the single element output, either a rebuild prompt, an image prompt or both.

Full mode versus element mode

Full mode is the default. It walks five steps: identify source and emphasis, capture material, analyze in layers from identity to brand rules, write design.md, then deliver with a suggested next step. SKILL.md caps images at four desktop frames and two mobile frames.

Element mode handles one thing: a navbar, a pricing card or an illustration. It classifies the element as code, asset or hybrid and writes an element.md with either a rebuild prompt, an image prompt grounded in extracted hex values, or both.

Who anydesign is for

Best for

• Designers and developers who want to document or reverse engineer a reference site's palette, typography and components before briefing a team.
• Teams auditing a Figma handoff, or checking a live site for drift against a saved tokens file with the verify_design.py script.
• Anyone feeding an AI builder. The README says design.md can be pasted into v0, Bolt or Lovable as the brief. For a brand source built another way, see brandsystem-mcp.

Not for

• Sites behind a protection wall. When a URL is down or blocked, the skill reports it and suggests a manual screenshot instead of bypassing anything.
• Setups without Playwright. Without it the skill falls back to fetching the page and marks measured typography as uncertain.
• Managing tokens over time. It extracts and documents them. For a skill about the tokens themselves, look at design-token.

Use it with UiChemy

anydesign gives you a spec, not a WordPress page. Paste the design.md into an AI builder, then bring the build in with UiChemy AI to WordPress. If your source is a Figma file, UiChemy Figma to WordPress converts it directly. Click Get Started on uichemy.com.

How to install AnyDesign Skill: Turn Any Design Into design.md

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

1. Clone the repository

   Run git clone https://github.com/uxKero/anydesign.git. SKILL.md sits at the repository root, so the cloned folder is the skill.

2. Copy it into a skills folder

   For all projects run cp -r anydesign ~/.claude/skills/. For a single project run cp -r anydesign /path/to/project/.claude/skills/ instead.

3. Add the optional script dependencies

   Run pip install -r requirements.txt, then playwright install chromium. The browser step is only for capture_site.py and downloads about 300MB the first time.

4. Connect Figma if you need it

   To analyze Figma files, connect the Figma MCP in the Claude app under Settings and Connectors.

5. Ask in plain words

   There is no command to remember. Requests like extract the design system from a site, copy this navbar or what palette does this site use activate the skill.

Check that it loaded

Give the agent a public URL and ask what palette the site uses. It should run the helper scripts, write a design.md with confidence markers and offer a next step.

Read the official instructions on GitHub

Key features

• Three kinds of sourceIt accepts an image, a website URL or a Figma file, and it can combine them. The Source section of design.md records what each input contributed.
• Layered analysisAnalysis moves from identity to system, components, layout, reconstruction and brand rules, with an art direction QA pass before the file is written.
• Confidence markersEvery inference carries one of three confidence markers. Every color is a real hex value, and the skill prefers saying not enough information to inventing a token.
• Eight standalone scriptsPure Python tools for CSS variables, site capture, image colors, contrast, linting, token export, drift checks and bundle export. Each script has a --help flag.
• Lint and token generationlint_design_md.py validates frontmatter, references and components, and build_tokens_json.py derives design-tokens.json so the JSON never drifts from the markdown.
• Drift auditverify_design.py compares a design-tokens.json file against the live URL, so you can check whether a saved spec is still true.
• Element modeCopies one navbar, card or illustration. A code element gets a scoped token spec and rebuild prompt, an asset gets an image prompt, and a hybrid gets both.
• Token-grounded image promptsPrompts embed the exact extracted palette, observed lighting and brand mood, in scene or isolated format, the latter meant as a transparent PNG.
• Token budget disciplineThe skill runs scripts without opening their source, never reads whole dumps and writes design.md once, then fixes lint findings with small edits.

Frequently asked questions