15 apps & counting · new captures daily

Your AI tool
shouldn’t look AI-generated

AI coding tools default to the same generic template when your prompt lacks design direction. Paste in a real design system from Stripe, Linear, Notion and more, and ship something that looks deliberately designed.

The library

Every app here comes with a prompt-ready DESIGN.md and a live preview, with the marketing site and the product app captured as separate design systems. Pick a card to dig in.

Why every AI-generated UI looks the same

Ask Cursor, v0, Lovable, Bolt or Claude Code to “build a landing page” and you tend to get the default: Inter on a dark canvas, a purple-gradient hero, shadcn-style cards, the same rounded buttons. That isn’t the tool being bad at design. It’s the model falling back on the statistically safest look because the prompt gave it no design direction.

A design system is that direction. When your prompt pins down exact colors, type scale, radii, shadows and component rules, the model stops guessing and starts matching, and the output stops looking like a template.

How to use these design systems in your prompt

  1. Pick an app whose look fits your project. Every capture here uses real computed values from the live site, never invented tokens.
  2. Copy its DESIGN.md with one click: palette roles, typography rules, component styles, layout, motion, plus a paste-ready agent prompt block.
  3. Paste it ahead of your build request: “Build a dashboard for X using this design system: …” It works in Cursor, v0, Lovable, Bolt, Windsurf, Claude Code and ChatGPT.

Common questions

Why does my Lovable / v0 / Cursor app look like a generic template?

Because the prompt left design open-ended, so the model reached for its most common training patterns. Constrain it with a concrete design system (specific hex values, font stacks, radii and spacing) and the output changes immediately. That’s exactly what the DESIGN.md files in this library are for.

What is a DESIGN.md file?

A structured markdown description of a product’s visual language, following Google Stitch’s open spec: visual theme, color palette and roles, typography, component stylings, layout, depth, motion, do’s and don’ts, and an XML-tagged prompt guide you can paste straight into an AI coding tool.

Are these real design tokens or approximations?

Real. Each system is extracted from the live site’s DOM: computed styles, CSS custom properties, measured type and spacing. Nothing is invented; where something couldn’t be captured, the file says so. Marketing site and logged-in product are captured as separate systems, because real products deliberately speak two visual languages.

Is this free to use?

Yes. Free forever, no signup. The gallery, specs and docs are MIT-licensed. The referenced designs and trademarks belong to their respective owners; the files describe observable visual facts (colors, sizes, spacing) as a study reference for your own projects.