nby-awesome-design-md

用途

nby-awesome-design-md 用于把真实世界的设计系统应用到任意项目中，方式是通过一个 DESIGN.md 文件。它由 VoltAgent/awesome-design-md 提供支持，内置 54 个真实网站的设计系统，覆盖多个行业类别。当用户说出“use Stripe design”“apply Notion style”“DESIGN.md”“design system”等表述时触发。

主要能力

该技能提供以下设计系统（按类别）：

AI 与机器学习：claude、cohere、elevenlabs、minimax、mistral.ai、ollama、opencode.ai、replicate、runwayml、together.ai、voltagent、x.ai
开发者工具：cursor、expo、linear.app、lovable、mintlify、posthog、raycast、resend、sentry、supabase、superhuman、vercel、warp、zapier
基础设施与云：clickhouse、composio、hashicorp、mongodb、sanity、stripe
设计与生产力：airtable、cal、clay、figma、framer、intercom、miro、notion、pinterest、webflow
金融科技：coinbase、kraken、revolut、wise
企业与消费：airbnb、apple、bmw、ibm、nvidia、spacex、spotify、uber

使用方式

工作流程分为四步。

第一步：确保本地缓存。首次运行时克隆仓库，后续运行复用缓存。

REPO_DIR="$HOME/.nby-skills/nby-awesome-design-md/repo"

if [ -d "$REPO_DIR/.git" ]; then
  echo "Cache exists, pulling latest..."
  cd "$REPO_DIR" && git pull --ff-only 2>/dev/null || true
else
  echo "First run, cloning..."
  mkdir -p "$(dirname "$REPO_DIR")"
  git clone --depth 1 https://github.com/VoltAgent/awesome-design-md.git "$REPO_DIR"
fi

第二步：识别目标设计。如果用户指定了品牌名，将其映射到目录 slug（例如 "Linear" -> linear.app，"xAI" -> x.ai）。如果不明确，列出可用设计并询问。列出所有可用设计：

ls "$HOME/.nby-skills/nby-awesome-design-md/repo/design-md/"

第三步：应用 DESIGN.md。将选定的 DESIGN.md 复制到项目根目录：

BRAND="stripe"  # replace with user's choice
cp "$HOME/.nby-skills/nby-awesome-design-md/repo/design-md/$BRAND/DESIGN.md" ./DESIGN.md

如果项目根目录已存在 DESIGN.md，覆盖前需警告用户。

第四步：确认并引导。放置 DESIGN.md 后，简要总结该设计系统的关键特征（2-3 行：主色、字体、风格），告知用户 DESIGN.md 已位于项目根目录，如果用户有具体请求则继续生成 UI，并在所有设计决策中引用 DESIGN.md。

适用场景

适用于需要快速为项目引入成熟、真实网站设计系统的场景，例如希望采用 Stripe、Notion、Linear 等品牌的设计语言来生成 UI 代码，或需要统一颜色、排版、间距、组件和布局规范时。

限制

规则要求：生成任何 UI 代码前必须阅读已应用的 DESIGN.md，将其作为颜色、排版、间距、组件和布局的唯一依据；不得在未检查 DESIGN.md 的情况下硬编码设计值；如果用户想混合多个品牌的风格，应复制一个作为基础，并注明哪些元素来自其他品牌；生成组件时，需引用 DESIGN.md 中确切的颜色十六进制值、字体族、border-radius 和阴影值。

关于收费、价格、平台支持范围等更多信息，资料中暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制