Download from getdesign.md the design system specification documentation (DESIGN.md) for well-known brands/websites, enabling front-end developers to quickly reuse mature design systems.
Core Features
- Download the corresponding DESIGN.md design system documentation based on the brand name
- Covers design specifications for 60+ well-known brands (colors, fonts, spacing, component styles, etc.)
- The downloaded DESIGN.md can be placed directly in the project root directory to guide front-end development
Installation
# 无需安装，通过 npx 直接使用
npx getdesign@latest --help
Usage
Search for available design systems
# 列出所有可用的设计系统
npx getdesign@latest list
Download the design system for a specified brand
# 下载 Stripe 风格的 DESIGN.md 到当前目录
npx getdesign@latest add stripe
# 下载 Apple 风格
npx getdesign@latest add apple
# 下载 Linear 风格
npx getdesign@latest add linear
# 下载 Nike 风格
npx getdesign@latest add nike
# 下载 Airbnb 风格
npx getdesign@latest add airbnb
Common Brand Keywords
Brand names are all lowercase; commonly used ones include:
| Brand | Keyword | Style Description |
|---|---|---|
| Apple | apple |
Minimalist white, SF Pro, cinematic visuals |
| Stripe | stripe |
Purple gradients, light and elegant |
| Linear | linear |
Minimalist and precise, purple accent |
| Nike | nike |
Monochrome UI, uppercase typography, full-bleed photography |
| Airbnb | airbnb |
Warm coral, rounded UI |
| Shopify | shopify |
Dark-first, neon green accent |
| Notion | notion |
Warm minimalism, serif headings |
| Figma | figma |
Colorful and vibrant, professional and fun |
| Vercel | vercel |
Black-and-white precision, Geist font |
| Spotify | spotify |
Dark background with green accent, large typography |
| Tesla | tesla |
Extreme simplification, full-viewport photography |
| SpaceX | spacex |
Black-and-white contrast, full-bleed imagery, futuristic |
| Claude | claude |
Warm terracotta, clean editorial layout |
| Cursor | cursor |
Dark interface, gradient accents |
| Supabase | supabase |
Dark emerald, code-first |
| PostHog | posthog |
Developer-friendly dark UI |
Workflow
- Requirement confirmation: Understand the project goals and user base, and choose a suitable design style
- Download DESIGN.md: Use
npx getdesign@latest add <brand>to download to the project root directory - Analyze the design specifications: Read the color system, fonts, spacing, and component specifications in DESIGN.md
- Apply to development: Translate the design specifications into TailwindCSS configuration or CSS variables to guide front-end development
Notes
- The DESIGN.md file will be downloaded to the current working directory
- If the project already has a DESIGN.md, it will be overwritten
- The downloaded design specifications can be customized and modified as needed for the project
- It is recommended to place DESIGN.md in the project root directory for easy reference by team members