Give your website a professional design with one DESIGN.md file and your AI assistant

Ask an AI assistant to build you a website and you'll usually get something that works but looks like every other AI-made site: the same fonts, the same purple buttons, the same layout. That's because you told it what to build, but not how it should look.

A DESIGN.md file fixes that. It's a single text file that describes a style in detail: the colours, the fonts and their sizes, how buttons and cards look, how much space goes between things, and how the page changes on a phone. Put it in your project and your assistant follows it like a designer's brief.

In this guide you'll borrow a style from a well-designed website, build a page with it, then make it your own. You won't write any code. It takes about 20 minutes.

The helper doing the work

design-bites is a free collection of more than 270 DESIGN.md files, taken from websites known for their design, like Linear, Stripe and Vercel, plus hundreds of portfolios, apps and studios. It's MIT licensed, so you can use it for work you sell.

Before you start

You need two things:

• An AI coding assistant that can work with files on your computer, such as Claude Code, Cursor or GitHub Copilot.
• An empty folder for your new website. Make one on your desktop called my-website and open it in your assistant.

If you want to use the one-line installer in step 2, you also need Node.js (free from nodejs.org). If you'd rather not install anything, you can download the file by hand instead.

Step 1: Pick a style

Go to sparkbites.dev/design-bites and browse. Each style shows the website it comes from. Look for one that feels right for what you're making:

• Calm and clean, for an app or a business: try linear.app or vercel.com.
• Bold and polished, for a product people pay for: try stripe.com.
• Personal and simple, for a portfolio: browse the personal sites section.

Write down the website address of the one you like, for example linear.app. Don't worry about choosing perfectly. Trying a second style later takes two minutes.

Step 2: Put the file in your project

The easy way, with the installer. Paste this into your assistant, swapping in the style you picked:

Run this command in my project folder: npx design-bites add linear.app

Then check that a file called DESIGN.md is now in the folder, and tell me in two or three simple sentences what kind of style it describes.

The installer sends an anonymous count to the people who make design-bites each time you use it. If you'd rather it didn't, ask your assistant to set DESIGN_BITES_TELEMETRY_DISABLED=1 first.

The no-install way. On the style's page, download its DESIGN.md file and drag it into your my-website folder. That's all the installer does.

Either way, you now have a file called DESIGN.md in your folder. You can open it and read it: it's plain text, with tables of colours and font sizes, and a list of do's and don'ts.

Step 3: Build your first page

Now ask your assistant to build something in that style. Change the bits in square brackets to describe your own idea:

Build me a one-page website for [a small bakery called Rise that sells sourdough and takes pre-orders for the weekend]. I'm a beginner, so keep it simple and tell me exactly how to open it at the end.

The page should have: a top bar with the name and a "Pre-order" button, a big welcome section with a short headline, three cards showing [our best-selling breads], a short "About us" section, and a footer with [opening hours and an address].

Follow DESIGN.md in this folder strictly for every visual choice: colours, fonts, sizes, spacing, buttons, cards, shadows, and how the page looks on a phone. Don't add colours or styles that aren't in it. Use simple HTML and CSS, put all the colours and sizes from DESIGN.md in one place at the top of the CSS, and make it work well on phones.

When you're done, list any places where you had to guess because DESIGN.md didn't say.

When your assistant says it's done, it will tell you how to open the page, usually by double-clicking index.html. Have a look on your computer, then make the window narrow to see how it looks on a phone.

Step 4: Fix what you don't like

AI assistants follow a DESIGN.md closely, but not perfectly. Look at the page like a picky customer would, and ask for changes in plain words:

Compare the page with DESIGN.md and fix anything that doesn't match, like colours, font sizes, spacing or button styles. Then tell me what you changed.

The welcome section feels empty. Using only the styles in DESIGN.md, make it more inviting, and add a space where I can put a photo later.

Want to see a different style? Go back to step 1, pick another one, and paste this:

Run npx design-bites add stripe.com, replace the old DESIGN.md with the new one, and restyle my page to follow it. Keep all my words and sections the same.

Step 5: Make the style your own

This step matters if you're going to launch the site, especially for a business. The styles in design-bites are inspired by real companies. Borrowing how a site is put together is fine, but your site shouldn't look like you're pretending to be Linear or Stripe. Give it your own colours, fonts and logo:

I want to turn DESIGN.md into my own brand's design, so my site doesn't look like a copy of the website it came from.

My brand: [Rise, a friendly neighbourhood bakery. Warm, simple and a bit old-fashioned. Main colour: a warm wheat yellow.]

Please:
- Suggest a new colour palette based on my main colour, and two free Google Fonts that suit my brand. Show me the options before changing anything.
- Once I agree, update DESIGN.md with my colours, fonts and brand description. Keep its spacing, layout rules, and do's and don'ts, but remove any mention of the original company.
- Check that text is easy to read on every background colour.
- Then restyle my page to follow the new DESIGN.md.

Now DESIGN.md describes your brand. Keep it in your project. Every new page you or your assistant make will match, which is exactly what a designer's style guide does for a big company.

Optional: check your file. Google, which created the DESIGN.md format, has a free checker that spots mistakes and text that's hard to read. Ask your assistant to run it:

Run npx @google/design.md lint DESIGN.md and explain any problems it finds in simple words. Fix the ones that matter.

Step 6: Use it everywhere

Your DESIGN.md works with any project, not just this page:

Add a "Pre-order" page that matches the rest of the site, with a simple form for name, email, which breads and which day. Follow DESIGN.md. The form doesn't need to send anything yet.

I already have a website in this folder. Restyle it to follow DESIGN.md without changing any of the words or links. Go one page at a time and show me each one before moving on.

Building something bigger with React? DESIGN.md works with component kits like shadcn/ui and styling tools like Tailwind CSS too. Just ask your assistant to set them up to follow your DESIGN.md.

If you have Opensrcs Pro and have connected your assistant (Account → MCP), you can ask it for ideas as well:

Using the Opensrcs tools, suggest two open-source projects that would help me turn this bakery page into a real website I can update myself, like a CMS or a booking tool. For each, tell me what it adds, its licence and whether it costs anything.

What you just did

You gave your AI assistant a designer's brief. Instead of guessing what "make it look nice" means, it now has exact colours, fonts and rules to follow, and it'll use them every time. That's the difference between a site that looks AI-made and one that looks designed. Browse design-bites on Opensrcs to compare it with the other DESIGN.md collections.