uxKero

Anydesign — Design skill for Claude Code

Design community

Claude skill that analyzes images, websites, and Figma files and generates a structured design.md with token system, component inventory, and reconstruction notes.

How to install Anydesign

This entry records only its repository, not the path inside it, so there is no exact command to give. Open uxKero/anydesign and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Anydesign does

Claude skill that analyzes images, websites, and Figma files and generates a structured design.md with token system, component inventory, and reconstruction notes.

Alternatives in Design

Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Brainwave — Learn to create modern websites with sleek parallax effects and bento box layouts 1.9k ★
Scroll Craft — Claude Code skill for premium scroll-driven websites 1k ★

README

anydesign

Point it at anything visual. Get a design system back.

A Claude skill that turns **images, websites, and Figma files** into structured, machine-readable design specs — and copies **single elements** (navbars to 3D art) as rebuild prompts any AI can execute.

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Skill Version](https://img.shields.io/badge/version-0.6.0-blue.svg)](./CHANGELOG.md) [![Claude Skill](https://img.shields.io/badge/Claude-Skill-purple.svg)](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview) [![DTCG](https://img.shields.io/badge/Design%20Tokens-DTCG-green.svg)](https://www.designtokens.org/) [![GitHub stars](https://img.shields.io/github/stars/uxKero/anydesign?style=flat&color=orange)](https://github.com/uxKero/anydesign/stargazers)

**[Install](#-install)** · **[See it work](#-see-it-work)** · **[Element mode](#-element-mode--copy-just-that)** · **[CLI scripts](#-standalone-cli-scripts)** · **[Examples](./examples)**

🧠 What it does

**`anydesign` runs in Claude — its output is universal.** Plain Markdown + W3C DTCG JSON that v0, Lovable, Cursor, Bolt, Claude Code, or a human designer can consume. No lock-in. It's not a description generator — it's a **design diagnostics** tool: every inference carries a confidence marker (✅ ⚠️ ❓), every color is a real hex, and inventing tokens is treated as worse than saying "not enough info".

Two modes, picked automatically from what you ask:

You say	Mode	You get
"Extract the design system from this site"	Full analysis	`design.md` (7-section spec) + `design-tokens.json` (DTCG) + optional WCAG report
"Copy this navbar" / "Recreate this 3D graphic"	Element mode	A focused `element.md`: code spec + rebuild prompt, or a token-grounded image prompt