Awesome Claude Design
A collection of DESIGN.md files by aesthetic family and remix recipes to set an interface style for the agent
Low risk
We rate an entry low when it mostly gives the agent instructions and reference material.
Why this level
- These are text style descriptions and do not run code
Install
Manual install
Pick a suitable DESIGN.md from the repository by aesthetic family, put it in the project root and ask the agent to build the interface from it. For blends use the files in the remix section.
This is third-party code. Review the repository files before installing.
What it does
The repository collects ready DESIGN.md files that set an interface's visual style, grouped by aesthetic family: brutalist, cinematic, glass, editorial, data-dense, playful, terminal and others. Each file describes a design language through a recognizable product so the agent builds the interface in that style. There are remix recipes that blend two styles, plus a set of prompts and techniques. You drop a file into a project as persistent per-project design tokens and rules. Alongside this the repository also gathers links to teardowns and related material.
Who it is for. For designers and developers who need to quickly give the agent a recognizable interface style.
Good fit when
- You need to give the agent a specific visual interface style
- You want to blend two styles via a remix recipe
- You need ready design rules for a project
Not a fit when
- You need ready component code rather than a style description
- The project style is already set and does not need changing
Example request
Take the style from the editorial-family DESIGN.md and lay out the home page with itLimitations
These are style descriptions in text files, not a component library, and the result depends on the agent's model. The files describe a design language through well-known products, so copying someone else's brand is not the point. Part of the repository is a collection of external links and material.
How to disable. Remove the DESIGN.md file from the project or drop the reference to it from your setup.
Security check
- These are text style descriptions and do not run code
README in short
The README presents a collection of DESIGN.md files grouped by aesthetic family, plus remix recipes, prompts and material around designing with Claude. The files set a design language through recognizable products and act as persistent per-project tokens and rules. It also gathers links to teardowns, articles and discussions. MIT licensed.
FAQ
How do I set a project's style?
Copy the chosen DESIGN.md into the project as persistent tokens and design rules, and the agent will follow it.
Can I blend two styles?
Yes, the remix section has ready recipes that combine two aesthetic families.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys