memvid

memvid / design-memory

Public

Extract and reproduce design systems from any website using deterministic analysis and LLM interpretation.

memvid.com ai ai-ui-builder design-system design-tokens figma
114
10
100% credibility
Found Feb 17, 2026 at 46 stars 2x -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

A tool that crawls websites to extract and document design systems including colors, typography, spacing, components, and principles using browser automation and AI interpretation.

How It Works

1
🔍 Discover Design Memory

You hear about a simple tool that captures the colors, fonts, and layout from any website so you can recreate it perfectly.

2
📦 Get it ready

You install the tool with one easy command, and it asks for a connection to a smart helper service to understand designs.

3
🎨 Capture the magic

You tell it a website address, and in moments it grabs screenshots, pulls out colors, fonts, buttons, and layouts like a design detective.

4
📁 Explore your design files

A new folder appears with friendly guides, color palettes, button recipes, and rules to follow, all written in plain English.

5
🔗 Bring it to your project

You run one more command to copy the colors and styles right into your own website project, making it match instantly.

✅ Perfect match achieved

Your project now looks and feels just like the original website, with all the design secrets saved forever.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 46 to 114 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-memory?

Design-memory is a TypeScript CLI tool that crawls any website, extracts its design system—colors, typography, spacing, radius, components, layout—and interprets it into actionable markdown docs using browser automation and LLM vision analysis. Run `design-memory learn ` to generate a `.design-memory/` folder with tokens, principles, component recipes, and AI-ready skills files; follow up with `design install` to drop CSS variables into your globals.css or Tailwind config. It solves the pain of manually reverse-engineering live designs by automating deterministic extraction plus semantic labeling.

Why is it gaining traction?

Unlike vanilla extract github tools or manual Figma exports, it combines Playwright crawling with GPT-4o vision for layout specs and doctrine, producing installable tokens and diff reports (`design diff `). Developers love the cache-aware pipeline that skips re-crawls, multi-page merging, and AI-optimized outputs like color palettes or motion guidelines—perfect for quick design memory allocator workflows without rebuilding from scratch. The focus on reproduction fidelity stands out in a sea of generic analysis tools.

Who should use this?

Frontend devs cloning competitor UIs or matching client mocks to code. Design system maintainers auditing sites for consistency via diffs. AI builders feeding precise design memory card refs into Cursor/Claude for component generation, skipping vague prompts.

Verdict

Promising early experiment (25 stars, 1.0% credibility) with solid docs, CLI, and tests—try for design memory drawing or extract github data tasks, but expect tweaks as it matures. Worth starring if you reverse-engineer sites weekly.

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.