1
AI Analysis
2
Identity
3
Colors
4
Typography
5
Layout
6
Components
7
Copy
8
Export

The brand guideline for the AI era

Teach AI your brand.

Extract the colors, typography, spacing and component rules from your logo, your brand guidelines or your brand’s website, and collect them in a single DESIGN.md file. Hand it to Claude, Cursor or v0 and every screen they generate stays on brand.

Create from scratch → Browse templates

Design systems in the style of well-known brands, ready for AI.

Every template lists color codes, typefaces, a type scale and a DESIGN.md file you can hand straight to Claude, Cursor or v0.

Browse the templates →

How it works

Turn your brand rules into a single file in three steps

  1. Bring your source

    Upload your logo or brand guideline PDF, or type your brand’s website address. Your files never leave your browser; they are processed locally.

  2. Refine the rules

    The wizard proposes the color palette, type scale, spacing, corner radii and component rules step by step, and you can change every value.

  3. Get your DESIGN.md

    Download the result as DESIGN.md, CSS variables, a Tailwind theme or JSON tokens and drop it into your project root.

Open the wizard →Browse the library
The Stripe design system page on MakeMyMD: color palette and DESIGN.md code
The brand analysis step of the MakeMyMD wizard

DESIGN.md

What is DESIGN.md?

DESIGN.md is a Markdown file that describes a brand’s colors, typefaces, spacing scale and component rules, both as machine-readable tokens and as human-readable rationale. Introduced by Google Stitch, the format lets tools like Claude, Cursor and v0 follow your brand rules on every screen they generate.

Read the DESIGN.md guide →
DESIGN.mdYAML tokens + Markdown
---
name: Heritage
colors:
  primary: "#1A1C1E"
  tertiary: "#B8422E"
  neutral: "#F7F5F2"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 3rem
rounded:
  md: 8px
---

## Colors
- **Tertiary (#B8422E):** The sole driver of interaction;
  used only for actions.

Compatible tools

Works with every AI tool that reads your project files

DESIGN.md is a plain Markdown file; reference it once from your instructions file and you are done.

  • Claude Code
  • Cursor
  • v0
  • Google Stitch
  • GitHub Copilot
  • Windsurf
  • Lovable
  • Bolt
Setup steps for each tool →

Why MakeMyMD

The shortest way to teach AI your brand

Color and typography preview of the Stripe-style template Color and typography preview of the Raycast-style template Color and typography preview of the Anthropic-style template Color and typography preview of the GitHub-style template

01

Analysis from your logo and brand guidelines

Extracts the color palette and typefaces not only from a web address but also from your logo and PDF brand guidelines.

02

Your files stay with you

The logo and guidelines you upload are processed in your browser and never sent to a server.

03

Step by step, in English or Turkish

The wizard walks through every design decision in order, even if you are starting from zero.

04

Four formats from one source

The same design system exports as DESIGN.md, CSS variables, a Tailwind theme and JSON tokens.

Ready-made design systems →

FAQ

Frequently asked questions

If your answer is not here, have a look at our DESIGN.md and design system guides.

Guides
What is a DESIGN.md file for?
It teaches AI coding tools your brand’s design rules in one go. As long as the file sits in your project root, the tool uses the same colors, typefaces and component rules on every screen it generates, so you no longer have to ask for “on-brand” in every prompt.
Is MakeMyMD free?
Yes. Creating a design system, browsing the templates in the library and downloading files are all free. You can open a free account to save your work.
Where do my uploaded logo and brand guidelines go?
Nowhere. Logo and PDF analysis runs entirely in your browser; the files are never uploaded to MakeMyMD servers.
Which formats can I export?
DESIGN.md, CSS variables, a Tailwind theme and JSON design tokens. They are all generated from the same design decisions, so they stay consistent with each other.
How do I use DESIGN.md with Claude Code?
Put the file in your project root and add the line @DESIGN.md to your CLAUDE.md; Claude Code then reads your design rules in every session. Steps for Cursor, v0 and other tools are in our usage guide.
Are the brand design systems in the library official?
No. They are independent reviews of the colors, typography and spacing visible on the brands’ public websites. They are not official brand guidelines, and MakeMyMD is not affiliated with or endorsed by these brands. They contain no screenshots, logos or copy from the brands. Use them as a starting point for your own system.
Do I need an account?
Not to create or download. If you open a free account with Google, GitHub, X or a username and password, you can keep your designs under “My Projects” and edit them later.