design-bites

design-bites is a free library of design guides for AI coding assistants. Each guide is a single text file called DESIGN.md that describes how a website looks: its colours, fonts, buttons, spacing, shadows and how it changes on a phone. AI assistants like Claude Code, Cursor and GitHub Copilot can read that file and build new pages in the same style. There are more than 270 to choose from, including Linear, Stripe, Vercel, lots of personal portfolios, SaaS and AI products, and design agencies. It's made by Eduardo Calvo López under the Sparkbites name.

What it can do

• Turns "make it look good" into something your AI understands. Instead of describing a style in vague words, you hand your assistant a file with the exact colours, font sizes and button styles. It stops guessing.
• 270+ styles to pick from. Clean software sites, bold fintech, calm portfolios, playful agency pages. Browse them with pictures at sparkbites.dev/design-bites, or search by name.
• One line to install. Run npx design-bites add linear.app in your project folder and the guide lands right where your assistant looks for it. You can also just download the file and drop it in yourself.
• The same nine sections every time. Each guide covers the overall feel, colours, fonts, components, layout, depth and shadows, do's and don'ts, phone and tablet sizes, and ready-made prompts you can paste into your assistant.
• Works with the assistants you already use. Claude Code, Cursor, GitHub Copilot, Google Stitch and any other assistant that reads files in your project.
• Taken from the real sites. The files are made by opening each website in a real browser, measuring its actual styles, and having Claude write up why the design works. So the numbers are real, not invented.

Where you'll meet it

design-bites is a shortcut for anyone building with AI: designers who want their mock-ups to turn into real pages, founders building a first website, and developers who don't want every project to look the same. It pairs well with a component kit like shadcn/ui, styling tools like Tailwind CSS, and a CMS like Payload when you want a good-looking site your team can edit.

design-bites, awesome-design-md or Google's DESIGN.md?

All three are built around the same idea, a DESIGN.md file your AI assistant reads. Google created the format; the other two are free collections of ready-made files.

design-bitesThis page

Best forThe widest choice of styles, installed in one line

The biggest library, with 270+ guides including many personal sites and small studios, plus an installer and a picture gallery. Younger and smaller community.

What you get

270+ ready-made DESIGN.md files and an installer

Open source

Yes (MIT)

Cost

Free

Aawesome-design-md

Best forThe most popular, well-known brand styles

The project that made DESIGN.md famous, with 84 hand-picked guides for big names like Stripe, Notion and Supabase. Each comes with a preview page showing the colours, fonts and buttons. No installer: you copy the file.

What you get

84 DESIGN.md files with visual previews

Open source

Yes (MIT)

Cost

Free

GGoogle's DESIGN.md

Best forWriting and checking your own brand's file

The official format from Google Labs, plus a tool that checks your file for mistakes and poor colour contrast and turns it into Tailwind settings. No ready-made styles. Still an early version, so details may change.

What you get

The format and a checking tool

Open source

Yes (Apache 2.0)

Cost

Free

A quick way to choose: want lots of styles to try fast? Start with design-bites. Want the famous brand looks with a preview of each? Browse awesome-design-md. Ready to write a DESIGN.md for your own brand? Use Google's format and its checker. They mix well: borrow a style from a collection, then make it your own.

Good to know

• A DESIGN.md describes a style, it doesn't build anything. You still need an AI coding assistant to make the pages.
• These files are inspired by real companies' websites. They're not official, and the companies don't endorse them. For a product you sell, use them as a starting point and change the colours, fonts and logo so it looks like your own brand, not a copy of someone else's.
• AI assistants follow the file closely but not perfectly. Look over the result and ask for fixes, just as you would with a designer.
• The installer sends an anonymous count to Sparkbites each time you add a guide. Set DESIGN_BITES_TELEMETRY_DISABLED=1 to switch it off, or just download the file by hand.
• It's a young project with a small community so far, but each file is plain text you can read and edit yourself.
• Licence: MIT. You can use it for free, including in paid products.