Claude skill
Point it at any website, screenshot, or Figma file, and it extracts the full design blueprint into one design.md you can build from: color and type tokens, a component inventory, the spacing system, and reconstruction notes.
ogtraplord.com was built from a blueprint this skill extracted from rocket.new. The design DNA is the extraction. The content is mine.
This skill answers one question precisely: what is this design made of? Point it at a URL, a screenshot, or a Figma file, and it returns a design.md with real hex tokens, a component inventory, the spacing and elevation system, layout and responsive behaviour, and a reconstruction plan.
The discipline is the product. Every important inference carries a confidence level, colours are hex codes with semantic roles instead of adjectives, and there’s a mandatory open-questions section. For a downstream agent, an invented token does far more damage than an admitted gap.
This is for the moment you find a site you admire and want to understand it precisely enough to build something in its language.
Describing a design is easy and useless. Most reference work dies in the gap between “it feels premium” and something you can build from.
The download is a complete analysis method with an output contract, plus the scripts for the cases where reading the page isn’t enough.
| Step | What happens |
|---|---|
| Identify source and objective | Decide what you’re extracting and what for |
| Capture the material | Capture the evidence instead of approximating it |
| Run the six-layer analysis | Work from identity down to the rules an agent needs |
| Run the art-direction QA pass | Catch what shallow analysis always misses |
| Generate design.md | Produce a build-ready document with its uncertainty declared |
| Deliver and offer continuity | End with the next move instead of “anything else?” |
This skill doesn’t impose a design system. It recovers one. What it enforces is how truthfully that system gets written down.
Output is documentation, so the budget is about completeness and accuracy rather than kilobytes.
A blueprint turns a reference you admire into something a team or an agent can build against.
Worth knowing before you download it.
This is for the moment you find a site you admire and want to understand it precisely enough to build something in its language. The “Who this skill is for” section above lists the three cases it fits best.
A Claude skill: the full method, plus the scripts and reference material it needs. It installs into your own Claude Code setup and runs there, so it never sends anything about your project to me. You can also take just the SKILL.md if you want to read the method before installing it.
Yes. The zip and the raw SKILL.md are both free downloads. You just need a free account so the downloads can be tracked.
No. It produces a written analysis of how a design works: the tokens, components, layout system, and reconstruction notes. What you build from that is your own. It’s the difference between studying a building and photocopying it.
That case is handled explicitly. When the fetched document comes back empty, the bundled Playwright script captures the rendered page at several viewports, and the analysis runs on those instead.
Every step in the sidebar and the overview table is part of how this skill runs. There are 6 of them, and the “Skill steps” panel beside the article describes each one. Expand any row to read what it does.
That’s the intended path. Nothing ships as is. I rebuild it around your brand, your copy, and your goals. Start a project and tell me what you’re building.
Site Blueprint Extraction ships as a Claude skill: one download with the whole method inside it. Install it, point Claude at it, and build.
Download skill (.zip) or just read the SKILL.md
