agentleFS
Sign inStart free
liushikuan63liushikuan63/Qoder-Optimization/skills/awesome-design-md/SKILL.md

awesome-design-md

Skill2 starsChanged 11 days agoMITView on GitHub

A bundled library of 74 DESIGN.md design-system documents analyzed from real product websites (Apple, Claude, Stripe, Linear, Figma, Nike, Vercel, Tesla, Starbucks, Notion and more)。中文触发：前端样式 设计系统 UI 组件库 设计

6 other projects use a version of this, 1 of them edited.

Adopted by

Most recently taken up by

Used with

Projects with it also use caveman.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • MicrosoftSkill

    caveman

    Ultra-compressed response style that reduces output token count while preserving technical accuracy, with intensity levels and auto-clarity safety rules

    Also in 3 projects that use this

The file

We split this skill into the rules it gives an agent

3 rules. 0 are common, 1 is distinctive, and 2 are very specific to this project.

  • 0

    Common

    Most of the 4 edited versions we read keep these.

  • 1

    Distinctive

    This author's own choices. Worth a look.

  • 2

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Read design-md/<slug>/DESIGN.md relative to this skill's directory (globally installed at ~/.qoder-cn/skills/awesome-design-md/).

    line 17
  2. Distinctive:

    Follow the file's Do's / Don'ts section when choosing components and layout.

    line 19
  3. Very specific:

    Token-header files (64): start with a YAML-style block (name, description, colors:, typography:, ...), followed by prose sections …

    line 23

“Common” is measured: kept by at least 6 in 10 of the 4 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Awesome DESIGN.md

Overview

74 brand design-system documents extracted from real product websites, bundled as ready-to-apply DESIGN.md files. Each file contains exact design tokens (colors, typography, spacing, radii, shadows), component specs, layout principles, and do/don't rules. Read the file for the chosen brand, then apply its tokens when generating UI.

Source: https://github.com/VoltAgent/awesome-design-md (MIT License, see LICENSE).

How to use

  1. Match the request to a brand in the index below, or ask the user which brand to use when it is ambiguous.
  2. Read design-md/<slug>/DESIGN.md relative to this skill's directory (globally installed at ~/.qoder-cn/skills/awesome-design-md/).
  3. Apply the file's values exactly — use its hex values, font stacks, radius and shadow specs instead of approximations. The token block at the top of each file is the source of truth.
  4. Follow the file's Do's / Don'ts section when choosing components and layout.

Two file layouts exist; treat both the same way:

  • Token-header files (64): start with a YAML-style block (name, description, colors:, typography:, ...), followed by prose sections (Overview, Colors, Typography, Layout, Components, Do's and Don'ts).
  • Numbered files (10): kraken, lamborghini, lovable, mastercard, runwayml, sanity, spotify, starbucks, tesla, theverge — use numbered sections (Visual Theme, Color Palette, Typography Rules, ...) with values inlined in prose.

Pick by vibe when no exact brand is requested:

  • Dark & technical: vercel, linear.app, supabase, raycast, warp
  • Warm editorial: claude, notion, stripe, mastercard
  • Luxury / monumental: bugatti, ferrari, lamborghini, vodafone
  • Playful & colorful: figma, miro, posthog, zapier
  • Photography-first: apple, nike, tesla, meta
  • Retro web: dell-1996, nintendo-2001

Brand index

AI & LLM Platforms

BrandSlugStyle cues
ClaudeclaudeAnthropic's AI assistant. Warm terracotta accent, clean editorial layout
CoherecohereEnterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic
ElevenLabselevenlabsAI voice platform. Dark cinematic UI, audio-waveform aesthetics
MinimaxminimaxAI model provider. Bold dark interface with neon accents
Mistral AImistral.aiOpen-weight LLM provider. French-engineered minimalism, purple-toned
OllamaollamaRun LLMs locally. Terminal-first, monochrome simplicity
OpenCode AIopencode.aiAI coding platform. Developer-centric dark theme
ReplicatereplicateRun ML models via API. Clean white canvas, code-forward
RunwayrunwaymlAI creative-tools platform. Cinematic dark heroes, paper-white reading bands, black pill CTAs
Together AItogether.aiOpen-source AI infrastructure. Technical, blueprint-style design
VoltAgentvoltagentAI agent framework. Void-black canvas, emerald accent, terminal-native
xAIx.aiElon Musk's AI lab. Stark monochrome, futuristic minimalism

Developer Tools & IDEs

BrandSlugStyle cues
CursorcursorAI-first code editor. Sleek dark interface, gradient accents
ExpoexpoReact Native platform. Dark theme, tight letter-spacing, code-centric
LovablelovableAI full-stack builder. Playful gradients, friendly dev aesthetic
RaycastraycastProductivity launcher. Sleek dark chrome, vibrant gradient accents
SuperhumansuperhumanFast email client. Premium dark UI, keyboard-first, purple glow
VercelvercelFrontend deployment platform. Black and white precision, Geist font
WarpwarpModern terminal. Dark IDE-like interface, block-based command UI

Backend, Database & DevOps

BrandSlugStyle cues
ClickHouseclickhouseFast analytics database. Yellow-accented, technical documentation style
ComposiocomposioTool integration platform. Modern dark with colorful integration icons
HashiCorphashicorpInfrastructure automation. Enterprise-clean, black and white
MongoDBmongodbDocument database. Green leaf branding, developer documentation focus
PostHogposthogProduct analytics. Playful hedgehog branding, developer-friendly dark UI
SanitysanityHeadless content platform. Dark-first editorial marketing, 112px display type, coral-red CTA accent
SentrysentryError monitoring. Dark dashboard, data-dense, pink-purple accent
SupabasesupabaseOpen-source Firebase alternative. Dark emerald theme, code-first

