mcpField
A
awesome-design

awesome-design

github.com/veeralspatelOther040 installsUpdated 12w ago
Repository

About awesome-design

awesome-design provides a curated collection of brand-specific `DESIGN.md` references for agents and people building or redesigning interfaces. Each reference records design tokens and usage guidance drawn from the brand’s product design.

Key features

  1. 01Brand-specific design token references
  2. 02Color roles and typography hierarchies
  3. 03Component styling and states
  4. 04Spacing, grids, shadows, and breakpoints
  5. 05Brand-specific design do's and don'ts

Use cases

  1. 01Apply a brand's documented styles to a UI
  2. 02Check whether a brand reference exists in the collection
  3. 03Consult preview files for visual reference

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/veeralspatel/awesome-design-skill --skill awesome-design

After installing, type/awesome-designin Claude Code to confirm it loaded.

Details

From the project README

Awesome Design: Brand Reference Library

A curated collection of DESIGN.md files — one per brand — each extracting that product's real design tokens: color palette + semantic roles, typography hierarchy, component stylings (buttons/cards/inputs/nav with states), spacing/grid, shadow/elevation system, responsive breakpoints, and do's/don'ts. Source: voltagent/awesome-design-md (credit to VoltAgent — this skill just wraps it for easy install; the reference content and its license belong to that repo).

One-time setup

If ${CLAUDE_PLUGIN_DATA}/awesome-design-md/ doesn't exist yet — the user asks to "set up awesome design," or a brand reference is needed and none has been cloned — clone it:

mkdir -p ${CLAUDE_PLUGIN_DATA}
git clone https://github.com/voltagent/awesome-design-md ${CLAUDE_PLUGIN_DATA}/awesome-design-md

Full clone (not shallow), so a later git pull in that directory picks up brands added upstream over time. This only needs to run once — it persists in the plugin's data directory across updates.

Using a brand reference

  1. Check ${CLAUDE_PLUGIN_DATA}/awesome-design-md/design-md/ for the requested brand's folder (lowercase, hyphenated — e.g. design-md/stripe/DESIGN.md).
  2. If the exact brand isn't there, list the closest matches from the directory (e.g. similar category — fintech, dev tools, SaaS) and ask the user to pick one, or say plainly it isn't in the collection rather than guessing at tokens.
  3. Read the brand's DESIGN.md, and preview.html / preview-dark.html if the user wants a visual reference, then apply its tokens — colors, type scale, component states, spacing, shadows, breakpoints — when building or redesigning the requested UI. Treat it as ground truth for "what does this brand's UI actually look like," not just a mood board.

Full brand list

Read ${CLAUDE_PLUGIN_DATA}/awesome-design-md/README.md's Collection section, or list the design-md/ directory directly. Run git pull in that directory first if the user is looking for a brand that might have been added since the initial clone.

Comments

Markdown supported