Resources Claude Code skill
Claude Code skillDesign language 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 it with other founders.
The community opens soon. Weekly builds, the full library, and answers when this file does not match your business.