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 spec from Stripe, Linear, Notion and more, and ship something that looks deliberately designed.

Explore the library

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 spec 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.

Pick and paste your design

1Pick an app

Choose a look that fits your project. Every value is captured from the live site.

2Copy its DESIGN.md

One click copies the full spec, ready to paste.

3Paste into your AI tool

Add it before your build request in any AI tool.

Where to use a design spec

A DESIGN.md is plain markdown, so it drops into anything that takes a prompt or a repo. Two common ways in:

In your AI builder, no-code tool or CMS

v0 W W Wix

Paste the spec into the prompt and ask the tool to restyle your existing site to match it, or start a fresh build that speaks the same visual language.

In Claude Code, Cursor, Gemini or your repo

Drop the file into your project and ask the coding agent to refactor the current design into this style, or build a new page from scratch on top of it.

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 spec (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 spec 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 specs, 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.

Help shape the library

This library is free and shaped by the people who use it. Want an app captured, or spotted something off? Chip in, it helps decide what gets built next.