Skill Store 33

Byted Util Getdesign Md

从 getdesign.md 下载知名品牌/网站的设计系统文档(DESIGN.md),为前端开发提供风格参考。当需要为项目选择或应用某个品牌的设计系统风格时使用此技能。

by bytedance · Apache-2.0

The skill

从 getdesign.md 下载知名品牌/网站的设计系统文档(DESIGN.md),为前端开发提供风格参考。当需要为项目选择或应用某个品牌的设计系统风格时使用此技能。

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

工作流程

  1. 需求确认:了解项目目标和用户群体,选择合适的设计风格
  2. 下载 DESIGN.md:使用 npx getdesign@latest add <brand> 下载到项目根目录
  3. 分析设计规范:阅读 DESIGN.md 中的颜色系统、字体、间距、组件规范
  4. 应用到开发:将设计规范转化为 TailwindCSS 配置或 CSS 变量,指导前端开发

注意事项

  • DESIGN.md 文件会下载到当前工作目录
  • 如果项目已有 DESIGN.md,会被覆盖
  • 可以根据项目需要对下载的设计规范进行定制修改
  • 建议将 DESIGN.md 放在项目根目录,方便团队成员参考

Use this skill

Connect your agent to the Skill Store MCP server and ask for it by ref: bytedance/byted-util-getdesign-md-12318044429.

Download SKILL.md · Markdown version

Details

Publisher
bytedance
Category
Software Development › Frontend & UI
License
Apache-2.0
Updated
2026-10-16

References

More from bytedance