getdesign-md Skill
从 getdesign.md 下载知名品牌/网站的设计系统规范文档（DESIGN.md），让前端开发能够快速复用成熟的设计体系。
核心功能
- 根据品牌名称下载对应的 DESIGN.md 设计系统文档
- 涵盖 60+ 知名品牌的设计规范（颜色、字体、间距、组件风格等）
- 下载后的 DESIGN.md 可直接放入项目根目录，指导前端开发
安装
# 无需安装，通过 npx 直接使用
npx getdesign@latest --help
使用方法
搜索可用的设计系统
# 列出所有可用的设计系统
npx getdesign@latest list
下载指定品牌的设计系统
# 下载 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
常见品牌关键字
品牌名称全部使用小写，常用的包括：
| 品牌 | 关键字 | 风格描述 |
|---|---|---|
| Apple | apple | 极简白、SF Pro、影院级画面 |
| Stripe | stripe | 紫色渐变、轻盈优雅 |
| Linear | linear | 极简精确、紫色强调 |
| Nike | nike | 单色UI、大写字体、全幅摄影 |
| Airbnb | airbnb | 暖色珊瑚、圆润UI |
| Shopify | shopify | 暗色优先、霓虹绿强调 |
| Notion | notion | 暖系极简、衬线标题 |
| Figma | figma | 多彩活力、专业有趣 |
| Vercel | vercel | 黑白精准、Geist字体 |
| Spotify | spotify | 深色背景绿色强调、大字体 |
| Tesla | tesla | 极度简化、全视口摄影 |
| SpaceX | spacex | 黑白对比、全幅图像、未来感 |
| Claude | claude | 暖色赤陶、干净编辑布局 |
| Cursor | cursor | 暗色界面、渐变强调 |
| Supabase | supabase | 暗色翡翠、代码优先 |
| PostHog | posthog | 开发者友好暗色UI |
工作流程
- 需求确认：了解项目目标和用户群体，选择合适的设计风格
- 下载 DESIGN.md：使用
npx getdesign@latest add <brand>下载到项目根目录 - 分析设计规范：阅读 DESIGN.md 中的颜色系统、字体、间距、组件规范
- 应用到开发：将设计规范转化为 TailwindCSS 配置或 CSS 变量，指导前端开发
注意事项
- DESIGN.md 文件会下载到当前工作目录
- 如果项目已有 DESIGN.md，会被覆盖
- 可以根据项目需要对下载的设计规范进行定制修改
- 建议将 DESIGN.md 放在项目根目录，方便团队成员参考