Extract CSS, computed styles, and HTML metadata from public HTTPS URLs into DESIGN.md.
npx skills add https://github.com/bishoe01/blueprint-extractor --skill extract-bishoe01
Please help me install this Agent Skill. Skill: extract Source: https://github.com/bishoe01/blueprint-extractor/tree/main Command: npx skills add https://github.com/bishoe01/blueprint-extractor --skill extract-bishoe01
Turns a public website URL into an agent-ready DESIGN.md by translating observable CSS, tokens, and layout into a reusable design brief, without cloning the site or claiming brand guidelines.
blueprint.json and sources.json, captures screenshots, and synthesizes DESIGN.md using the 9-section contract.Ask your agent to run /extract https://example.com to generate a DESIGN.md from that public site.
High-intent search queries and answers about installing and using this skill.
To extract a design system from a public website, provide an HTTPS URL to generate a DESIGN.md file. The tool gathers observable CSS, computed styles, and HTML metadata to synthesize a token-grounded design brief.
Yes, you can generate a design brief directly from a public URL without cloning the site. The workflow validates the URL, captures screenshots, and translates observable styles into a reusable DESIGN.md document.
Yes, Playwright is required to extract CSS tokens deterministically. It enables the automated workflow to gather evidence across desktop and mobile views by computing styles directly from the rendered page.
The best way to turn website CSS into a reusable design brief is using an evidence-driven extraction workflow. It captures linked styles and computed styles to produce a blueprint.json and a DESIGN.md following a 9-section contract.
Yes, the design extraction process captures both desktop and mobile computed styles. By gathering evidence across different viewport sizes, it ensures the resulting DESIGN.md accurately reflects the target site's responsive visual language.
A key limitation is that extraction is restricted to public HTTPS pages and observable CSS. It does not clone the site or claim official brand guidelines, but rather translates the visible visual language into transferable design guidance.
aimasteraccDrive a local headless browser to navigate URLs, interact with elements, and verify page state.
Higashi-KotaStandardize CSS styling with design tokens and grid-first layouts.
AradotsoConvert webpage DOM layouts, computed styles, and assets into Figma-compatible JSON.
paolomozExtract design tokens and component styles from live websites using Puppeteer.