Give your agent taste.
100 original DESIGN.md systems for Claude Design, Claude Code and Cursor. Each ships with Tailwind tokens and a live site built from it — so you can see the result before you prompt.
6 styles are free · one-time payment · client use included · launch offer Launch pricing ends Sunday
100
original styles
11
categories, 14 industries
4
files per style
19¢
per style, all-access
01 — Prompt → site
Same prompt. A different DESIGN.md. A different site.
Agents default to the same rounded-card, purple-gradient page. A DESIGN.md gives them a point of view: exact tokens, a type scale, motion rules and a list of things never to do. Every page below was generated from its style file alone.
02 — How it works
Pick a look. Drop one file. Prompt.
- 1
Pick a style
Browse 100 live sites. Filter by mood, category or industry. Open any one full screen on your phone.
- 2
Drop in DESIGN.md
Upload it to Claude Design, or put it at your repo root with theme.css for Claude Code, Cursor or Codex.
- 3
Prompt like normal
“Build the pricing page.” The agent follows the tokens, type scale, components and motion rules — and avoids the don'ts.
03 — Anatomy of a style
More than a palette. A whole system.
Free DESIGN.md files list colours and fonts. StyleMD files are written like an art director's brief, with the two sections every other collection skips: motion and imagery (including the exact image prompt to make more on-style pictures).
- DESIGN.mdTokens, type scale, layout, elevation, shapes, motion, imagery, components, do/don't, responsive, agent checklist
- theme.cssTailwind CSS v4 @theme — bg-canvas, font-display, text-display-xl, rounded-card, animate-enter
- tokens.jsonW3C design tokens for Figma Tokens Studio and Style Dictionary
- preview/index.htmlThe reference landing page, one file, with its AI-generated imagery
---
colors:
canvas: "#F6F1E7"
ink: "#1E1A14"
accent: "#D9822B"
typography:
display-xl: { Cormorant Garamond, 112px, 500, -0.02em }
motion:
easing: cubic-bezier(0.22, 1, 0.36, 1)
entrance: clip-reveal
---
## Motion
- Headlines rise line by line from behind a clip
mask; the hero photograph drifts 4% in a
14-second Ken Burns.
## Don't
- Don't use saffron as a background or button.
- Don't round images or add drop shadows.
- Don't use icons in feature lists — numerals.04 — The library
100 plates, no two alike.
Broadsheet Press
No. 001A morning broadsheet: masthead, column rules, datelines and a grey halftone photograph.
Nordic Calm
No. 031Scandinavian winter light: cool greys, frost blue, soft corners and a lot of air.
Acid Black
No. 011Acid green on pure night: a warehouse-rave flyer that boots like a terminal.
Y2K Chrome
No. 038Liquid chrome, bubble shapes and frosted-blue gadgets from the year 2000.
Amber Terminal
No. 071Warm amber phosphor on brown-black, thick frames and log lines scrolling past.
Comic Panels
No. 077Ben-Day dots, thick ink panels and speech bubbles. Every section is a splash page.
Butter Yellow
No. 022Sunny butter, a fat friendly grotesk and halftone dots like a cereal box.
Noir Cinema
No. 028Letterboxed, grainy and lit from one side, like a 1947 crime picture.
Bright Neobank
No. 050A bank that feels like a good app: electric violet, mint and fat friendly numbers.
05 — Why not the free ones?
Original systems, safe for client work.
Free DESIGN.md collections reverse-engineer famous brands. Great for learning; awkward when your client's site looks like a payments company. StyleMD styles are named after ideas, not companies.
| Free brand copies | StyleMD | |
|---|---|---|
| Original, client-safe design | — | ✓ |
| Live site built from the file | — | ✓ every style |
| Motion rules | Rarely | ✓ easing, durations, signature |
| Imagery direction + image prompt | — | ✓ |
| Tailwind 4 @theme tokens | — | ✓ |
| Industry styles with real copy | — | ✓ 14 industries |
| Do / don't + agent checklist | Some | ✓ |
06 — Pricing
Pay once. Keep every style.
Free
$0
Six complete styles to try the workflow.
- 6 full styles, every file
- Lite DESIGN.md for all 100
- Try 3 styles with your brand
One style
Launch offer · Launch pricing ends Sunday$9$19
One-time, no subscription
Pick any one style, every file, forever.
- Full DESIGN.md
- Tailwind 4 theme.css + tokens.json
- Reference landing page source
- Client-use licence
All-Access · lifetime
$19$99
One-time, no subscription
All 100 styles and every future drop. Pay once.
- All 100 styles — 19¢ each
- Every new style, free forever
- One-click full library download
- Unlimited client projects
One-time payment · 7-day refund before download
07 — Questions
Frequently asked
What is a DESIGN.md?
A plain markdown file that describes a design system — colour tokens, type scale, spacing, components, motion and do/don't rules — in a format AI agents read. The format comes from Google Stitch; Claude Design, Claude Code, Cursor, Codex and Windsurf all follow it.
How do I use a style with Claude Design?
Start a new design system in Claude Design and upload the style's DESIGN.md (optionally the preview HTML as a reference screen). Claude Design scaffolds the tokens, components and a UI kit from it.
And with Claude Code or Cursor?
Put DESIGN.md at your repo root and theme.css next to your global stylesheet, then prompt: “Read DESIGN.md and follow it strictly. Build the pricing page.” The Tailwind 4 tokens mean classes like bg-canvas, font-display and rounded-card just work.
Are these copies of famous brands?
No. Free collections reverse-engineer Stripe, Apple or Linear, which you can't ship for a client. Every StyleMD style is original — named after an idea, not a company — so what you build is yours to sell.
What's in each style?
DESIGN.md (300–400 lines), theme.css (Tailwind v4 @theme), tokens.json (W3C design tokens), a README, and the reference landing page as a single HTML file with its imagery.
What do I get with All-Access?
All 100 styles today, every style we add later, and the whole library as one download. One payment, no subscription.
Can I use them for client work?
Yes — personal and client projects, unlimited. You can't resell or redistribute the files themselves. See the licence.
Refunds?
Full refund within 7 days if you haven't downloaded the files yet. Email us with your receipt.