DESIGN.md Generator
Paste a website address and get its measured colours, fonts, spacing and shapes as a DESIGN.md that Claude Code, Cursor or any AI coding agent can follow.
Paste an address
Any public website. We fetch its HTML and stylesheets.
We measure the CSS
Colours, fonts, spacing, radii and shadows, weighted by real use.
Give it to your agent
Save DESIGN.md in your repo and tell your agent to follow it.
What’s inside the DESIGN.md
The file starts with YAML front matter holding the exact tokens, so an agent can copy values rather than eyeball them. The markdown below explains how to apply them, in the usual order:
- Overview: light or dark, main accent, fonts, corner style and depth.
- Colors: background, text, primary and accent colours with what each is used for and its contrast ratio, plus the neutral ramp.
- Typography: body, heading and code fonts, sizes, weights and line height.
- Layout: spacing values and grid, content width and breakpoints.
- Elevation and Depth: the shadow levels, or a note that the site is flat.
- Shapes: corner radii, including pills and circles.
- Components: button, input, card, link and navigation styles found by name.
- Do’s and Don’ts: rules built from the measurements, including colours that are too low-contrast for body text.
It ends with the CSS custom properties the site declares and a note on how it was measured.
Using DESIGN.md with an AI coding agent
- Download the file and save it as
DESIGN.mdin your project, for example at the root. - Tell your agent about it once, in its instructions file (
CLAUDE.md,AGENTS.mdor your Cursor rules): “Follow DESIGN.md for all UI work.” - Review what it builds. The file is a starting point: edit the tokens and rules to make the design your own.
Frequently asked questions
What is a DESIGN.md?
A plain-text file that describes a design system for AI coding agents: YAML front matter with the exact tokens (colours, fonts, spacing, radii, shadows), followed by markdown that explains how to use them. Drop it in your project and tell your agent to follow it, and new UI comes out consistent instead of generic.
How accurate is it?
Every value is counted from the site’s own CSS, weighted by how often the page uses each style, and nothing is invented: if the CSS doesn’t say something, the file leaves it out. It reads the HTML and stylesheets the server sends, so styles that only appear after JavaScript runs are missed. On sites built entirely in the browser the result can be thin, and the file says so.
Can I copy another website’s design?
Use it for inspiration and consistency, not to pass your product off as someone else’s. Colours and spacing values are generally fine to reuse, but logos, brand names and distinctive trade dress are not, and many web fonts are licensed: check a font’s licence before you use it in your own project.
Which AI coding tools can use it?
Any agent that can read files in your project, such as Claude Code, Cursor or Codex. Save the file as DESIGN.md in your repository and mention it in your instructions, for example “follow DESIGN.md for all UI work”.
Do you store the sites I extract?
No. Our server fetches the page and its stylesheets, measures them and sends you the result. The result is kept in memory for up to 15 minutes so a repeat request is instant, and it is never written to a database. The website you extract sees a request from Samprix’s server, not from you.
Why did a site fail?
Some sites block automated requests, take too long to answer, or aren’t public. Only public http and https addresses on the standard ports can be read, and each visitor can run up to 10 extractions every 10 minutes.
Related tools
Count words, characters and tokens, and see how much of each chatbot’s limit you use.
Paste text from ChatGPT, Claude or Gemini and get clean plain text back.
Estimate monthly API cost across models, including caching and batch discounts.