TOOLS — CLAUDE SKILL
Point it at any website, screenshot, or Figma file and it extracts the full design blueprint — color and type tokens, component inventory, spacing system, reconstruction notes — into one design.md you can build from.
ogtraplord.com — built from a blueprint this skill extracted from rocket.new. The design DNA is the extraction; the content is ours.
This skill answers a specific question precisely: what is this design actually made of? Point it at a URL, a screenshot or a Figma file and it returns a design.md — 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 rather than adjectives, and there is a mandatory open-questions section — because for a downstream agent, an invented token is far more damaging 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. The gap between “it feels premium” and something you can actually build from is where most reference work dies.
The download is a complete analysis method with an output contract, plus the scripts for the cases where reading the page is not enough.
| Step | What happens |
|---|---|
| Identify source and objective | Decide what you are extracting and what for |
| Capture the material | Get the real evidence, not an approximation of 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, not with “anything else?” |
This skill does not impose a design system — it recovers one. What it enforces is how honestly that system gets written down.
Output is documentation, so the budget is about completeness and honesty rather than kilobytes.
A blueprint is leverage. It turns a reference you admire into something a team or an agent can actually 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-is-for section above lists the three cases it fits most directly.
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 nothing about your project leaves your machine on our account. You can also take just the SKILL.md if you want to read the method before installing it.
Yes. Both the zip and the raw SKILL.md are free downloads — you just need a free account so the downloads can be tracked.
No. It produces a written analysis — tokens, components, layout system, reconstruction notes — describing how a design works. What you build from that is your own. It is 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 listed in the sidebar and in the overview table is part of how this skill actually runs. There are 6 of them, and each one is described in the Skill Steps panel beside the article — expand any row to read what it does.
That is the intended path. Nothing ships as-is — it gets rebuilt around your brand, your copy and your goals. Start a project and describe what you are 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
