本文へ移動
cccskills
無料GitHub で公開

byted-util-getdesign-md

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

インストール方法を見る

含まれるファイル(3)

  • SKILL.md3.0 KB
  • _meta.json115 B
  • LICENSE11.1 KB

SKILL.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

常见品牌关键字

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

品牌关键字风格描述
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 放在项目根目录,方便团队成员参考

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Deploy, update, validate, and troubleshoot the AgentKit hybrid-cloud customer-service demo in this directory. Use when a user asks an AI coding agent to follow the README, deploy or update the demo, configure OpenAPI/Runtime/Knowledge/Memory/Sandbox/MCP/Skills/A2A, run customer-view validation, or record manual platform steps and failures.

日本語の概要は準備中です。原文の説明を表示しています。

bytedance/agentkit-samples4702026年10月12日 更新

Generate deterministic SVG algorithmic artwork. Invoke when the user asks for geometric, generative, or algorithmic visual art.

日本語の概要は準備中です。原文の説明を表示しています。

bytedance/agentkit-samples4702026年10月12日 更新

通过本地 Python CLI 和 OpenAPI 客户端管理、排查火山云手机资源。适用于查询实例和资源、截图、执行命令、查看任务、检查应用、主机和机房容量、标签、DNS、路由,以及操作已授权的测试云手机实例。

日本語の概要は準備中です。原文の説明を表示しています。

bytedance/agentkit-samples4702026年10月12日 更新

Launch and continue the Volcengine AI Research survey workflow for concept testing, audience design, questionnaire drafting, interview guide generation, execution confirmation, progress checks, and result queries. Use this skill when the user wants to create, revise, confirm, execute, or follow up on a real AI research survey task in ABCompass instead of doing generic brainstorming, copywriting, translation, summarization, or broad market discussion.

日本語の概要は準備中です。原文の説明を表示しています。

bytedance/agentkit-samples4702026年10月12日 更新

Create and check long-running video material evaluation tasks. Use this skill when the user wants to submit videos for evaluation, check an existing video evaluation task list, or fetch the result of a previously created video evaluation task. This skill is not a general-purpose video upload skill because upload is allowed only as an internal step of task creation. Authentication uses an API key passed as an Authorization bearer token.

日本語の概要は準備中です。原文の説明を表示しています。

bytedance/agentkit-samples4702026年10月12日 更新

火山引擎 AntiDDoSPro 高防域名只读巡检。用户要查域名健康、攻击、流量、CC/WAF/区域封禁、智能防护或 CCAI 状态时使用。

日本語の概要は準備中です。原文の説明を表示しています。

bytedance/agentkit-samples4702026年10月12日 更新

bytedance のスキルをすべて見る

このスキルの問題を報告する