Darnly
Free tools

DESIGN.md generator: a style guide for your AI agent

Paste a site and get a short DESIGN.md with its colors, fonts, sizes, spacing and component styles. Put it in your project, and your AI coding agent builds every screen in that style.

More free tools

How it works

  1. Paste the address of a site whose look you want your app to follow.
  2. We read the page and its stylesheets and pull out its colors, fonts, type sizes, spacing, corner radius, shadows, and how its buttons and cards look.
  3. Download the DESIGN.md file and save it in your project’s top folder, or copy a prompt that tells your AI coding agent to save it and follow it.

Questions

What is a DESIGN.md file?

A short style guide written for AI coding agents like Claude Code, Codex and Cursor. It lists the exact colors, fonts, sizes, spacing and component styles to use, so the agent stops guessing and every new screen looks like it belongs to the same app.

Where do I put DESIGN.md?

In the top folder of your project, next to package.json. Then tell your agent about it once: add the line Follow DESIGN.md for all UI work. to CLAUDE.md (Claude Code) or AGENTS.md (Codex, Cursor and most others). The “Copy prompt for your AI agent” button asks the agent to do both for you.

Can I copy another site’s design?

Use it for inspiration and to learn how good sites set up their styles, not to clone someone else’s brand. Colors, sizes and spacing are common building blocks, but logos, illustrations and paid fonts belong to their owners. Pointing it at your own site works great too: it turns the look you already have into rules your agent can follow.

Why are some values missing?

Some sites add their styles with JavaScript after the page loads, and some block automated visits, so there’s less to read. We read up to 12 stylesheets per page. If a section is missing, try another page on the same site, like a pricing or sign-up page.

How is this different from the color and font finders?

The website color finder and font finder each go deep on one thing. This tool uses both and adds type sizes, spacing, radius, shadows, buttons and cards, then writes it all up as one file your agent can follow.