The founding member waitlist is now open. Join the founding waitlist
marianna.studio
Join the founding waitlist

Resources Guide

Guide

70+ design styles in Claude Code, from one skill

Then three quick passes so the result stops looking obviously AI-generated.

Marianna Jacob3 min read

FreeGuide

You want Claude Code to build a website.

Not just a technically correct website.

A website that actually feels designed.

Maybe you want Linear-style precision.

Notion-style warmth.

Nike-style typography.

Or that polished black-and-white Vercel look.

The old way?

Take screenshots. Explain the colours. Describe the spacing. Ask Claude to make everything “more premium” six times.

Now there’s a much easier way.

It’s called Awesome DESIGN.md.

What Is Awesome DESIGN.md?

Awesome DESIGN.md is a collection of ready-made design-system files based on popular websites.

The repository currently includes references for products and brands such as:

  • Apple
  • Stripe
  • Vercel
  • Linear
  • Notion
  • Airbnb
  • Claude
  • Supabase
  • Spotify
  • Nike
  • Tesla
  • Ferrari

And many more.

Each design system comes as a plain Markdown file called:

prompt 
DESIGN.md

That file describes how the interface should look and feel.

It can include:

  • the overall visual direction
  • colour roles
  • typography rules
  • button and card styles
  • spacing and layout principles
  • shadows and elevation
  • responsive behaviour
  • design dos and don’ts

Some entries also include HTML previews, so you can see the colours, typography and components before using the file.

There is no plugin to configure.

No Figma export.

No giant JSON file.

You copy one Markdown file into your project and tell Claude Code to use it. That is also the workflow recommended by the repository itself.

The Setup

Let’s say you want to build a clean SaaS landing page with the precision of Vercel.

Step 1: Choose a Design

Open the Awesome DESIGN.md repository.

Go into the design-md folder and choose the company whose design language is closest to what you want.

For example:

prompt 
design-md/vercel/DESIGN.md

You are not committing to copying the entire Vercel website.

You are choosing a visual starting point.

Vercel might give you:

  • a restrained colour palette
  • sharp typography
  • generous whitespace
  • strong hierarchy
  • minimal interface decoration

Stripe might give you a more colourful and expressive direction.

Linear might give you something denser, darker and more product-focused.

Apple might push the design towards larger typography, cleaner surfaces and more visual breathing room.

Pick the closest match.

You can customise it later.

Step 2: Copy the File Into Your Project

Copy the selected file into the root of your project and rename it:

prompt 
DESIGN.md

You can do this manually.

Or ask Claude Code:

prompt 
Download the Awesome DESIGN.md repository from:

https://github.com/VoltAgent/awesome-design-md

Copy:

design-md/vercel/DESIGN.md

into the root of this project as:

DESIGN.md

Do not modify any application code yet.

That is the entire installation.

You do not need to turn all the files into separate Claude Code skills.

You do not need to clone the complete library into a special hidden folder.

You only need the design you are actually using.

Step 3: Tell Claude What to Build

Now give Claude Code your normal product brief.

But tell it to read the design file first.

prompt 
Read DESIGN.md and use it as the visual source of truth for this project.

Build a responsive landing page for an AI research assistant.

Include:

- navigation
- hero section
- product demonstration
- three key benefits
- customer proof
- pricing
- final call to action

Preserve the existing framework and reusable components.

Do not copy logos, brand names, website copy or proprietary artwork from the reference company.

Use the design principles, not a pixel-for-pixel clone.

Inspect the project first, create a short implementation plan and then build the page.

Claude now knows two things:

What you want to build.

And:

What visual rules it should follow.

That second part makes a huge difference.

Without it, Claude has to invent the design direction while also writing the code.

That is how you get another purple-gradient SaaS template.

Make the Design Persistent

You can simply tell Claude to read DESIGN.md whenever you begin a new session.

That is the easiest option.

For example:

prompt 
Before making frontend changes, read DESIGN.md and follow it as the visual source of truth.

When the project becomes more established, you can also reference the file from your project instructions so it is consistently included in future work.

But do not turn that into a blocker.

Copy the file.

Use it.

See whether it improves the output.

You can optimise the setup later.

Build the First Version Before Fine-Tuning It

Do not ask Claude to perfect everything in one prompt.

First, get a complete working version onto the screen.

Check that:

  • the page structure makes sense
  • the content is present
  • the components work
  • the mobile layout is usable
  • nothing important is broken

Then run the design refinements.

This matters because polishing an unfinished page is a waste of time.

You do not want Claude adjusting the kerning on a hero section that you are about to delete.

The Anti-AI Pass

The DESIGN.md gives Claude a strong visual direction.

But it does not guarantee taste.

Claude can follow the colours and fonts perfectly and still build:

  • three identical cards
  • repetitive section layouts
  • symmetrical everything
  • awkward animations
  • missing hover states
  • spacing that feels mathematically correct but visually wrong

So after the first version is working, run three focused passes, with 3 skills where each one solves a different problem:

Next

Build your AI systems

A practical implementation community for founders building AI-powered systems. Opening soon!

Join the founding waitlist