5 DESIGN.md ideas for AI UI builders

Five DESIGN.md examples show how plain-text design files help AI agents build consistent UI.

DESIGN.md is a plain-text design system format that Google Stitch reads, and this repo has 80.9k stars showing how much people want it.

1. Claude

Claude is a good pick when you want an AI-friendly design file that feels calm, readable, and product-ready. The style note in this collection points to a warm terracotta accent and a clean editorial layout, which makes it useful for apps that need trust without looking sterile.

Because DESIGN.md is plain markdown, an agent can read the tone, spacing, and color intent without parsing a separate design tool export. That matters when you want the same system to guide landing pages, dashboards, and docs with fewer translation errors.

• Warm terracotta accent
• Editorial spacing and hierarchy
• Fits content-heavy product pages

2. Vercel

Vercel is the cleanest example for teams that want a sharp, minimal UI with almost no visual noise. Its design notes lean on black and white precision plus Geist, so it is a strong reference if your product needs to feel technical and polished at the same time.

This kind of file helps coding agents stay consistent when they generate buttons, headers, cards, and empty states. Instead of guessing at brand taste, the agent gets a compact description of the visual rules and can repeat them across the page.

• Black and white palette
• Geist font reference
• Good for developer tools and docs

3. Runway

Runway is the most cinematic option in the set, with dark heroes, paper-white reading bands, and a single strong sans for the whole page. It is a useful pattern for creative tools that need motion, drama, and a premium feel without becoming hard to scan.

For AI generation, this kind of specificity is the point. A model can follow cues like “cinematic dark heroes” and “pure black pill CTAs” much better than it can infer a brand mood from screenshots alone, especially when the file also includes component and layout guidance.

• Cinematic dark hero sections
• Paper-white reading bands
• Pure black pill call-to-action buttons

4. Sanity

Sanity is a strong reference if you want a dark-first marketing surface that still feels editorial and structured. The notes call out 112px display type, IBM Plex Mono for technical labels, and a coral-red CTA reserved for the most important action.

That mix is useful because it shows how DESIGN.md can encode not just colors, but hierarchy and intent. An agent reading the file gets a direct signal about what should dominate, what should support, and what should stay quiet.

• 112px display type
• IBM Plex Mono technical eyebrows
• Coral-red primary CTA

5. Stripe

Stripe is the best example for teams that want elegance with a finance-grade feel. The collection describes it with signature purple gradients and weight-300 typography, which gives agents a clear recipe for a premium interface that still reads as modern software.

If your product needs to look credible, calm, and high-value, this is the kind of DESIGN.md that can guide the whole system. It helps an AI keep the same visual logic in hero sections, pricing tables, and feature blocks without drifting into generic SaaS styling.

• Purple gradient identity
• Light-weight typography
• Works well for payments and fintech

How to decide

Pick Claude if you want warmth and readability, Vercel if you want strict minimalism, Runway if your product should feel cinematic, Sanity if you want dark editorial energy, and Stripe if you need polished fintech credibility.

If you are testing DESIGN.md for the first time, start with the style that matches your product’s main promise, then ask your coding agent to build one screen from it. The repo’s value is that each file gives AI a plain-language design target instead of forcing it to infer taste from a screenshot.