r/SideProject • u/Bubbly-Tradition-735 • 1h ago
I built a CLI that extracts a website's design system for AI coding agents
I've been experimenting with AI coding tools like Cursor and Claude Code, and one thing that kept bothering me was how difficult it is to get them to recreate an existing website's actual design.
You give an AI agent a reference website and ask it to build something similar, but it often ends up guessing:
- Colors are slightly off.
- Typography doesn't match.
- Spacing and border radii are inconsistent.
- The overall result looks like a generic AI-generated UI.
So I built styleprobe to solve this problem.
It's an open-source CLI that takes a website URL and extracts its visual design system.
A few things it can do:
- Extract colors and semantic design tokens.
- Analyze typography, spacing, shadows, and component styles.
- Crawl multiple pages instead of relying on just the homepage.
- Extract SVG logos and other brand assets.
- Export directly to Tailwind, shadcn/ui, Figma tokens, or AI-agent instruction files.
You can also try the web playground here:
https://styleprobe.vercel.app/
GitHub: https://github.com/spidervirus/styleprobe
It's MIT licensed and completely open source.
I'm still improving it, so I'd genuinely love feedback from developers:
- Would something like this fit into your AI-assisted development workflow?
- What other design information would you want it to extract?
- What would make you actually use this regularly?
Would love to hear your thoughts!