Skip to content
Get packs

Awesome DESIGN.md

A curated collection of DESIGN.md files describing the visual design of popular websites, for AI agents to cop

GitHub Download source
Stars
125k
Forks
13.9k
Licence
MIT
Language
—
Last update
8 days ago
Type
Curated list

What it is

This is a list of DESIGN.md files, each one a plain-text markdown document that describes the visual design system of a real website such as Claude, Cursor, or Vercel. You copy one into your project and ask an AI coding agent to build a page that looks like it, and the agent uses the file's colors, type, and layout rules to produce consistent UI. The README says the files are extracted from real sites and organized by category, including AI platforms, developer tools, and backend services.

  • Copy a DESIGN.md into a project root and ask an agent to build a landing page in that style
  • Compare how different developer tools handle color, type, and layout
  • Request a DESIGN.md for a specific website through the project's request page

Great for

  • Developers who want an AI coding agent to match a known visual style
  • Designers prototyping a landing page quickly from an existing look
  • People exploring how different developer-focused brands structure their design rules

Not ideal for

  • Anyone needing a finished component library, since this repo only provides design description files, not code
  • People who need legal clearance to reuse a brand's look, since the README does not address trademark or licensing of the sampled designs
  • Teams wanting a design system tied to their own brand, since these files describe third-party sites
Step-by-step guide: how to use Awesome DESIGN.mdInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    See the README

    Clone the repository

    git clone https://github.com/VoltAgent/awesome-design-md
  2. 2

    Run it

    • Browse the collection and pick a site whose style you want
    • Open its DESIGN.md file from getdesign.md or the repo
    • Copy the file into the root of your project
    • Ask your AI coding agent to build a page that matches the design language described in the file
  3. 3

    Get the most out of it

    • Use a DESIGN.md that closely matches your target style, since the README says the files capture tokens and rules
    • Request a DESIGN.md for a specific website through getdesign.md/request if none exists
    • Combine the design file with your own AGENTS.md so the agent knows both how to build and how it should look

Downloads

Source code (.zip)main branch · straight from GitHubOfficial website & docsstarterkit.getdesign.md/

Strengths

  • Plain markdown format that AI agents can read without extra tooling
  • Large collection, with the README badge showing 84 DESIGN.md files
  • Organized by category, making it easier to browse

Trade-offs

  • The README does not explain how the files were produced or how accurate they are to the source sites
  • Visual styles are derived from third-party websites, so reuse may raise brand or licensing questions the README does not cover
  • Results depend on the AI agent used, which the README does not evaluate

How it compares

ProjectStarsTypeLevelUpdatedBest for
awesome-design-md (this)125kCurated listbeginner8 days agoDevelopers who want an AI coding agent to match a known visual style
taste-skill108kAI model / agentbeginner6 days agoDevelopers using Claude Code or Codex who want less generic frontend output
ui-ux-pro-max-skill144kAI model / agentbeginner5 days agoDevelopers using AI coding assistants who want more consistent UI/UX output
khazix-skills21.8kCurated listbeginner1 months agoDevelopers already using Claude Code, Codex, or another Agent Skills-compatible agent who want ready-made skills
material-ui99.3kLibraryintermediate4 days agoReact developers who want a consistent, prebuilt set of UI components
claude-code-best-practice68.5kLearning resourcebeginner4 days agoDevelopers who are new to Claude Code and want an organized overview of its features

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.