Skills / Design / Awesome DESIGN.md
Awesome DESIGN.md
Drop a DESIGN.md into your project and your agent builds in that design language.
What Awesome DESIGN.md does
A DESIGN.md is a plain Markdown file that describes how a product should look: colours, type, spacing, components and rules. The format was introduced by Google Stitch, and any coding agent can read it. Where AGENTS.md tells an agent how to build a project, DESIGN.md tells it how the project should look and feel.
Awesome DESIGN.md is a curated collection of these files, extracted from the public websites of dozens of companies across AI, developer tools, fintech, e-commerce and more. Pick one whose style you like, add it to your project, and ask your agent to follow it.
Use it when
- You want a consistent visual style quickly and like the look of an existing product.
- You are prototyping and want something more coherent than the agent's defaults.
Skip it when
- You already have your own design system; write your own DESIGN.md from it instead.
How it works
- Choose a DESIGN.md from the collection (each one links to a page on getdesign.md).
- Save it as DESIGN.md in your project root.
- Tell your agent to build or restyle a page following DESIGN.md.
How to install Awesome DESIGN.md
Any agent
Nothing to install. Download the file you want from the collection and save it in your project root.
Prompts to try
- Build a pricing page that follows DESIGN.md
- Restyle the settings screen to match DESIGN.md
- Create a component library page from the tokens in DESIGN.md
Tips and gotchas
- Use a file as a starting point and change colours and type to make it yours. Copying a company's look closely can confuse users and run into trademark problems.
- Combine it with a design skill: the skill handles process and checks, DESIGN.md supplies the visual language.
- Impeccable's /impeccable document command can generate a DESIGN.md from your own code.
FAQ
Is Awesome DESIGN.md a skill?
No. It is a collection of design files. It works alongside skills, and any agent can read the files.
Can I use these designs commercially?
The repository is MIT licensed, and the files describe publicly visible styles. Brand names and logos still belong to their owners, so use the files as inspiration rather than to imitate a company.
What is the difference between DESIGN.md and AGENTS.md?
AGENTS.md tells coding agents how to build and work in a project. DESIGN.md tells them how it should look.
Related skills
Impeccable
A design vocabulary for your agent: polish, audit, critique, bolder, quieter.
npx impeccable installUI UX Pro Max
A searchable design library your agent consults before it writes any UI.
npm install -g ui-ux-pro-max-cli
uipro init --ai claudeTaste Skill
Gives coding agents an art direction, real pictures, and a browser to check their work.
npx skills add https://github.com/Leonxlnx/taste-skillfrontend-design
Anthropic's design brief for Claude: distinct, intentional, not templated.
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skillsThis page summarises the project's own README.md and README, checked on 2026-10-16. Star count from GitHub on 2026-10-16. Commands change between releases, so check the repository if one fails. Written by Skillary; not affiliated with VoltAgent. See how we review skills.