Productivity & SaaS

BrandSlugStyle cues
Cal.comcalOpen-source scheduling. Clean neutral UI, developer-oriented simplicity
IntercomintercomCustomer messaging. Friendly blue palette, conversational UI patterns
Linearlinear.appProject management for engineers. Ultra-minimal, precise, purple accent
MintlifymintlifyDocumentation platform. Clean, green-accented, reading-optimized
NotionnotionAll-in-one workspace. Warm minimalism, serif headings, soft surfaces
ResendresendEmail API for developers. Minimal dark theme, monospace accents
ZapierzapierAutomation platform. Warm orange, friendly illustration-driven

Design & Creative Tools

BrandSlugStyle cues
AirtableairtableSpreadsheet-database hybrid. Colorful, friendly, structured data aesthetic
ClayclayCreative agency. Organic shapes, soft gradients, art-directed layout
FigmafigmaCollaborative design tool. Vibrant multi-color, playful yet professional
FramerframerWebsite builder. Bold black and blue, motion-first, design-forward
MiromiroVisual collaboration. Bright yellow accent, infinite canvas aesthetic
WebflowwebflowVisual web builder. Blue-accented, polished marketing site aesthetic

Fintech & Crypto

BrandSlugStyle cues
BinancebinanceCrypto exchange. Bold Binance Yellow on monochrome, trading-floor urgency
CoinbasecoinbaseCrypto exchange. Clean blue identity, trust-focused, institutional feel
KrakenkrakenCrypto trading platform. Purple-accented dark UI, data-dense dashboards
MastercardmastercardGlobal payments network. Warm cream canvas, orbital pill shapes, editorial warmth
RevolutrevolutDigital banking. Sleek dark interface, gradient cards, fintech precision
StripestripePayment infrastructure. Signature purple gradients, weight-300 elegance
WisewiseInternational money transfer. Bright green accent, friendly and clear

E-commerce & Retail

BrandSlugStyle cues
AirbnbairbnbTravel marketplace. Warm coral accent, photography-driven, rounded UI
MetametaTech retail store. Photography-first, binary light/dark surfaces, Meta Blue CTAs
NikenikeAthletic retail. Monochrome UI, massive uppercase Futura, full-bleed photography
ShopifyshopifyE-commerce platform. Dark-first cinematic, neon green accent, ultra-light display type
StarbucksstarbucksCoffee retail flagship. Four-tier earth-green system, warm cream canvas, proprietary SoDoSans typography

Media & Consumer Tech

BrandSlugStyle cues
AppleappleConsumer electronics. Premium white space, SF Pro, cinematic imagery
HPhpPC and printer maker. Pure white canvas, HP Electric Blue CTA, Forma DJR Micro, chevron decorations
IBMibmEnterprise technology. Carbon design system, structured blue palette
NVIDIAnvidiaGPU computing. Green-black energy, technical power aesthetic
PinterestpinterestVisual discovery platform. Red accent, masonry grid, image-first
PlayStationplaystationGaming console retail. Three-surface channel layout, cyan hover-scale interaction
SpaceXspacexSpace technology. Stark black and white, full-bleed imagery, futuristic
SpotifyspotifyMusic streaming. Vibrant green on dark, bold type, album-art-driven
The VergethevergeTech editorial media. Acid-mint and ultraviolet accents, Manuka display type
UberuberMobility platform. Bold black and white, tight type, urban energy
VodafonevodafoneGlobal telecom brand. Monumental uppercase display, Vodafone Red chapter bands
WIREDwiredTech magazine. Paper-white broadsheet density, custom serif, ink-blue links

Automotive

BrandSlugStyle cues
BMWbmwLuxury automotive. Dark premium surfaces, precise German engineering aesthetic
BMW Mbmw-mPerformance automotive. Motorsport-inspired contrast, M color accents, precision-driven layout
BugattibugattiLuxury hypercar. Cinema-black canvas, monochrome austerity, monumental display type
FerrariferrariLuxury automotive. Chiaroscuro black-white editorial, Ferrari Red with extreme sparseness
LamborghinilamborghiniLuxury automotive. True black cathedral, gold accent, LamboType custom Neo-Grotesk
RenaultrenaultFrench automotive. Vivid aurora gradients, NouvelR proprietary typeface, zero-radius buttons
TeslateslaElectric vehicles. Radical subtraction, cinematic full-viewport photography, Universal Sans

Retro Web

BrandSlugStyle cues
Dell (1996)dell-1996Catalog-era enterprise web. Black page frame, flat color-block ribbon cards, Helvetica-Black titles over Times Roman body, GIF stickers
Nintendo.com (2001)nintendo-2001Y2K console chrome. Beveled periwinkle metal panels, halftone-dotted carbon nav, outlined Arial-Black wordmarks, pixel Mario bubble

Other

BrandSlugStyle cues
SlackslackWorkplace messaging brand. Deep aubergine primary, cream-lavender hero gradients, blue inline links, pill CTAs

Notes

  • Proprietary fonts (SF Pro, SpotifyMixUI, SoDoSans, ...) are always listed with fallback stacks — use the fallbacks when the real font is unavailable.
  • These files are community analyses of public websites, not official brand guidance. Do not imply brand endorsement; keep the LICENSE file with the bundle.
  • To update the library, re-pull https://github.com/VoltAgent/awesome-design-md and replace design-md/.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free