{"id":50525905,"url":"https://github.com/uxKero/anydesign","last_synced_at":"2026-06-20T02:00:34.660Z","repository":{"id":358745370,"uuid":"1242899551","full_name":"uxKero/anydesign","owner":"uxKero","description":"Claude skill that analyzes images, websites, and Figma files and generates a structured design.md with token system, component inventory, and reconstruction notes.","archived":false,"fork":false,"pushed_at":"2026-06-11T03:55:38.000Z","size":809,"stargazers_count":100,"open_issues_count":2,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-06-11T04:07:04.558Z","etag":null,"topics":["ai-agents","anthropic","claude-code","claude-skill","design-system","design-tokens","dtcg","figma","playwright"],"latest_commit_sha":null,"homepage":null,"language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uxKero.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-18T21:34:01.000Z","updated_at":"2026-06-11T03:55:42.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/uxKero/anydesign","commit_stats":null,"previous_names":["uxkero/anydesign"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/uxKero/anydesign","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uxKero%2Fanydesign","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uxKero%2Fanydesign/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uxKero%2Fanydesign/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uxKero%2Fanydesign/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uxKero","download_url":"https://codeload.github.com/uxKero/anydesign/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uxKero%2Fanydesign/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34554510,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-20T02:00:06.407Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-agents","anthropic","claude-code","claude-skill","design-system","design-tokens","dtcg","figma","playwright"],"created_at":"2026-06-03T08:00:23.320Z","updated_at":"2026-06-20T02:00:34.651Z","avatar_url":"https://github.com/uxKero.png","language":"Python","funding_links":[],"categories":["Skills"],"sub_categories":["Creative \u0026 Media"],"readme":"\u003cdiv align=\"center\"\u003e\n\n# anydesign\n\n### Point it at anything visual. Get a design system back.\n\nA Claude skill that turns **images, websites, and Figma files** into structured,\nmachine-readable design specs — and copies **single elements** (navbars to 3D art)\nas rebuild prompts any AI can execute.\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Skill Version](https://img.shields.io/badge/version-0.5.1-blue.svg)](./CHANGELOG.md)\n[![Claude Skill](https://img.shields.io/badge/Claude-Skill-purple.svg)](https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview)\n[![DTCG](https://img.shields.io/badge/Design%20Tokens-DTCG-green.svg)](https://www.designtokens.org/)\n[![GitHub stars](https://img.shields.io/github/stars/uxKero/anydesign?style=flat\u0026color=orange)](https://github.com/uxKero/anydesign/stargazers)\n\n**[Install](#-install)** · **[See it work](#-see-it-work)** · **[Element mode](#-element-mode--copy-just-that)** · **[CLI scripts](#-standalone-cli-scripts)** · **[Examples](./examples)**\n\n\u003c/div\u003e\n\n---\n\n## 🧠 What it does\n\n**`anydesign` runs in Claude — its output is universal.** Plain Markdown + W3C DTCG\nJSON that v0, Lovable, Cursor, Bolt, Claude Code, or a human designer can consume.\nNo lock-in. It's not a description generator — it's a **design diagnostics** tool:\nevery inference carries a confidence marker (✅ ⚠️ ❓), every color is a real hex,\nand inventing tokens is treated as worse than saying \"not enough info\".\n\nTwo modes, picked automatically from what you ask:\n\n| You say | Mode | You get |\n|---|---|---|\n| *\"Extract the design system from this site\"* | **Full analysis** | `design.md` (7-section spec) + `design-tokens.json` (DTCG) + optional WCAG report |\n| *\"Copy this navbar\"* / *\"Recreate this 3D graphic\"* | **Element mode** | A focused `element.md`: code spec + rebuild prompt, or a **token-grounded image prompt** |\n\n---\n\n## 🎬 See it work\n\nEvery image below is a real, reproducible run — sources and commands live in\n[`examples/`](./examples).\n\n### Act 1 — A full design system becomes a running app\n\nThe skill analyzed [vercel.com](https://vercel.com) (808 CSS custom properties\nextracted, nothing invented), produced a `design.md`, and v0 built this from it:\n\n[![A running app generated by v0 from a design.md this skill produced](./examples/v0-downstream-demo/screenshot.png)](https://v0-anydesignexample.vercel.app/)\n\n\u003cdiv align=\"center\"\u003e\u003csup\u003eLive at \u003ca href=\"https://v0-anydesignexample.vercel.app/\"\u003ev0-anydesignexample.vercel.app\u003c/a\u003e · full run in \u003ca href=\"./examples/vercel-landing\"\u003e\u003ccode\u003eexamples/vercel-landing/\u003c/code\u003e\u003c/a\u003e\u003c/sup\u003e\u003c/div\u003e\n\n### Act 2 — One element, rebuilt\n\nElement mode pointed at the retro Mac OS player of\n[poolsuite.net](https://poolsuite.net): DOM-precise capture, pixel-sampled palette,\nthe verbatim bevel-shadow system — and a rebuild prompt that v0 turned into a\nworking app.\n\n| Captured element | Rebuilt by v0 from the `element.md` |\n|---|---|\n| ![The Poolsuite player window captured by element mode](./examples/poolsuite-player-element/element.png) | ![The v0 rebuild](./examples/poolsuite-player-element/v0-result.png) |\n\n\u003cdiv align=\"center\"\u003e\u003csup\u003eLive at \u003ca href=\"https://retro-radio-player-zz.vercel.app/\"\u003eretro-radio-player-zz.vercel.app\u003c/a\u003e · run details in \u003ca href=\"./examples/poolsuite-player-element\"\u003e\u003ccode\u003eexamples/poolsuite-player-element/\u003c/code\u003e\u003c/a\u003e\u003c/sup\u003e\u003c/div\u003e\n\n### Act 3 — Art becomes a prompt that holds\n\nWhen the element is *art*, you get a generative image prompt **grounded in the\nextracted palette** — hex by hex. Discord's 3D hero scene, regenerated on the\nfirst pass: indigo world locked, every accent on its exact extracted hex, original\ncharacters (no brand mascots — there's an IP guardrail).\n\n| Captured element | Generated from the token-grounded prompt |\n|---|---|\n| ![Discord's 3D hero scene captured by element mode](./examples/discord-hero-asset/element.png) | ![The image generated from the token-grounded prompt](./examples/discord-hero-asset/element-3D.png) |\n\nAnd the same extraction as an **isolated, web-ready cutout** — single subject,\nreal alpha, no scenery. Drop it straight into your site:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./examples/discord-hero-asset/element-3D-isolated.png\" width=\"260\" alt=\"The robot companion as an isolated transparent PNG generated from the element.md prompt\"\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\u003csup\u003eBoth prompts + alpha verification in \u003ca href=\"./examples/discord-hero-asset\"\u003e\u003ccode\u003eexamples/discord-hero-asset/\u003c/code\u003e\u003c/a\u003e\u003c/sup\u003e\u003c/div\u003e\n\n### Act 4 — Game asset packs that stay consistent\n\nThe #1 pain of AI game art is consistency between assets. Element mode extracts a\ngame's art direction **once** — palette, lighting recipe, color-allocation rules —\nand emits a prompt pack where every asset shares that base. One key art in, a\ncoherent sprite set out:\n\n| Captured key art | Original character generated from the pack |\n|---|---|\n| ![Toon battle-royale key art captured by element mode](./examples/game-asset-pack/element.png) | \u003cp align=\"center\"\u003e\u003cimg src=\"./examples/game-asset-pack/asset-character.png\" width=\"240\" alt=\"An original game character generated from the token-grounded asset-pack prompt, transparent PNG\"\u003e\u003c/p\u003e |\n\n\u003cdiv align=\"center\"\u003e\u003csup\u003ePrompt pack (character + pickup + prop) in \u003ca href=\"./examples/game-asset-pack\"\u003e\u003ccode\u003eexamples/game-asset-pack/\u003c/code\u003e\u003c/a\u003e · original subjects only, per the IP guardrail\u003c/sup\u003e\u003c/div\u003e\n\n---\n\n## 🚀 Install\n\n```bash\ngit clone https://github.com/uxKero/anydesign.git\n\n# Personal skills (all projects)\ncp -r anydesign ~/.claude/skills/\n\n# OR for a single project\ncp -r anydesign /path/to/project/.claude/skills/\n```\n\nOptional extras:\n\n```bash\n# Python deps for the companion scripts\npip install -r requirements.txt\nplaywright install chromium   # only for capture_site.py (~300MB first time)\n```\n\nTo analyze **Figma files**, connect the Figma MCP in the Claude app\n(`Settings → Connectors`).\n\nThat's it — the skill activates automatically when Claude detects design-analysis\nintent (\"extract the design system from X\", \"copy this navbar\", \"what palette does\nthis site use\"). No command to remember.\n\n---\n\n## 📦 What you get\n\n| File | What it is |\n|---|---|\n| **`design.md`** | 7-section spec: TL;DR → visual identity (incl. brand voice + the \"ONE brand thing\") → tokens → components → layout → reconstruction notes → Do's/Don'ts → open questions. YAML frontmatter + `{token.refs}` make it machine-parseable and refactor-safe. |\n| **`design-tokens.json`** | [W3C DTCG](https://www.designtokens.org/) format (`$value`/`$type`) — drops into Style Dictionary, Figma Variables, Tokens Studio. |\n| **`design-a11y.md`** *(optional)* | WCAG 2.1 contrast report with AA/AAA pass-fail. |\n| **`element.md`** *(element mode)* | Scoped spec + rebuild prompt (`code`), token-grounded image prompt (`asset`), or both (`hybrid`). |\n\n---\n\n## 🪄 Element mode — \"copy just that\"\n\nSometimes you don't want the whole system — you want *that* navbar, *that* pricing\ncard, *that* 3D illustration. Say so and the skill captures just the element\n(`capture_site.py --selector` grabs its exact bounding box + `outerHTML` on URLs)\nand classifies it:\n\n| Kind | Example | Output |\n|---|---|---|\n| `code` | Navbar, card, button, hero | Scoped token spec + paste-ready rebuild prompt (v0 / Claude Code / Lovable) |\n| `asset` | 3D illustration, mascot, photo art | **Token-grounded prompt for image models** (gpt-image, Midjourney, SD/Flux) |\n| `hybrid` | A card containing an illustration | Code spec + nested asset prompt |\n\nThe image prompts are the differentiator: instead of an impressionistic description,\nthe prompt embeds the **exact extracted palette**, observed lighting, and the parent\nbrand's mood — so the regenerated asset *belongs* to the source design. Two delivery\nformats: `scene` (composition with background) or `isolated` (single subject,\ntransparent PNG with alpha, ready for the web).\n\n---\n\n## 🔌 Works with any AI builder\n\nThe deliverable is plain text. Anything that reads Markdown can use it.\n\n| Tool | How |\n|---|---|\n| **[v0](https://v0.dev)** / **[Bolt](https://bolt.new)** / **[Lovable](https://lovable.dev)** | Paste `design.md` as the brief — see both [live](https://v0-anydesignexample.vercel.app/) [demos](https://retro-radio-player-zz.vercel.app/) |\n| **[Claude Code](https://claude.com/claude-code)** / **[Cursor](https://cursor.sh)** / **[Windsurf](https://codeium.com/windsurf)** | Drop `design.md` + `design-tokens.json` into context, ask for the build |\n| **Style Dictionary / Tokens Studio / Figma Variables** | Import `design-tokens.json` directly (DTCG) |\n| **gpt-image / Midjourney / SD** | Paste the `element.md` image prompt |\n| **Notion / Linear / a human** | `design.md` reads as a designer brief |\n\n---\n\n## 🧰 Standalone CLI scripts\n\nSeven pure-Python tools in [`scripts/`](./scripts) that **work without Claude**:\n\n| Script | What it does | Deps |\n|---|---|---|\n| `extract_css_vars.py` | Pull every `--*` custom property from a URL's stylesheets, grouped by category | stdlib |\n| `capture_site.py` | Playwright captures: multi-viewport, cookie-banner dismiss, scroll-capture, single-element (`--selector`) | `playwright` |\n| `extract_colors.py` | Dominant colors from an image, with area % | `Pillow` |\n| `check_contrast.py` | WCAG 2.1 contrast table for color pairs | stdlib |\n| `lint_design_md.py` | Validate a `design.md` against the spec | stdlib |\n| `verify_design.py` | **Drift audit**: compare a `design-tokens.json` against the live URL — is your spec still true? | stdlib |\n| `export_for_claude_design.py` | Bundle tokens into PPTX/DOCX/CSS/Tailwind for [claude.ai/design](https://claude.ai/design) | `pyyaml`, `python-pptx`, `python-docx` |\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eCommand examples\u003c/b\u003e\u003c/summary\u003e\n\n```bash\n# Pull design tokens from any URL — no Claude needed\npython scripts/extract_css_vars.py https://vercel.com/ --pretty\n\n# Multi-viewport responsive captures\npython scripts/capture_site.py https://your-site.com --viewports desktop,tablet,mobile\n\n# Capture a single element (screenshot + outerHTML)\npython scripts/capture_site.py https://your-site.com --selector \"header.navbar\" -o element.png\n\n# WCAG contrast check\npython scripts/check_contrast.py --pair \"#111,#FFF\" --pair \"#3B82F6,#FFF\"\n\n# Validate a generated design.md\npython scripts/lint_design_md.py path/to/design.md\n\n# Audit declared tokens vs live site (the drift tool)\npython scripts/verify_design.py path/to/design-tokens.json https://vercel.com/\n\n# Bundle a design.md + tokens for upload to claude.ai/design\npython scripts/export_for_claude_design.py path/to/design.md --out my-brand-bundle/\n```\n\nEach script has `--help`.\n\n\u003c/details\u003e\n\n---\n\n## 💡 More you can do with it\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eUse with Claude Design\u003c/b\u003e — get your captured brand into claude.ai/design persistently\u003c/summary\u003e\n\n\u003cbr\u003e\n\n[**Claude Design**](https://claude.ai/design) (Anthropic Labs) builds a persistent\ndesign system from brand assets you upload — PPTX decks, DOCX briefs, code repos.\nIt doesn't ingest DTCG JSON or markdown directly, so the\n`export_for_claude_design.py` script bridges the gap:\n\n```bash\npython scripts/export_for_claude_design.py path/to/design.md --out my-brand/\n```\n\n| File | What Claude Design does with it |\n|---|---|\n| `brand-kit.pptx` | Primary asset — cover, atmosphere, swatches, typography, components, Do's/Don'ts |\n| `brand-overview.docx` | The full `design.md` as Word — use as the brand brief |\n| `tokens.css` | `:root { --... }` from your DTCG tokens — link via \"Code repository\" |\n| `tailwind.config.ts` | Same path, Tailwind v3 form — either works |\n| `README-claude-design.md` | Upload instructions |\n\nWorkflow: run anydesign → export the bundle → upload it in Claude Design's\ndesign-system setup → every future project in your org defaults to that brand.\nReal bundle from the Vercel run:\n[`examples/vercel-landing/claude-design-bundle/`](./examples/vercel-landing/claude-design-bundle).\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eUse cases\u003c/b\u003e — eight real scenarios\u003c/summary\u003e\n\n\u003cbr\u003e\n\n- **🎨 Replicate a reference** — *\"I love how Linear's landing feels — analyze it so I can brief my team.\"* HTML + CSS vars extracted as explicit tokens, `design.md` ready for a Notion brief.\n- **🧩 Tokens from a screenshot** — *\"Pull the palette and typography from this Dribbble shot.\"* Direct vision + `extract_colors.py` for pixel-precise hexes, confidence-marked.\n- **🪄 Copy one element — including art** — *\"Give me a prompt to generate this 3D blob for my own palette.\"* Element mode: token-grounded image prompt + consistency notes telling you which hex to swap for *your* brand.\n- **🛠️ Brief an AI builder** — *\"A portfolio like vercel.com but simpler — give me something I can hand to v0.\"* Reconstruction-emphasis `design.md`, paste and go.\n- **🎯 Audit a Figma handoff** — declared variables (`get_variable_defs`) cross-referenced against actual usage; inconsistencies land in Open Questions.\n- **🔍 Design vs production** — pass the Figma file *and* the live site; get a discrepancies section: diverged tokens, off-spec components, missing states.\n- **📚 Document a legacy product** — extract the implicit system your team built without naming it; start from a baseline instead of zero.\n- **♿ WCAG quick-check** — `design-a11y.md` with AA/AAA ratios for every captured text/surface pair.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eHow the skill thinks\u003c/b\u003e — workflow + project structure\u003c/summary\u003e\n\n\u003cbr\u003e\n\nA strict 5-step workflow (full detail in [SKILL.md](./SKILL.md)):\n\n```\nStep 1 — Identify source, mode (full vs element), and emphasis\n   ↓\nStep 2 — Capture material\n         (vision / HTML + CSS vars / Playwright / Figma MCP)\n   ↓\nStep 3 — Layered analysis (Identity → System → Components → Layout\n         → Reconstruction → Brand rules) + Art Direction QA pass\n   ↓\nStep 4 — Generate design.md + design-tokens.json   (or element.md)\n   ↓\nStep 5 — Deliver + suggest next step\n```\n\nThe layered analysis goes general → specific, never jumping from \"mood\" to \"tokens\"\nwithout passing through \"system\" — that's what makes the output coherent.\n\n```\nanydesign/\n├── SKILL.md                       Main instructions (the \"brain\")\n├── references/                    Loaded on-demand (progressive disclosure)\n│   ├── capture-flows.md           How to capture each source type\n│   ├── analysis-framework.md      The analysis layers in detail\n│   ├── token-extraction.md        Token inference rigor + DTCG\n│   ├── output-template.md         design.md template\n│   └── element-copy.md            Element mode: element.md + image prompts\n├── scripts/                       7 standalone CLI tools\n└── examples/                      Real, reproducible runs\n    ├── vercel-landing/            Full analysis of vercel.com (+ Claude Design bundle)\n    ├── landing-example/           Synthetic minimal example\n    ├── poolsuite-player-element/  Element mode, code path (+ v0 rebuild)\n    ├── discord-hero-asset/        Element mode, asset path (+ generated images)\n    └── v0-downstream-demo/        The original downstream proof\n```\n\n\u003c/details\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**MIT** · See [LICENSE](./LICENSE) · Changelog in [CHANGELOG.md](./CHANGELOG.md)\n\nMade something with anydesign? **[Open an issue and show it](https://github.com/uxKero/anydesign/issues)** ✨\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FuxKero%2Fanydesign","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FuxKero%2Fanydesign","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FuxKero%2Fanydesign/lists"}