# Create a Design MD file

> Make a DESIGN.md file from any website with the free generator or the Design MD tool in Sitepeel, then check it so your AI agent can use it well.

Canonical page: https://sitepeel.dev/guides/create-design-md-from-website/

Paste a link into the free DESIGN.md generator, or run Sitepeel’s Design MD tool on the page, then check its colors, type and spacing before you use it.

Updated: 2026-10-24

Tool used in this guide: [DESIGN.md generator extension](https://sitepeel.dev/design-md-chrome-extension/index.md)

Free website tool for this task: [DESIGN.md generator](https://sitepeel.dev/design-md/index.md) (https://sitepeel.dev/design-md/)

## In short

- Free generator: paste a link, no install
- Design MD tool: reads the page open in Chrome, including localhost and signed-in pages
- Choose a page with headings, cards and buttons, not a one-off campaign
- Name colors by role and label anything you added yourself

## How to use it

1. **Pick a representative page** Choose one with headings, body text, navigation, cards and buttons. Campaign pages often use one-off colors and type.
2. **Generate the file** Paste the link into the free DESIGN.md generator, or open Sitepeel’s Design MD tool on the page.
3. **Check it against the page** Compare colors on real elements, then a heading, paragraph and button. Overlays and inherited styles can mislead.
4. **Trim and label** Cut what your project doesn’t need. Mark rules you added so nobody mistakes them for measurements.
5. **Test it on one screen** Build one section with it. If you keep correcting the same thing, add that rule to the file.

## Free generator or Design MD tool?

The Design MD tool describes the state the page is in, so open the menu or section you want first and let content load.

Two ways to make DESIGN.md with Sitepeel

|  | Free DESIGN.md generator | Design MD tool |
| --- | --- | --- |
| Where it runs | sitepeel.dev, in any browser | Sitepeel for Chrome |
| What it reads | A public link; Sitepeel opens the page | The page you have open, as it is now |
| Localhost and signed-in pages | No | Yes |
| Install | None | Chrome extension |

Watch out: Private page? Keep account details and customer data out of any Markdown you share.

- [Build a reference package from one page](https://sitepeel.dev/guides/all-in-one-website-design-extension/index.md)
- [Understand optional AI refinement and page context](https://sitepeel.dev/guides/website-design-prompt-own-api-key/index.md)

## Turn values into roles

One page is evidence, not the original team’s full design system. Check a second page before calling a value a rule.

- Colors: group them into roles such as page background, raised surface, primary text and accent.
- Type: a family, weight, size and line height for each text style.
- Spacing: keep values that repeat across sections and say where they apply.
- Decisions: a measured card gap is a fact; “use it on all cards” is your call.

- [Check colors, fonts and spacing against the wider design system](https://sitepeel.dev/guides/extract-website-design-system/index.md)

## Check it before handing it to AI

- Color roles and readable text and background pairs.
- The font that actually rendered, with its weight and line height.
- Repeated spacing and the layout on a narrow screen.
- Focus states and other details an implementer needs.
- Assumptions labeled as such, not presented as extracted facts.

Good to know: Transparent layers, inherited styles and font loading can make a raw value misleading, so check it on the element itself.

## A short DESIGN.md example

A hand-written starting point you can edit. Keep yours small: cut anything unrelated to what you are building.

Example: DESIGN.md

```
# Project design reference

## Color roles
- Page: #0b0a0d
- Surface: #131016
- Text: #f5f0f8
- Accent: #c4a5ed

## Typography
- Use the project’s existing sans-serif font.
- Keep body copy at a readable size with generous line height.
- Use a clear heading hierarchy.

## Layout
- Constrain reading text to a comfortable line length.
- Stack multi-column content on narrow screens.
- Keep the primary action close to its explanation.

## Interaction
- Visible keyboard focus on every control.
- Explain loading, success and failure near the action.
- Respect reduced motion preferences.
```

## Use it and keep it current

Name the file’s path when you ask your AI coding assistant for a build, and start with one section. Update the file when your design changes: it should describe your project, not the page that first inspired it.

- [Use DESIGN.md with Cursor or Claude Code](https://sitepeel.dev/guides/use-design-md-with-ai/index.md)
- [Compare with real DESIGN.md examples by category](https://sitepeel.dev/design-md/examples/)
- [Fix an AI assistant that ignores your design reference](https://sitepeel.dev/guides/ai-ignoring-design-md/index.md)

## Questions and answers

### Is the DESIGN.md generator free?

Yes. It runs on sitepeel.dev with nothing to install. You can make 2 new DESIGN.md files a day without signing in.

### Can I make DESIGN.md from a localhost or signed-in page?

Yes, with Sitepeel’s Design MD tool in Chrome, which reads the page you have open. Browser-internal pages and some restricted documents don’t allow extension tools.

### Does DESIGN.md recover a site’s original design tokens?

No. It describes the values the page shows. Original token names, component source and every responsive state aren’t visible from one page.

### Do I need an AI provider key?

No. Generating DESIGN.md doesn’t need an AI provider key. Optional AI provider use is separate.

## Related pages

- [DESIGN.md generator extension](https://sitepeel.dev/design-md-chrome-extension/index.md): Make a DESIGN.md from the page you have open, even behind a login, with the Sitepeel Chrome extension. Save it as a skill for Claude Code, Codex or Cursor.
- [What is DESIGN.md](https://sitepeel.dev/guides/what-is-design-md/index.md): DESIGN.md is a Markdown file that tells AI coding agents how your UI looks. See Google’s spec, three real examples, where to get templates and how to make one.
- [Use Design MD with AI](https://sitepeel.dev/guides/use-design-md-with-ai/index.md): Hand DESIGN.md to Cursor, Claude Code or another AI coding assistant: where to save it, two prompts to copy and how to review what it builds.
- [Extract a design reference](https://sitepeel.dev/guides/extract-website-design-system/index.md): Turn a website’s repeated colors, type, spacing and components into a design system reference in DESIGN.md, with an evidence template to copy.
- [DESIGN.md with Claude Code](https://sitepeel.dev/guides/design-md-claude-code/index.md): Import DESIGN.md into CLAUDE.md with @DESIGN.md so Claude Code follows your colors, type and spacing. Includes a sample CLAUDE.md and checks.
- [DESIGN.md with Cursor](https://sitepeel.dev/guides/design-md-cursor/index.md): Point Cursor at DESIGN.md with a project rule in .cursor/rules, AGENTS.md or an @ mention. Includes a sample .mdc rule and the four rule types.