PageBlueprint - Website to DESIGN.md & AI Context

Description

Turn any website into a DESIGN.md your coding agent can build from. Measured, evidence-backed, local-first, no account. PageBlueprint measures what a web page actually renders — colour, type, spacing, corners, shadows, components and layout — and writes it up as Markdown your coding agent can follow. Why it is different Most extractors count declarations, so a colour named 200 times in a stylesheet looks important. PageBlueprint ranks by painted area instead, so the brand colour covering a hero outranks a grey that appears everywhere and is barely visible. That is how a designer reads a page, and it is why the result is usable rather than a dump. Every claim carries its evidence Nothing is asserted without a label. Measured means read off the rendered page. Worked out means computed from those measurements. Our best guess means a heuristic. Couldn't see means we tried and failed, and we say so. A stylesheet the browser will not let us read is reported as unreadable rather than filled in with an assumption. Every capture gets a completeness score with an itemised list of what reduced it. What you get A written design brief, and the measurements behind it: the colour, type and spacing values, the components found with their real CSS, a map of the page's sections, contrast and semantics findings you can check, and screenshots. The same values are also written in the formats design and code tools already read, so you are not converting anything by hand. Light and dark, both measured Capture a page in its dark theme and the two are paired into one set of variables holding two real values, using the switch the site already has. If only one theme was captured, it says so rather than inventing the other. Ways to capture Quick takes the page as it stands. Deep scrolls and expands to collect far more. Component studies a single element. Journey records a flow across interaction states. Site follows links one hop from the page you are on, up to a limit you set, then returns your tab. Compare diffs two captures and writes the difference out as CSS you can apply. Hover to inspect Point at anything and read its styles as you move, including the contrast ratio and whether it passes. Pin an element to try changes on the live page, then put it back. Nothing is captured or stored. Privacy, plainly No account, no server, no analytics, no tracking. Captures stay in your browser. The extension ships with no site access and asks for one origin at a time, when you capture it. Password and payment fields are never read, and are blanked before any screenshot is taken. AI is optional Everything works with no AI and no key. Add your own key if you want a written summary. You see the exact request before it is sent. Nothing is sent otherwise. What it cannot do It measures a rendered page. It cannot recover framework or server source code, and no browser tool can. Cross-origin frames, closed shadow roots and canvas contents are off limits by browser design, and it tells you when it hits one. It will not bundle a site's logo files for you.

Details & SEO