# DESIGN.md generator extension

> 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.

Canonical page: https://sitepeel.dev/design-md-chrome-extension/

Open Design MD on any page, even one behind a login, and get its colors, fonts and spacing as a DESIGN.md your AI coding agent can follow.

Updated: 2026-10-28

This is a tool in the Sitepeel Chrome extension (free to install: https://chromewebstore.google.com/detail/sitepeel/khcjkaobanoeohahnlffnnppinoeljme). All extension tools: https://sitepeel.dev/features/index.md

## Highlights

- Any page you have open, even behind a login
- DESIGN.md plus a visual guide
- Save it as a skill for Claude Code, Codex or Cursor

## How to use it

1. **Add Sitepeel to Chrome** Install it free from the Chrome Web Store and pin it to your toolbar. It works in Edge and Brave too.
2. **Open Design MD on the page** Go to the page you want, click the Sitepeel icon and choose Design MD. It reads the page as it looks in your tab.
3. **Copy or save the DESIGN.md** Copy it, save it, or add it to Claude Code, Codex or Cursor as a project skill. Then ask your agent to follow it.

## What you get

A DESIGN.md in Google’s Stitch format: tokens for colors, fonts, type sizes, spacing, corners and components at the top, then short rules your AI coding agent can follow. Beside it, a visual guide shows the same values at a glance.

- Colors: the values the page really uses, with their roles
- Type: each font with its sizes, weights and line heights
- Spacing, corners and shadows as tokens
- Components: buttons, cards and inputs as the page draws them

Good to know: Every value is measured from the page. Nothing is invented.

- [What is a DESIGN.md file?](https://sitepeel.dev/guides/what-is-design-md/index.md)
- [Browse DESIGN.md examples of well-known brands](https://sitepeel.dev/design-md/examples/)

## The extension or the free web generator

Both make the same kind of file. The extension works on the page you have open. The web generator works from a link, with nothing to install.

Design MD in Chrome and the web generator

|  | Chrome extension | Web generator |
| --- | --- | --- |
| Pages behind a login | Yes | No, public links only |
| Works on | The page in your tab, in Chrome, Edge or Brave | Any link, in any browser, phones too |
| Install | Free, from the Chrome Web Store | Nothing to install |
| Price | A 24-hour trial, then lifetime access | A few free runs, then sign in free |
| Save as a skill for Claude Code, Codex or Cursor | Yes | No |
| Public gallery and brand examples | No | Yes |

- [Try the free DESIGN.md generator, no install](https://sitepeel.dev/design-md/index.md)

## Use it with your AI coding agent

Put DESIGN.md in your project’s root folder and ask your agent to follow it. Most agents don’t open it on their own, so point to it once from the file they already read, like CLAUDE.md or AGENTS.md.

Example: prompt.txt

```
Read DESIGN.md before you change the interface.
Use its colors, fonts, spacing and components.
Build a pricing page in this project’s stack.
Keep keyboard focus visible.
```

- [Use DESIGN.md with Claude Code](https://sitepeel.dev/guides/design-md-claude-code/index.md)
- [Use DESIGN.md with Cursor](https://sitepeel.dev/guides/design-md-cursor/index.md)
- [Use DESIGN.md with OpenAI Codex](https://sitepeel.dev/guides/design-md-codex/index.md)

## Good to know

Design MD reads one page as it looks in your tab. Check a second page before you treat it as the whole design system.

It is an independent measurement, not the site’s official design system. Use it to learn and prototype, and don’t copy logos, names or content.

Good to know: Browser settings pages and extension stores can’t be read.

## Questions and answers

### Is there a Chrome extension that makes a DESIGN.md?

Yes. Design MD in the Sitepeel Chrome extension makes a DESIGN.md from the page you have open, with a visual guide beside it. It works in Chrome, Edge and Brave on desktop.

### Is the DESIGN.md Chrome extension free?

Sitepeel is free to install. Design MD, like every tool in the extension, has a 24-hour trial that starts the first time you use it. After that, lifetime access is one payment. The web generator is free to start, with nothing to install.

### Does it work on pages behind a login?

Yes. It reads the page you have open, so it works on dashboards, staging sites and anything else you can see in your browser. The web generator only reads public links.

### How is it different from the free DESIGN.md generator?

It makes the same kind of file. The web generator works from a link in any browser and has a public gallery. The extension works on the page in your tab, even behind a login, and saves the file as a skill for Claude Code, Codex or Cursor.

### Can I use it with Claude Code, Cursor or Codex?

Yes. Save it as a project skill from Design MD, or put DESIGN.md in your project’s root folder and ask your agent to follow it.

### Do I need an AI key?

No. Design MD works without an AI provider.

### Is it the site’s official design system?

No. It is an independent measurement of the page, not made or approved by the site’s owner.

## Related pages

- [Create a Design MD file](https://sitepeel.dev/guides/create-design-md-from-website/index.md): 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.
- [When AI ignores DESIGN.md](https://sitepeel.dev/guides/ai-ignoring-design-md/index.md): Your agent has DESIGN.md but the UI is still wrong? Check that it loads, remove conflicting rules, name real components and verify the result.
- [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.