SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场design-md

design-md

设计与创作

查看项目

更新于 10-16 05:29

技能介绍

DESIGN.md 是一个纯文本设计系统文档，采用 Google Stitch 九段式格式，供 AI 智能体读取以生成风格一致的 UI。它是设计意图（来自 /shape 的 .design-context.md）与实现（/minoan-frontend-design）之间的令牌层。

三条工作流

工作流 A：获取参考 DESIGN.md

使用 getdesign CLI 从包含 68 个品牌设计系统的库中获取：

npx getdesign@latest add <brand>        # 将 DESIGN.md 放入项目根目录
npx getdesign@latest add stripe --out ./docs/DESIGN.md  # 自定义输出路径
npx getdesign@latest list               # 显示全部 68 个可用品牌

可用品牌包括：airbnb、apple、claude、cursor、figma、framer、linear.app、nike、notion、shopify、spotify、stripe、supabase、tesla、vercel 等共 68 个。每个文件约 350 行，包含精确的十六进制色值、字体栈、组件规格、阴影系统和响应式断点。

获取后，/minoan-frontend-design 在实现过程中会读取 DESIGN.md（其 QA 规范化步骤会将输出与项目 DESIGN.md 令牌对齐）。

预取库

全部 68 个品牌 DESIGN.md 文件可预取到本地参考库：

bash ~/.claude/skills/design-md/scripts/fetch_all_design_md.sh         # 获取全部 68 个
bash ~/.claude/skills/design-md/scripts/fetch_all_design_md.sh --force # 重新获取

库位于 ~/.claude/skills/design-md/library/<brand>/DESIGN.md。无需运行 npx 即可直接读取任意品牌：

cat ~/.claude/skills/design-md/library/stripe/DESIGN.md

library/ 目录已被 gitignore——它是本地缓存，不随技能分发。

工作流 B：生成自定义 DESIGN.md

从现有项目的 CSS 中提取设计令牌并搭建 DESIGN.md：

python3 ~/.claude/skills/design-md/scripts/generate_design_md.py <project-path>
python3 ~/.claude/skills/design-md/scripts/generate_design_md.py . --output DESIGN.md

该脚本扫描包含 @theme 块（Tailwind CSS 4）、:root 自定义属性、字体声明、阴影、边框圆角和断点的 CSS 文件。它将提取的令牌整理为九段式格式，并为需要人工或 Claude 完成的叙述性段落（视觉主题、Do's/Don'ts）保留 TODO 占位符。

生成脚手架后，使用项目上下文填写叙述性段落——概念方向、氛围、设计护栏。格式规范见 references/design-md-format.md。

工作流 C：使用 Google CLI 校验与导出

使用 @google/design.md（九段式格式的上游 CLI）进行 lint、diff 和导出：

npx @google/design.md lint DESIGN.md                       # 8 条校验规则，JSON 输出
npx @google/design.md diff OLD.md NEW.md                   # 令牌级 diff，出现回归时退出码为 1
npx @google/design.md export --format tailwind DESIGN.md   # Tailwind 主题 JSON
npx @google/design.md export --format dtcg DESIGN.md       # W3C Design Token Format JSON
  • 生成后 lint：在工作流 B 之后运行 lint，在完成叙述性内容前发现缺失段落、断裂引用和对比度问题。
  • 交接前 lint：在将 DESIGN.md 传给 /minoan-frontend-design 之前运行 lint。干净的 lint（退出码 0）确认结构完整。
  • 导出用于实现：export --format tailwind 生成下游工具可直接消费的主题 JSON。
  • diff 用于版本管理：将项目的 DESIGN.md 与库参考对比，或审计修订之间的变化。退出码 1 = 回归（移除令牌、对比度断裂）。

lint 规则参考和退出码语义见 references/google-cli.md。

九段式格式

# 段落 内容
1 视觉主题与氛围 叙述：情绪、理念、概念方向
2 色彩调色板与角色 分组：语义名称 + 十六进制 + 功能角色
3 排版规则 字体族、层级表（字号/字重/字距/行高）
4 组件样式 按钮、卡片、输入框、导航——CSS 值 + 状态
5 布局原则 间距尺度、网格、留白理念、边框圆角尺度
6 深度与层级 阴影系统表、表面层级
7 Do's 与 Don'ts 设计护栏与反模式
8 响应式行为 断点表、触控目标、折叠策略
9 智能体提示指南 便于复制粘贴的快速色彩参考

完整注释规范及每段示例见 references/design-md-format.md。

流水线集成

/shape → .design-context.md（意图：受众、情绪、反目标）
/design-md → DESIGN.md（令牌：十六进制值、字体栈、阴影系统）
  lint → npx @google/design.md lint DESIGN.md（校验关卡）
/minoan-frontend-design → 实现（创意方向 + 材料）
/design-audit + /design-polish → 精修

.design-context.md 与 DESIGN.md 互补：

  • .design-context.md 捕捉“谁”和“为什么”——受众、美学方向、设计旋钮（DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY）、反目标
  • DESIGN.md 捕捉“具体是什么”——十六进制颜色、字号/字重/字距表、内边距值、阴影栈、断点

两者都位于项目根目录。/minoan-frontend-design 同时消费两者——创意方向来自设计上下文，材料来自设计令牌。令牌是材料，不是配方：创意方向仍然主导。

图表

组件层级和令牌关系可使用 beautiful-mermaid ASCII 模式可视化为 Mermaid 图表，然后直接包含在 DESIGN.md 文件中：

printf 'graph TD\n  Tokens --> Components --> Patterns' | \
  node ~/.claude/skills/beautiful-mermaid/scripts/mermaid.mjs -

如需 SVG 导出（例如在配套 HTML 文档中），使用 -f svg -t github-light。

何时不使用此技能

  • 模式研究（其他设计系统如何实现标签页？）请使用 /component-gallery
  • 创意方向和 UI 实现请使用 /minoan-frontend-design
  • 编码前设计简报请使用 /shape
  • 视觉效果（着色器、WebGL）请使用 /grainient 或 /rocaille-shader