caio-overmind-ventures

caio-overmind-ventures / designkit

Public

Extract design systems from any website. AI-powered design token extraction, styleguide generation, and portable token packages.

13
2
100% credibility
Found Mar 16, 2026 at 13 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

DesignKit uses AI to extract design systems from live web apps and generates interactive styleguides with portable tokens.

How It Works

1
🔍 Discover DesignKit

You find this handy tool that pulls real designs from popular websites like calendars or project apps.

2
💬 Ask your AI helper

Simply tell your AI buddy, like Claude, 'grab the look from linear.app' and it jumps into action.

3
✨ Watch the magic

Your AI logs into the real app, explores screens, and captures exact colors, fonts, and button styles perfectly.

4
🎨 See the styleguide

A beautiful preview page appears with all the colors, fonts, buttons, and dark mode switch working just like the original.

5
📥 Grab your tokens

Download simple files to copy the exact design into your own website or app.

✅ Design match made

Your project now looks and feels identical to the pro app you love, without starting from scratch.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 13 to 13 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 designkit?

Designkit is a TypeScript tool that uses AI agents to extract design systems from live websites, pulling exact tokens like colors, fonts, radii, and shadows directly from authenticated app UIs—not just landing pages. You feed it a URL like linear.app via OpenClaw or Claude, and it navigates screens, grabs computed CSS values, then spits out a full Next.js styleguide with shadcn/ui components plus portable packages (Tailwind presets, CSS vars, JSON). Perfect for reverse-engineering extract design system from website or extract design tokens without Figma exports.

Why is it gaining traction?

Unlike screenshot-based tools that approximate, it reads real DOM styles for semantic tokens (success/error colors, dark mode switches) and generates interactive previews plus drop-in Tailwind configs—saving hours rebuilding UIs from apps like Cal.com or Vercel. The hub dashboard lets you preview, rebuild, and download tokens with screenshots, making extract design from website feel instant. AI orchestration hooks devs already using agents, turning "extract design from linear.app" into ready-to-use design kits.

Who should use this?

Frontend devs cloning SaaS UIs (Linear, Vercel dashboards) or prototyping with real tokens. Design teams without Figma access needing extract design tokens from website for Tailwind projects. Indie hackers speeding up design kitchen recreations without manual CSS audits.

Verdict

Promising for token extraction experiments (live demo shines), but at 13 stars and 1.0% credibility, it's early—docs are README-only, no tests visible. Try for inspiration, not production; watch for stability as it matures.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.