Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
bytedance avatar

Byted Util Getdesign Md

  • 6 installs
  • 411 repo stars
  • Updated August 4, 2026
  • bytedance/agentkit-samples

getdesign-md is a Claude skill that downloads a brand's DESIGN.md design-system document via the getdesign.md service to guide frontend styling.

About

getdesign-md downloads a DESIGN.md design-system document for a named brand or website using the getdesign.md service. A developer runs npx getdesign@latest add <brand> to pull specs for colors, fonts, spacing and component styles into the project root. The downloaded DESIGN.md is then used as a style reference for frontend development, for example to derive TailwindCSS config or CSS variables.

  • Downloads a brand DESIGN.md style spec via npx getdesign@latest add <brand>
  • Covers 60+ known brands' design specs (color, font, spacing, component style)
  • DESIGN.md drops into the project root as a frontend style reference

Byted Util Getdesign Md by the numbers

  • 6 all-time installs (skills.sh)
  • Ranked #1,500 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

byted-util-getdesign-md capabilities & compatibility

Capabilities
design system download · ui styling · design tokens
Use cases
ui design · web design · frontend
Pricing
Free
From the docs

What byted-util-getdesign-md says it does

npx getdesign@latest add stripe
SKILL.md
涵盖 60+ 知名品牌的设计规范(颜色、字体、间距、组件风格等)
SKILL.md
npx skills add https://github.com/bytedance/agentkit-samples --skill byted-util-getdesign-md

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs6
repo stars411
Last updatedAugust 4, 2026
Repositorybytedance/agentkit-samples

What it does

Pull a named brand's design-system spec into a project to guide frontend styling.

Who is it for?

Starting frontend work that should match an established brand's visual style.

Skip if: Projects needing an original, from-scratch design system.

When should I use this skill?

You want to apply a specific brand's design-system style to a project.

What you get

A DESIGN.md style spec sits in the project root ready to translate into Tailwind or CSS variables.

By the numbers

  • Covers 60+ known brands' design specs

Files

SKILL.mdMarkdownGitHub ↗

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

常见品牌关键字

品牌名称全部使用小写,常用的包括:

品牌关键字风格描述
Appleapple极简白、SF Pro、影院级画面
Stripestripe紫色渐变、轻盈优雅
Linearlinear极简精确、紫色强调
Nikenike单色UI、大写字体、全幅摄影
Airbnbairbnb暖色珊瑚、圆润UI
Shopifyshopify暗色优先、霓虹绿强调
Notionnotion暖系极简、衬线标题
Figmafigma多彩活力、专业有趣
Vercelvercel黑白精准、Geist字体
Spotifyspotify深色背景绿色强调、大字体
Teslatesla极度简化、全视口摄影
SpaceXspacex黑白对比、全幅图像、未来感
Claudeclaude暖色赤陶、干净编辑布局
Cursorcursor暗色界面、渐变强调
Supabasesupabase暗色翡翠、代码优先
PostHogposthog开发者友好暗色UI

工作流程

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

注意事项

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

Related skills

FAQ

How do I download a brand's design system?

Run npx getdesign@latest add <brand>, for example npx getdesign@latest add stripe, to download that brand's DESIGN.md into the current directory.

Do I need to install anything?

No install is required; it runs through npx directly (npx getdesign@latest --help).

Design & UI/UXuibranding

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.