Agent Skills

brand-design-md

A Claude Code Skill that gives your AI agent the design language of 62 world-class brands — on demand.

Installation
CLI
npx skills add https://github.com/zephyrwang6/brand-design-md --skill brand-design-md

Installieren Sie diesen Skill über die CLI und beginnen Sie mit der Verwendung des SKILL.md-Workflows in Ihrem Arbeitsbereich.

Zuletzt aktualisiert am 4/23/2026

brand-design-md

A Claude Code Skill powered by getdesign.md — give your AI agent the design language of world-class brands, on demand.

Brands
Claude Code
Last Update
License

English · 中文

The Problem

Vibecoding has a style problem.

You can ask AI to build a landing page in minutes. But the result looks like... AI built it. Random primary colors. System fonts. Buttons that could belong to any company on earth.

The fix isn't better prompting — it's better context. Design systems like Apple's, Notion's, and Stripe's aren't "minimalist" or "clean" in the abstract. They're defined by exact values: letter-spacing: -2.125px, font-weight: 300, rgba(50,50,93,0.25) 0px 30px 45px -30px. That precision is what makes them recognizable.

This skill gives Claude Code access to all of it.

What It Does

This Claude Code Skill wraps getdesign.md — a project that distills 62 top brand design systems into structured DESIGN.md files — and makes it available as a conversational interface.

Say this:

"Build a login page in Stripe style"
"Make it look like Linear"
"Notion warm colors + Linear minimal layout, build a card component"

The skill will:

  1. Recognize the brand name (Chinese or English)
  2. Run npx getdesign@latest add <slug> to fetch the latest design spec
  3. Extract exact color tokens, typography rules, spacing systems, shadow formulas
  4. Generate UI code that strictly follows the spec — no approximations

Because it calls npx at runtime, it always fetches the latest version of the design spec. If getdesign.md updates a brand's rules, you get the update automatically.

Supported Brands (62 total)

Tech / AI

Apple · Claude · Cursor · ElevenLabs · Figma · Framer · Lovable · Meta · MiniMax · Mintlify · Mistral · Notion · Ollama · OpenCode · PostHog · Raycast · Replicate · Resend · Runway · Sanity · Sentry · Supabase · Superhuman · Together AI · Vercel · VoltAgent · Warp · Webflow · X.AI · Zapier

Dev Tools / Infrastructure

Airtable · Cal.com · Clay · ClickHouse · Cohere · Composio · Expo · HashiCorp · IBM · Intercom · Linear · Miro · MongoDB · NVIDIA · Pinterest · Stripe

Fintech / Crypto

Binance · Coinbase · Kraken · Revolut · Wise

Consumer / Automotive

Airbnb · BMW · Ferrari · Lamborghini · Nike · Renault · Shopify · SpaceX · Spotify · Tesla · Uber

Quick Reference

apple      → extreme whitespace + SF Pro + cinematic quality
notion     → warm minimal + serif headings + soft surfaces
claude     → terracotta accent + editorial layout + warm intellect
stripe     → purple + weight-300 elegance + refined detail
linear     → ultra minimal + precise + purple accent
vercel     → black & white precision + Geist font + pure minimal
cursor     → dark + gradient accent + AI-native
spotify    → dark base + neon green + album-art driven
tesla      → radical reduction + full-bleed photography + near-zero UI
ferrari    → cinematic black + Ferrari red + luxury typography
airbnb     → coral warmth + photography-first + rounded UI

Installation

Prerequisites

Install the Skill

# Clone this repo
git clone https://github.com/zephyrwang6/brand-design-md.git

# Create the skill directory and copy the file
mkdir -p ~/.claude/skills/brand-design-md
cp brand-design-md/SKILL.md ~/.claude/skills/brand-design-md/SKILL.md

Restart Claude Code and the skill is live.

Usage

Single brand

Build a Hero section in Apple style
Make a pricing page that looks like Stripe
Create a Notion-style card component

Multi-brand mix

Notion warm colors + Linear minimal layout, build a Feature section
Apple whitespace system + Claude terracotta accent

Output formats

  • Default: single-file HTML with inline CSS
  • Specify React, Vue, or Tailwind if needed
  • Code includes comments showing which brand each token comes from

How It Works

The skill runs npx getdesign@latest add <slug> in a temp directory, reads the generated DESIGN.md, and uses its contents as the design context for code generation.

This means:

  • No stale specs — fetches from getdesign.md at runtime
  • No manual file management — nothing gets committed to your project
  • Exact fidelity — the spec contains precise CSS values, not vague descriptions

Demo

The following pages were generated using this skill + getdesign.md:

Style Characteristics
Apple 80px hero type, full-bleed Cinematic Band, pill buttons in #0071e3
Notion Warm #fffdf9 background, Georgia serif headings, numbered feature list
Claude #faf8f5 base, terracotta #d97757 accent, 720px editorial column
Stripe sohne-var font, weight 300, #533afd purple, layered blue shadows

Credits

Design specs sourced from getdesign.md by VoltAgent. This skill is a Claude Code wrapper — all design system content belongs to the respective brand owners.

License

MIT

中文说明

一个 Claude Code Skill，让你的 AI 直接调用 62 个顶级品牌的设计规范。

不再是"AI 默认风格"。告诉 Claude Code "用 Stripe 风格做一个登录页"，它会自动拉取真实设计规范，提取精确的设计 Token，生成高度还原的 UI 代码。

背景

Vibecoding 有个通病：AI 做出来的 UI 没有风格。

不是写错了，是没有参照物。苹果、Notion、Stripe 的设计系统不是什么"简约"或"精致"的抽象概念，而是一堆精确的数值：letter-spacing: -2.125px、font-weight: 300、rgba(50,50,93,0.25) 0px 30px 45px -30px。正是这些精确值让它们一眼可辨。

这个 Skill 把这些精确值全部交给 Claude Code。

工作原理

Skill 在运行时调用 npx getdesign@latest add <slug>，实时拉取指定品牌的 DESIGN.md，提取颜色、字体、间距、阴影等设计 Token，作为上下文生成 UI。

因为是实时调用，所以永远获取最新版本的设计规范。

安装

git clone https://github.com/zephyrwang6/brand-design-md.git
mkdir -p ~/.claude/skills/brand-design-md
cp brand-design-md/SKILL.md ~/.claude/skills/brand-design-md/SKILL.md

重启 Claude Code 即可使用。

使用示例

单品牌

用 Apple 风格帮我做一个 Hero 区块
做一个 Stripe 风格的定价页
Notion 风格的卡片组件

多品牌混搭

Notion 的暖色调 + Linear 的极简排版，做个 Feature 区
用 Apple 的留白系统 + Claude 的橙赭强调色

支持中英文品牌名，均可正确识别。

支持品牌

共 62 个，覆盖科技、AI、开发工具、金融、消费品、汽车等品类。完整列表及一句话风格描述见上方英文部分。

设计规范来源：getdesign.md · VoltAgent/awesome-design-md