Paste a URL. It reads the real colors, fonts, and radius, captures the header and sections, and writes a DESIGN.md plus a component template to your machine.
The Design.md Generator is a design generator and a web design template generator in one. It reads a live URL and hands back a clean design system: the real colors, the type scale, the radius language, and the header and sections rebuilt as reusable components. Paste a link and, in seconds, you have a DESIGN.md brand spec and a component template you can drop into any build.
Most tools stop at a screenshot or a color picker. This one reads the rendered styles the way a browser sees them. It ranks the palette by how often each color is actually used, pulls the fonts including Google Fonts, reads the border radius, and captures the layout. The output is structured, portable, and ready for AI web design, WordPress, Elementor, or a plain HTML build.
Designers document a brand with it. Developers match an existing site without eyeballing hex codes. Agencies start a redesign with the tokens already mapped to components. If you have ever tried to copy a website's look by hand, this replaces the guesswork with the real numbers.
It reads the rendered page the way a browser paints it. Screenshot tools and color pickers only guess.
It reads the page plus up to six linked stylesheets and inline styles, so it finds the true brand color, not just what sits on top.
It rebuilds the header and sections as reusable component blocks mapped to library IDs. Most tools hand you a palette and stop.
It ignores Bootstrap and Tailwind default palettes, so you get the true brand, not the framework's utility green or blue.
DESIGN.md tokens ready for AI web design, WordPress, Elementor, or plain HTML. Copy or download in seconds.
Members keep every DESIGN.md and template in their account, reopen and re-download anytime. Coming for subscribers.
Try one free. Subscribe for 120 credits a month and a growing design library that stays with your account.
See plansColors, type scale, radius, and components, ready to drop into any AI build.
Header and sections rebuilt in the site's own tokens, mapped to your library IDs.
Raw captured header and sections for a pixel-close rebuild when you need it.
Read server-side, nothing stored, files download straight to your device.
Drop in any live site. The engine reads the real rendered page, not a screenshot.
Colors ranked by frequency, fonts, and the radius language, plus the header and sections captured.
A DESIGN.md brand spec and a component template mapped to your library IDs, straight to your device.
Document a brand, or capture a reference style as tokens you can reuse.
Match a site's colors, fonts, and spacing without guessing the values.
Start a redesign with the real design system already mapped to components.
Feed a DESIGN.md into your AI workflow so every page stays on brand.