[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-82675":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":14,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":16,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":9,"pushedAt":9,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":15,"starSnapshotCount":15,"syncStatus":14,"lastSyncTime":36,"discoverSource":37},82675,"anydesign","uxKero\u002Fanydesign","uxKero","Claude skill that analyzes images, websites, and Figma files and generates a structured design.md with token system, component inventory, and reconstruction notes.",null,"Python",101,6,1,2,0,11,46,56.64,"MIT License",false,"main",true,[24,25,26,27,28,29,30,31,32],"ai-agents","anthropic","claude-code","claude-skill","design-system","design-tokens","dtcg","figma","playwright","2026-06-12 04:01:38","# anydesign\n\n> Turn any image, website, or Figma file into a structured `design.md` (with token system,\n> component inventory, and reconstruction notes) that any AI builder or human designer\n> can act on.\n\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-yellow.svg)](https:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT)\n[![Skill Version](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fversion-0.4.0-blue.svg)](.\u002FCHANGELOG.md)\n[![Claude Skill](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FClaude-Skill-purple.svg)](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fdocs\u002Fagents-and-tools\u002Fagent-skills\u002Foverview)\n[![DTCG](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDesign%20Tokens-DTCG-green.svg)](https:\u002F\u002Fwww.designtokens.org\u002F)\n\n![Downstream proof — a running app generated by v0 from a design.md this skill produced](.\u002Fexamples\u002Fv0-downstream-demo\u002Fscreenshot.png)\n\n*↑ This running app at [v0-anydesignexample.vercel.app](https:\u002F\u002Fv0-anydesignexample.vercel.app\u002F) was built by v0 from a `design.md` generated by this skill. The skill output is portable — v0, Lovable, Cursor, Claude Code, Bolt, or a human designer can all consume it.*\n\n---\n\n## What this is\n\n**`anydesign` runs in Claude**, but **its output is universal**.\n\n- The skill itself is a [Claude Agent Skill](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fdocs\u002Fagents-and-tools\u002Fagent-skills\u002Foverview) — install it in Claude Code or claude.ai and Claude knows how to analyze any visual reference you give it.\n- The output is plain **Markdown + W3C DTCG JSON** — feed it to any AI builder (v0, Lovable, Cursor, Bolt, Claude Code, Windsurf), hand it to a designer, or paste it into a brief. No lock-in.\n- The four companion Python scripts in [`scripts\u002F`](.\u002Fscripts) are **standalone CLI tools** — usable in any workflow, with or without Claude.\n\nIt's not a description generator. It's a **design diagnostics** tool.\n\n---\n\n## What you get\n\nWhen you point `anydesign` at a visual source, it produces:\n\n1. **`design.md`** — a 7-section structured document with TL;DR, visual identity, full design system (colors, typography, spacing, radii, shadows, borders), component inventory, layout & composition, reconstruction notes, and open questions.\n\n2. **`design-tokens.json`** — structured tokens in the [W3C Design Tokens Community Group (DTCG)](https:\u002F\u002Fwww.designtokens.org\u002F) format (`$value` \u002F `$type`), directly consumable by Style Dictionary, Figma Variables, Tokens Studio, or any DTCG-compliant tooling.\n\n3. **`design-a11y.md`** *(optional)* — WCAG 2.1 contrast report for the extracted color pairs with AA\u002FAAA pass-fail markers and interpretation.\n\nEvery inference carries a **confidence level** (✅ high \u002F ⚠️ medium \u002F ❓ low) so the output is honest about what was directly observed vs. reasonably inferred.\n\n---\n\n## Real run on a real site — vercel.com\n\nWant to see what it produces on a recognizable production site? Open\n**[`examples\u002Fvercel-landing\u002F`](.\u002Fexamples\u002Fvercel-landing)**.\n\nIt contains a real end-to-end run against the live Vercel homepage: 808 CSS custom\nproperties extracted from 6 stylesheets + 2 inline blocks, the full Geist design-system\ntoken map in DTCG, real desktop screenshot, and a WCAG contrast report. Nothing\ninvented — every hex code is verbatim from Vercel's live CSS.\n\n![Vercel landing capture used as the skill's input](.\u002Fexamples\u002Fvercel-landing\u002Fcapture.png)\n\n*↑ The actual screenshot the skill captured and analyzed. See [`design.md`](.\u002Fexamples\u002Fvercel-landing\u002Fdesign.md) and [`design-tokens.json`](.\u002Fexamples\u002Fvercel-landing\u002Fdesign-tokens.json) for the full output.*\n\nA smaller synthetic example lives at [`examples\u002Flanding-example\u002F`](.\u002Fexamples\u002Flanding-example) for quick orientation.\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 to use the output |\n|---|---|\n| **[v0](https:\u002F\u002Fv0.dev)** | Paste `design.md` as the project brief — see the live [v0 demo](https:\u002F\u002Fv0-anydesignexample.vercel.app\u002F) generated by this exact flow |\n| **[Lovable](https:\u002F\u002Flovable.dev)** | Same — paste `design.md` and iterate visually |\n| **[Cursor](https:\u002F\u002Fcursor.sh) \u002F [Windsurf](https:\u002F\u002Fcodeium.com\u002Fwindsurf)** | Drop `design.md` into your context, then ask for components |\n| **[Claude Code](https:\u002F\u002Fclaude.com\u002Fclaude-code)** | Provide `design.md` + `design-tokens.json` in a fresh session, ask for the build |\n| **[Bolt](https:\u002F\u002Fbolt.new)** | Paste `design.md` as the prompt |\n| **Style Dictionary \u002F Tokens Studio \u002F Figma Variables** | Import `design-tokens.json` directly (DTCG format) |\n| **Notion \u002F Linear \u002F Figma docs** | Paste `design.md` as a designer brief |\n| **A human** | Open `design.md` in any editor and read it |\n\nThe `design.md` is intentionally structured (TL;DR → identity → tokens → components → layout → reconstruction notes) so AI builders can quote-extract specific sections.\n\n---\n\n## Standalone CLI scripts\n\nThe six scripts in [`scripts\u002F`](.\u002Fscripts) are pure Python and **work without Claude**.\nUse them in any workflow:\n\n| Script | What it does | Dependencies |\n|---|---|---|\n| `extract_css_vars.py` | Fetch a URL, find every linked stylesheet + inline `\u003Cstyle>`, extract all `--*` custom properties grouped by category | stdlib only |\n| `capture_site.py` | Multi-viewport Playwright screenshots with cookie banner auto-dismiss and scroll-capture for lazy content | `playwright` |\n| `extract_colors.py` | Dominant color extraction from a local image (Pillow quantization) | `Pillow` |\n| `check_contrast.py` | WCAG 2.1 contrast checker — accepts multiple pairs or a pairs file, emits a markdown table | stdlib only |\n| `lint_design_md.py` | Validates a `design.md` against the spec: YAML frontmatter, `{token.refs}` resolve, 1:1 component mapping, Section 6 non-empty | stdlib only |\n| `verify_design.py` | Audits a `design-tokens.json` against a live URL — reports drift between declared values and current CSS. *The differentiator: lets you check if your captured tokens still match the brand.* | stdlib only |\n| `export_for_claude_design.py` | Generates a multi-format bundle (PPTX, DOCX, CSS, Tailwind config, README) ready to upload as brand assets in [claude.ai\u002Fdesign](https:\u002F\u002Fclaude.ai\u002Fdesign). See the [Claude Design section](#use-with-claude-design) below. | `pyyaml`, `python-pptx`, `python-docx` |\n\n```bash\n# Pull design tokens from any URL — no Claude needed\npython scripts\u002Fextract_css_vars.py https:\u002F\u002Fvercel.com\u002F --pretty\n\n# Multi-viewport responsive captures\npython scripts\u002Fcapture_site.py https:\u002F\u002Fyour-site.com --viewports desktop,tablet,mobile\n\n# WCAG contrast check\npython scripts\u002Fcheck_contrast.py --pair \"#111,#FFF\" --pair \"#3B82F6,#FFF\"\n\n# Validate a generated design.md\npython scripts\u002Flint_design_md.py path\u002Fto\u002Fdesign.md\n\n# Audit declared tokens vs live site (the audit tool)\npython scripts\u002Fverify_design.py path\u002Fto\u002Fdesign-tokens.json https:\u002F\u002Fvercel.com\u002F\n\n# Bundle a design.md + tokens for upload to claude.ai\u002Fdesign\npython scripts\u002Fexport_for_claude_design.py path\u002Fto\u002Fdesign.md --out my-brand-bundle\u002F\n```\n\nEach script has `--help`.\n\n---\n\n## Use with Claude Design\n\n[**Claude Design**](https:\u002F\u002Fclaude.ai\u002Fdesign) (Anthropic Labs, launched April 2026) builds\na persistent design system from \"brand and product assets\" you upload during setup —\nPPTX decks, DOCX briefs, code repos. Every future project in your org defaults to that\nsystem.\n\n`anydesign` produces DTCG tokens and structured markdown, but Claude Design doesn't ingest\neither directly. The `export_for_claude_design.py` script bridges the gap.\n\n```bash\npython scripts\u002Fexport_for_claude_design.py path\u002Fto\u002Fdesign.md --out my-brand\u002F\n```\n\nThis emits a `my-brand\u002F` folder with five artifacts, each targeting one of Claude Design's\nsetup inputs:\n\n| File | What Claude Design does with it |\n|---|---|\n| `brand-kit.pptx` | Primary asset — cover, atmosphere, color swatches, typography samples, components, Do's\u002FDon'ts. Claude Design ingests PPTX directly. |\n| `brand-overview.docx` | The full `design.md` rendered as Word. Use as the brand brief in the setup flow. |\n| `tokens.css` | CSS custom properties generated from your DTCG tokens. Push to a small repo and link it under \"Code repository\" — Claude Design's extractor reads `:root { --... }`. |\n| `tailwind.config.ts` | Same path as `tokens.css`, in Tailwind v3 config form. Either format works. |\n| `README-claude-design.md` | Upload instructions and troubleshooting. |\n\n**Workflow:**\n\n1. Run `anydesign` on your reference (image, URL, or Figma file) → get `design.md` + `design-tokens.json`.\n2. Run `python scripts\u002Fexport_for_claude_design.py design.md` → get the bundle.\n3. Open [claude.ai\u002Fdesign](https:\u002F\u002Fclaude.ai\u002Fdesign), create a new project, and upload the bundle in the design-system setup step.\n4. Claude Design extracts colors, typography, and components from the bundle. Review and adjust.\n5. Every future project in your org now uses this brand as the default.\n\nThis is the only path today that gets your captured design system **persistently** into\nClaude Design — pasting `design.md` as a prompt works for a single project but doesn't\nbuild the design-system layer.\n\nSee [`examples\u002Fvercel-landing\u002Fclaude-design-bundle\u002F`](.\u002Fexamples\u002Fvercel-landing\u002Fclaude-design-bundle) for a real bundle generated from the Vercel run.\n\n---\n\n## Installation\n\n### 1. Clone the repo\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002FuxKero\u002Fanydesign.git\n```\n\n### 2. Copy the skill folder into your Claude skills directory\n\n```bash\n# For personal skills (all projects)\ncp -r anydesign ~\u002F.claude\u002Fskills\u002F\n\n# OR for a single project\ncp -r anydesign \u002Fpath\u002Fto\u002Fproject\u002F.claude\u002Fskills\u002F\n```\n\n### 3. (Optional) Install Python dependencies for the companion scripts\n\n```bash\npip install -r requirements.txt\nplaywright install chromium  # only if you'll use capture_site.py\n```\n\nFirst-time Chromium install is ~300MB.\n\n### 4. (Optional) Connect the Figma MCP\n\nTo analyze Figma files, connect the Figma MCP from the Claude app\n(`Settings → Connectors`). The skill uses these tools when available:\n`get_metadata`, `get_variable_defs`, `get_design_context`, `get_screenshot`.\n\n---\n\n## Use cases\n\nThe skill activates automatically when Claude detects design-analysis intent in your\nmessage. You don't need to write \"use anydesign\". Here are real scenarios:\n\n### 🎨 Replicating a reference for a client project\n\n> *\"I love how Linear's landing page feels. Can you analyze it so I can brief my team\n> on something similar for our SaaS?\"*\n\nThe skill fetches the HTML, identifies it as content-rich (no Playwright needed),\nextracts CSS custom properties from linked stylesheets as explicit tokens, and produces\na `design.md` you can paste into a Notion brief. You also get `design-tokens.json` in\nDTCG format to feed straight into Style Dictionary or Figma Variables.\n\n### 🧩 Extracting tokens from a Pinterest reference\n\n> *\"I have this screenshot saved from Dribbble. Pull the palette and typography so I\n> can start building a moodboard.\"*\n\nYou upload the PNG. The skill uses direct vision to extract colors (and optionally calls\n`extract_colors.py` for pixel-precise dominant colors), identifies the likely typeface,\ninfers the spacing unit, and marks each inference with a confidence level. The \"Open\nQuestions\" section tells you what you'd need a clearer reference for.\n\n### 🛠️ Briefing v0 or Claude Code for a from-scratch build\n\n> *\"I want a portfolio site that looks like vercel.com but simpler. Generate a design\n> brief I can hand to v0.\"*\n\nThe skill analyzes vercel.com, frames the output with **Reconstruction emphasis**, and\ngives you a `design.md` you paste straight into v0 — see the\n[live demo](https:\u002F\u002Fv0-anydesignexample.vercel.app\u002F) for proof that the workflow lands.\n\n### 🎯 Auditing a Figma file before handoff to dev\n\n> *\"Here's the Figma file for our new dashboard. Make sure the tokens are consistent\n> before I send it to engineering.\"*\n\nThe skill uses the Figma MCP to pull `get_variable_defs` (explicit tokens defined by the\ndesigner) and `get_design_context` (actual usage). It cross-references both and flags\ninconsistencies in the \"Open Questions\" section — like spacing values that don't match\nthe declared scale.\n\n### 🔍 Comparing design vs. production implementation\n\n> *\"Here's the Figma file and here's the live site. Did the team build what was\n> designed?\"*\n\nYou pass both. The skill analyzes each and adds an extra **discrepancies** section:\ntokens that diverged, components that look different, missing states.\n\n### 📚 Documenting a legacy product's visual language\n\n> *\"We've never had a design system. Can you extract one from our current production\n> site?\"*\n\nThe skill scans your site, infers the implicit system (the one your team built without\nnaming it), and gives you a starting point for a real design system: documented colors,\ntypography scale, component variants observed. You now have a baseline to refine\ninstead of starting from zero.\n\n### ♿ Accessibility quick-check on a brand palette\n\n> *\"We have a brand palette. Do the text\u002Fbackground combinations meet WCAG AA?\"*\n\nAfter tokens are extracted, the skill runs `check_contrast.py` over the relevant pairs\nand emits `design-a11y.md` with WCAG 2.1 ratios and pass\u002Ffail markers for AA and AAA\n(both normal and large text). You see at a glance which combinations need adjusting.\n\n---\n\n## How the skill thinks\n\nIt follows a strict 5-step workflow that you can read in detail in [SKILL.md](.\u002FSKILL.md):\n\n```\nStep 1 — Identify source and emphasis\n   ↓\nStep 2 — Capture material\n         (vision \u002F HTML + CSS vars \u002F Playwright multi-viewport fallback \u002F Figma MCP)\n   ↓\nStep 3 — Layered analysis (Identity → System → Components → Layout → Reconstruction)\n   ↓\nStep 4 — Generate design.md + design-tokens.json (+ optional design-a11y.md)\n   ↓\nStep 5 — Deliver + suggest next step\n```\n\nThe \"layered analysis\" goes from general to specific — never jumping from \"mood\" to\n\"tokens\" without passing through \"system\". This is what makes the output coherent\ninstead of just a list of observations.\n\n---\n\n## Project structure\n\n```\nanydesign\u002F\n├── SKILL.md                       Main instructions (the \"brain\")\n├── README.md                      This file\n├── LICENSE                        MIT\n├── CHANGELOG.md                   Version history\n├── requirements.txt               Optional Python deps for companion scripts\n├── references\u002F                    Loaded on-demand during the skill workflow\n│   ├── capture-flows.md           How to capture each source type\n│   ├── analysis-framework.md      The 5 analysis layers in detail\n│   ├── token-extraction.md        How to infer tokens with rigor (+ DTCG format)\n│   └── output-template.md         design.md template\n├── scripts\u002F                       Standalone CLI tools (work without Claude)\n│   ├── capture_site.py            Multi-viewport Playwright capture\n│   ├── extract_css_vars.py        CSS custom properties extractor\n│   ├── extract_colors.py          Dominant color extractor (images)\n│   ├── check_contrast.py          WCAG 2.1 contrast checker\n│   ├── lint_design_md.py          design.md spec validator\n│   └── verify_design.py           Live-URL drift auditor for design-tokens.json\n└── examples\u002F                      Sample outputs\n    ├── vercel-landing\u002F            Real run against vercel.com\n    ├── landing-example\u002F           Smaller synthetic example\n    └── v0-downstream-demo\u002F        Proof that the output works with v0\n```\n\nThe skill uses **progressive disclosure**: `SKILL.md` stays compact, and reference files\nload only when the workflow reaches the corresponding step. This keeps Claude's context\nwindow efficient.\n\n---\n\n## License\n\nMIT. See [LICENSE](.\u002FLICENSE).\n","anydesign 是一个能够分析图片、网站和 Figma 文件，并生成结构化设计文档（包含设计令牌系统、组件清单和重构说明）的 Claude 技能。项目采用 Python 语言编写，具备从视觉素材中提取设计元素并自动生成可移植 Markdown 格式的 `design.md` 文件的核心功能，同时支持 W3C 设计令牌社区组 (DTCG) 标准的 JSON 格式输出。此外，它还提供了一个可选的辅助文件 `design-a11y.md` 来报告颜色对比度是否符合 WCAG 2.1 标准。此工具非常适合需要快速将现有设计转换为易于理解和实施的设计文档的场景，无论是供 AI 构建器还是人类设计师使用都非常方便。","2026-06-11 04:08:54","CREATED_QUERY"]