Privacyboard, privacy compliance from the SaaSFrame team, is live on Product Hunt today.Support the launch
Pricing
Free tool

Turn any website into a DESIGN.md

Paste a URL. We render the page, measure the colors, type, radii and spacing it really uses, and write a DESIGN.md your coding agent can follow. You also get a consistency check of what ships.

Questions

What is DESIGN.md?
DESIGN.md is an open format, introduced by Google, that describes a design system in one Markdown file: machine-readable tokens (colors, typography, radii, spacing, components) in a YAML header, and plain-language guidance below. AI coding agents read it before building UI, so new screens follow your brand instead of generic defaults.
How is the file generated?
We open the page in a real browser at desktop width, read the computed styles of every visible element, group values that look the same, and name them as tokens. Nothing is guessed from a screenshot: every value comes from what the browser renders.
How do I use it with Claude Code, Cursor or Codex?
Save the file as DESIGN.md at the root of your repository and mention it in your CLAUDE.md or AGENTS.md (for example: “Follow DESIGN.md for every UI change”). The agent then reuses the same colors, type scale and radii.
What does the consistency score measure?
It checks what ships: near-duplicate colors, how many grays, font families, font sizes and corner radii are in use, spacing that falls off the base grid, and text below WCAG AA contrast. A lower score means the interface is drifting from a tight system.
Is it free?
Scanning a site and seeing the report is free. Copying or downloading the file needs a free SaaSFrame account. The DESIGN.md of every SaaS in the SaaSFrame library is included with SaaSFrame Pro.