Guides and Deep Dives
How to use DESIGN.md with your AI tools, design system breakdowns, aesthetic guides, and tutorials.
Getting Started
Why Your AI Keeps Making Ugly UI (And the Fix)
You spent hours prompting. The output works. But it looks like it was designed by someone who has never used the internet. Here is why, and the five-minute fix.
The 5 DESIGN.md Files Every AI Developer Should Start With
Not all design systems are equally useful as AI coding starting points. These five are different. They cover the major aesthetic territories and they work.
What Makes a Good DESIGN.md? The 6 Elements That Actually Matter
Most DESIGN.md files are half-finished. They have colors but no typography. Tokens but no context. Here is what separates a DESIGN.md that works from one the AI ignores.
Design Tokens Explained: What Every Part of a DESIGN.md Actually Does
Colors, typography, spacing, radius, shadows, motion. Each section in a DESIGN.md file does a specific job. Here is what each one tells the AI.
From Generic to Good: What AI-Generated UI Looks Like Before and After DESIGN.md
Same prompt. Two different outputs. One has a DESIGN.md, one does not. The difference is not subtle.
Tool Guides
How to Use DESIGN.md with Claude Code
Step-by-step guide to wiring DESIGN.md into your Claude Code workflow. Add it to your project once, get consistent design output forever.
How to Use DESIGN.md with Cursor
Cursor is the fastest AI coding editor right now. Add DESIGN.md and every component it generates follows your design system. Here is the exact setup.
How to Use DESIGN.md with Windsurf
Windsurf's AI is great at multi-file edits. DESIGN.md makes sure those edits look consistent. Here is how to wire them together.
The DesignMD MCP Server: A Complete Guide
The MCP server lets AI agents search and retrieve DESIGN.md files directly, without copy-pasting. Here is everything it does, how to set it up, and the best ways to use it.
The Right Way to Set Up DESIGN.md in Any Project
One file in the right place. The difference between pasting your design system into every prompt and having it just work. Here is the setup that takes 10 minutes and saves hours.
Aesthetic Guides
The Dark Minimal Stack: Why AI Products All Look Like Linear
Linear, Vercel, Cursor, Warp, Raycast. They all look similar. That is not a coincidence. Here is why the dark minimal aesthetic became the default for AI products, and why it works.
The Bold Color Stack: 8 Design Systems That Actually Use Color
Most design systems treat color like it might bite them. These eight do not. Here is how they use it, why it works, and when to steal it.
The Editorial Aesthetic: How Media Brands Design for Reading
The Verge, Wired, Substack, Ghost. They all figured out something the SaaS world has not: reading is a design problem, and typography is the solution.
The Fintech Design Playbook: 7 Rules Every Financial Product Gets Right
Trust is the product in fintech. These seven design rules are how the best financial companies earn it before a user even types their bank account number.
Warm Design Systems: When Your Product Needs to Feel Human
Not everything should be dark, minimal, and technical. Some products need warmth. Here is how Airbnb, Duolingo, and Starbucks built design systems that feel like a hug.
Design Breakdowns
The Stripe Design Playbook: How a Fintech Company Became a Design Icon
Stripe did not just build a payment API. They built a design system so good that developers started designing their own products to look like it. Here is what makes it work.
Linear's Design System: How a Project Management Tool Became a Design Benchmark
Developers do not compliment project management tools. They complain about them. Linear was the first one to get praised for its design. Here is what they did.
The Vercel Aesthetic: Why a Deployment Platform Chose Monochrome
Vercel's design system is almost entirely black and white. No primary color. No accent. Just contrast. It should not work. It absolutely works.
Notion's Design Language: How Calm Software Became a Category
Notion does not look like a startup. It looks like the app your thoughtful, well-read friend would build. That is not an accident. It is a carefully constructed design language.
Coinbase vs Brex: Two Fintech Companies Made Opposite Design Bets
Both are serious fintech companies. Both want you to trust them with money. But their design systems are opposites. Here is why both work for their specific user.
How-Tos
Write Your Own DESIGN.md in 20 Minutes
You do not have to borrow someone else's design system. Here is how to write your own DESIGN.md from scratch, with a template you can copy and fill in.
How to Choose the Right DESIGN.md for Your Project
There are 110 design systems in the catalog. Here is the decision framework that gets you to the right one in 5 minutes or less.
How to Customize a DESIGN.md Without Breaking It
You found a design system you like. Now you want to swap the primary color, use your own font, and make it yours. Here is how to do that without ending up with a mess.
How to Turn DESIGN.md Tokens Into CSS Variables
You have a DESIGN.md. Now you want those same tokens in your actual codebase as CSS variables. Here is the exact mapping.
How to Use DESIGN.md Across a Team
Solo developers get value from DESIGN.md immediately. Teams get 10x the value when everyone is pointing at the same file. Here is how to set that up.