OpenClaw LaunchOpenClaw Launch
🎨

Awesome Design MD

Verified

by VoltAgent

A curated collection of DESIGN.md files covering 59 brands (Stripe, Figma, Linear, Vercel, Notion, Apple, Spotify, Coinbase, NVIDIA, Tesla, Airbnb, Supabase, Sentry, and more). Each file captures the brand's complete visual language — colors, typography, components, spacing, voice — in a format any AI agent can read. Drop one into a project and ask the agent to build a page in that style. Backed by the VoltAgent/awesome-design-md repository.

designdesign-systemuibrandingstripefigmalinearvercelnotionapplevoltagent
View on GitHub

Awesome Design MD

Wraps the VoltAgent awesome-design-md collection — 59 DESIGN.md files, each capturing a real brand's design language (colors, typography, components, spacing, voice) in a format an AI agent can read.

Available brands (59)

airbnb, airtable, apple, bmw, cal, claude, clay, clickhouse, cohere, coinbase, composio, cursor, elevenlabs, expo, ferrari, figma, framer, hashicorp, ibm, intercom, kraken, lamborghini, linear.app, lovable, minimax, mintlify, miro, mistral.ai, mongodb, notion, nvidia, ollama, opencode.ai, pinterest, posthog, raycast, renault, replicate, resend, revolut, runwayml, sanity, semrush, sentry, spacex, spotify, stripe, supabase, superhuman, tesla, together.ai, uber, vercel, voltagent, warp, webflow, wise, x.ai, zapier

How to use

  1. Identify the brand. "Build a landing like Stripe" → brand = stripe. If unclear, ask which brand.
  2. Fetch the brand's DESIGN.md from the raw GitHub URL:

https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/<brand>/DESIGN.md

e.g. https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/stripe/DESIGN.md

  1. Extract the tokens needed for the task (colors, fonts, spacing, radius, component patterns, voice).
  2. Apply them to the target — new component, page mockup, or re-skin of existing code.
  3. If the user wants a DESIGN.md for their OWN project, use the VoltAgent template (design-md/voltagent/DESIGN.md) as a starting point and adapt it to their codebase.

Examples

  • "Build me a pricing page in the style of Stripe"
  • "Re-skin this dashboard with Linear's design language"
  • "Make the hero section look like Vercel's"
  • "Create a DESIGN.md for my app based on the voltagent template"

Guidelines

  • Always ground design choices in the actual DESIGN.md — do not invent tokens.
  • When mixing a brand's tokens with existing project code, keep the project's structural conventions (file layout, component API) and only swap the visual tokens.
  • Cite the source DESIGN.md when producing output so the user can verify.
  • If the requested brand isn't in the 59 list, say so and suggest the closest match.

Upstream

  • Repo: https://github.com/VoltAgent/awesome-design-md
  • Browse brands: https://github.com/VoltAgent/awesome-design-md/tree/main/design-md

More Design Tools Skills

🎨
Figma Auto Layout

Master Figma auto layout for responsive designs.

💎
Sketch Symbol Organizer

Organize Sketch symbols and shared styles efficiently.

🎯
Design Token Manager

Create and manage design tokens for consistency.

🔣
Icon Set Generator

Create consistent icon sets for your product.