robonuggets

robonuggets / design-system

Public

Give Claude a brand reference, get a full design system page + 1-page A4 brand book PDF.

20
6
100% credibility
Found Apr 24, 2026 at 20 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
HTML
AI Summary

A toolkit that guides an AI assistant to generate self-contained HTML design system pages and a printable PDF brand book from brand references like URLs, screenshots, or descriptions.

How It Works

1
🔍 Discover the toolkit

You find this handy toolkit on GitHub that helps your AI assistant create beautiful design guides from any brand idea.

2
📥 Bring it home

You download the toolkit and place it in your AI assistant's special folder so it's ready to use.

3
💬 Share your brand vision

You simply chat with your AI assistant, describing a website, sharing a screenshot, or giving details like colors and name.

4
🎨 AI builds it for you

Your AI pulls out colors, fonts, logos, and more, checks with you on anything missing, and creates the pages.

5
📄 Receive your assets

You get a full scrollable design reference page plus a neat one-page brand poster ready to print or share.

🎉 Brand magic complete

Now you have professional-looking design system files and a PDF brand book to show off or use right away.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

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

This HTML-based toolkit lets you feed Claude a brand reference—like a site URL, screenshot, or description—and instantly get a full design system page plus a one-page A4 brand book PDF. It solves the pain of manually building brand documentation by auto-extracting colors, fonts, logos, and principles into self-contained HTML files, with PDF rendered via headless Chrome or Edge. No build steps or design expertise needed; just prompt Claude in its code environment for outputs ready to share or iterate on.

Why is it gaining traction?

Unlike static design system repos like Airbnb's or Google's, this hooks developers by turning Claude into a one-shot generator for custom brands, pulling from real refs like linear.app or your own sketches. The zero-config workflow—clone, prompt, done—beats Figma plugins or Carbon/IBM kits for speed, especially when you need quick docs akin to Atlassian's or Uber's systems. Early adopters dig the interactive extraction, where Claude confirms details before rendering.

Who should use this?

Solo founders or indie devs racing to brand a MVP, like giving Claude code documentation for a new SaaS. Frontend teams prototyping design systems before full GitHub Figma integration, or product managers prepping interview decks on system design. It's for anyone needing fast, printable assets without granting GitHub repo access or collaborator permissions.

Verdict

Worth a quick clone for prototyping—20 stars and 1.0% credibility score signal it's raw and unproven, with solid docs but no tests. Try it if you're okay iterating on AI outputs; skip for production-scale needs like Geist or Apple systems.

(187 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.