uxKero

uxKero / anydesign

Public

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

ai-agents anthropic claude-code claude-skill design-system
17
3
89% credibility
Found May 27, 2026 at 17 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
Python
AI Summary

anydesign is a design analysis tool that takes any visual reference—a website, screenshot, or Figma file—and extracts a complete design system from it. It produces structured documentation including color palettes, typography rules, spacing guidelines, and component notes that designers and AI builders can use to recreate the look. The tool works as a skill inside Claude or as standalone command-line scripts, making it accessible whether you prefer a conversational interface or terminal commands. It outputs standard formats like Markdown and W3C Design Tokens JSON, so the extracted design system works with popular tools like Figma, Style Dictionary, Tailwind, and AI coding assistants.

How It Works

1
💡 You find a design you love

You stumble upon a website with the perfect look and feel—maybe it's Linear's landing page or a sleek portfolio—and you want to recreate that exact vibe for your own project.

2
🎯 You share what caught your eye

You give the tool a website address, upload a screenshot, or connect a Figma file. It doesn't matter what format you have—the tool works with whatever you can show it.

3
🔍 The magic of design extraction

Behind the scenes, the tool examines every color, font, spacing rule, and component it can find. It builds a complete picture of the design system that makes that look work.

4
📋 You receive a complete design brief

The tool hands you a structured document with your color palette, typography choices, spacing rules, and component notes—everything a designer or AI builder needs to recreate the look.

5
You choose how to use your design brief
🤖
Hand it to an AI builder

Paste your design brief into v0, Lovable, Bolt, or any AI coding tool and watch it generate code that matches the original design.

🎨
Import into your design tools

Drop the design tokens directly into Figma Variables, Style Dictionary, or Tailwind to build your own components with the same visual language.

✅
Check accessibility

Run a quick contrast check to make sure your color combinations meet accessibility standards for everyone.

🚀 Your project comes to life

Whether you built it yourself or handed it to an AI, your new project now has that exact design you fell in love with—and it only took sharing a link.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 17 to 17 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is anydesign?

Anydesign is a Claude skill that reverse-engineers design systems from any visual source—screenshots, live websites, or Figma files—and spits out structured documentation you can hand to an AI builder or a human designer. Point it at a competitor's landing page, and it extracts the color palette, typography scale, spacing system, and component inventory into a machine-readable format. The core output is a `design.md` file with seven sections covering everything from visual identity to reconstruction notes, plus a `design-tokens.json` in W3C DTCG format that feeds directly into Style Dictionary, Figma Variables, or Tokens Studio. It also includes standalone Python CLI tools for extracting CSS custom properties, checking WCAG contrast ratios, and auditing whether your documented tokens still match a live site. The skill runs inside Claude Code or claude.ai, but its deliverables are plain Markdown and JSON—completely tool-agnostic.

Why is it gaining traction?

The hook is portability. AI coding tools like v0, Lovable, Cursor, and Bolt all speak Markdown, so a `design.md` generated here becomes a universal brief you paste directly into any of them. The README even links to a live Vercel app built by v0 from an anydesign output, which is concrete proof the workflow lands. The DTCG token format is the second hook—design tokens extracted here slot straight into existing design-system tooling without translation. The standalone CLI scripts are a nice bonus for teams that want the extraction power without committing to the full Claude skill workflow.

Who should use this?

Frontend developers building client sites who need to match a reference design quickly. Design-system maintainers documenting an existing product's implicit visual language. Teams using AI coding tools who want to feed a design brief instead of describing features in prose. Agencies replicating brand styles for multiple projects. The Figma MCP integration makes it specifically useful for designers doing accessibility audits before handing off to engineering.

Verdict

Anydesign solves a real workflow gap—turning visual references into actionable design documentation for AI builders—and the DTCG token output is genuinely useful for design-system work. However, the credibility score of 0.9% and only 17 stars reflect a very early-stage project with limited community validation. The documentation is thorough and the examples are real, which is encouraging, but there's no visible test suite or contribution history. Worth experimenting with if your workflow involves AI-assisted frontend development, but don't bet a production pipeline on it yet.

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.