Resources Claude Code skill
Claude Code skillDesign blueprint extractor
Point it at any public site. Get a design system CSS file and build instructions for your own product.
What it does
What it does when you run it.
The skill visits a site, reads its type scale, palette, spacing, motion, component patterns, and writes them up as tokens you can build against.
It returns a design language, not a copy of the page. You get the rules; what you build with them is yours.
What's inside
Everything in the file.
Nothing here is held back for a paid tier. The community adds the walkthrough, not extra parts.
- A tokens file: colour, type scale, spacing, radii, easing
- A notes file on layout, motion, component patterns
- Reference captures of the pages it read
- Build instructions written for Claude Code
How to use it
In order.
Read all of them first. The order matters more than any single step.
- Install the skill into your Claude Code skills directory.
- Run it with a public URL.
- Swap the extracted palette and type for your own before building.
- Keep the tokens file as the single source for the build.
Next
Build your AI systems
A practical implementation community for founders building AI-powered systems. Opening soon!