Manavarya09

Manavarya09 / design-extract

Public

Extract the complete design language from any website — colors, typography, spacing, shadows, and more. npx CLI + Claude Code plugin.

designlang.vercel.app agent-skill agent-skills ai claude-code-plugin cli
895
73
100% credibility
Found Apr 15, 2026 at 272 stars 3x -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
JavaScript
AI Summary

This tool scans any live website to pull out its full design details like colors, fonts, spacing, layouts, and more, creating ready-to-use files for design apps, style sheets, and starter projects.

How It Works

1
🔍 Spot a beautiful website

You admire a stunning site like Stripe and wonder how to capture its style for your own projects.

2
🚀 Tell the tool the address

You share the website link with the handy extractor and press go.

3
✨ It studies the live site

Magic happens as it scans colors, fonts, layouts, and movements right from the real page.

4
📁 Receive ready files

A folder appears with 8 neat files showing every detail of the design.

5
Pick how to use it
🎨
Design in your tool

Load colors and sizes into Figma to match perfectly.

💻
Style your site

Copy styles into your website builder for instant pro looks.

📲
Start a new app

Get a ready app that looks just like the original.

🎉 Your creation shines

Now your project glows with the same polished design, saving hours of guesswork.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 272 to 895 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 design-extract?

Design-extract is a JavaScript npx CLI that reverse-engineers a website's full design language—colors, typography, spacing, shadows, layout patterns, responsive breakpoints, interaction states, and WCAG accessibility—in one command. Run `npx designlang https://example.com` and get eight output files instantly: AI-ready markdown, visual HTML preview, Tailwind config, CSS variables, Figma variables, React/shadcn themes, and W3C design tokens. It solves the pain of manually auditing live sites for design copy or building themes from scratch.

Why is it gaining traction?

Unlike basic design extractors that grab just colors and fonts, this pulls layout grids/flex patterns, simulates hovers/focuses, scores design quality across seven categories (A-F grades), and supports multi-brand comparisons or live-site syncing. The `clone` command spits out a runnable Next.js app with the extracted design, and `--full` mode adds screenshots plus four-viewport responsive diffs—features no other tool bundles into a zero-install CLI.

Who should use this?

Frontend devs cloning competitor UIs for prototypes, design system teams syncing tokens from production sites, or agencies doing complete extract copy for client pitches. Perfect for Tailwind/shadcn users generating configs fast, or UX researchers benchmarking accessibility and responsive behavior across brands like Stripe vs Vercel.

Verdict

Grab it for quick design extraction workflows—33 stars and 1.0% credibility score mean it's early but docs are solid with a live demo site. Production-ready for experiments, but watch for more tests as it matures.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.