Hyperbrowser exports site design systems

A new design-to-code workflow is spreading through AI coding circles because it promises something frontend teams usually do by hand: turning a live website into reusable design documentation. Hyperbrowser’s public HyperDesign example shows how a URL can be scraped, screenshotted and analyzed into a single `DESIGN.md` file that captures colors, typography, spacing and other UI rules. The underlying format is not proprietary to Hyperbrowser. Google Labs open-sourced `DESIGN.md` in April as a specification for describing a visual identity to coding agents, with tooling to validate files and export tokens into formats such as Tailwind themes and DTCG JSON. That matters because the pitch here is less “clone this page” than “extract the system behind it.” In practice, that means AI coding tools can be given a machine-readable style source instead of inferring brand choices from scattered CSS or screenshots. (github.com) ### Where did this workflow come from? Hyperbrowser published HyperDesign in its `hyperbrowser-app-examples` repository as a Next.js app that “extract[s] a DESIGN.md from any website.” The README says the app captures a viewport screenshot with Hyperbrowser, scrapes page content, and sends both to Claude Opus 4.7 for “combined visual + structural analysis.” (github.com) Hyperbrowser’s broader MCP server, introduced in March 2025, exposes web scraping, crawling and browser-agent tools to clients such as Claude Desktop, Windsurf and Cursor. (github.com) The company says the server lets AI agents access web data and automation primitives through a standard MCP interface. The specific `/design` terminal command cited in social posts appears to be a usage pattern built on those public pieces, rather than a separately documented Hyperbrowser product page I could independently verify. (github.com) The verifiable part is the underlying stack: Hyperbrowser for capture and scraping, Claude for analysis, and `DESIGN.md` as the output format. ### What actually ends up inside the file? (hyperbrowser.ai) Hyperbrowser’s README says the output is a single `DESIGN.md` with YAML frontmatter for tokens and markdown sections for the design system. Its preview parses the YAML into visual panels for colors, type, spacing and radius, while also showing the raw markdown. Google’s spec describes `DESIGN.md` as a self-contained plain-text representation of a design system. (github.com) The repository says the format is meant to give coding agents “a persistent, structured understanding” of visual identity, rather than a loose natural-language prompt. That structure is what makes the workflow reusable. A frontend team can point an agent at the generated file and ask for new components in the same style, instead of manually copying hex values, font stacks and spacing rules from browser devtools. (github.com) That is an inference from the published format and HyperDesign workflow, not a direct company quote. ### Why are developers calling it a “game-changer”? (github.com) Posts on X described the capability as a “game-changer” for frontend work and “vibe coding,” reflecting how fast teams could bootstrap a familiar visual language from an existing site. Those reactions line up with the timing of a broader market push toward agent-readable design files rather than one-off prompts. Google said when it open-sourced the format that `DESIGN.md` lets users export or import design rules from project to project “so you don’t have to reinvent the wheel.” Hyperbrowser’s example makes that idea concrete by starting from a live URL instead of an internal design file. (github.com) ### What should readers be careful about? A generated `DESIGN.md` is only as good as the page sample it sees. (blog.google) Hyperbrowser’s own README says HyperDesign uses a viewport PNG, not a full-page capture, and scrapes page content for “broader style context,” which suggests outputs may reflect the visible page and extracted text rather than a complete multi-page design audit. The next place to watch is the public HyperDesign repository and Google Labs’ `design.md` project. (blog.google) Hyperbrowser’s example code is already live on GitHub, and Google’s repository is updating the spec, validator and export tooling as adoption spreads. (github.com)