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 放在项目根目录,方便团队成员参考