用途:在构建 UI 时应用指定的 design.md 设计系统,使颜色、排版、间距等设计令牌成为唯一事实来源。
主要能力:识别设计来源(用户提供的 design.md URL、Vercel/Geist 主题、图库挑选、文字描述合成、Figma 文件);解析 YAML frontmatter 或 Geist 扁平令牌列表,解析 {token.ref} 引用;将令牌落地为 CSS 自定义属性并据此实现界面;完成前做令牌审计,检查魔法色值、字体、间距与悬停/聚焦/禁用状态,以及 WCAG AA 对比度(正文 4.5:1,大文本与 UI 组件 3:1)。
必要用法:若用户提供 URL 则直接抓取;Vercel/Geist 可并行抓取 https://vercel.com/design.md 与 https://vercel.com/design.dark.md,未指定主题需询问,失败时回退 references/geist.md;浏览图库先抓取 https://designsmd.vercel.app/ 读取分类与条目,再抓取 https://designsmd.vercel.app/design/{category}--{slug};Figma 可用 Figma MCP 的 get_variable_defs、search_design_system、get_design_context 提取令牌。合成或提取的规格需先让用户确认。
适用场景:需要严格遵循特定设计系统的一致性 UI 开发。
限制:具体安装命令、收费与价格、平台支持等资料暂未提供;图库条目数可能变化,应每次重新抓取。