open-design

Open Design — 通用设计任务基础

此技能将 Open Design 目录（保存在 OD 仓库的本地克隆中）转化为可在任何 Agent 会话中遵循的工作流。它复现了 OD 自身守护进程的工作方式——绑定品牌规范和模板，叠加工艺规则，遵循工作流——无需运行 OD 的守护进程。OD 守护进程中的预览、评论和滑块功能不在此范围内；请使用 Agent 常规的开发服务器和浏览器检查工具。

何时调用

遇到以下请求时触发：

• “为我制作一个 <artifact>”，其中 <artifact> 可以是演示文稿 / 原型 / 落地页 / 仪表板 / 海报 / 宣传册 / 视频模板 / 音频作品。
• “应用 <brand> 设计系统”或“让这个看起来像 X”。
• “建立设计系统 / DESIGN.md”。
• “审查 / 评析我的 UI”、“进行 5 维度评审”。
• 任何明确提及 Open Design 的请求。

不要用于非设计任务（后端、基础设施、重构、错误修复）。

跨平台说明

所有辅助脚本均为 Node.js（.mjs），在 macOS、Linux 和 Windows 上的工作方式相同。克隆 git 仓库需要 git 位于 PATH 中。不依赖 bash。

$SKILL_DIR — 定位辅助脚本

四个列表脚本与此 SKILL.md 位于同一目录中。调用时，请将包含此 SKILL.md 的目录的绝对路径用作 $SKILL_DIR。你已经知道此路径——也就是 Agent 读取此文件的位置（例如，Claude Code 中的 ~/.claude/skills/open-design/、Codex 中的 ~/.codex/skills/open-design/ 等）。在 Bash 调用中，将其显式传递给 node。

$OPEN_DESIGN_ROOT — 定位 OD 内容

ROOT = $OPEN_DESIGN_ROOT  (if set and non-empty)
     | ~/.open-design-skill/repo  (default)

OD 仓库（https://github.com/nexu-io/open-design）只需克隆一次，即可在所有项目中重复使用。脚本默认使用 ~/.open-design-skill/repo，但也会识别已有检出目录对应的 OPEN_DESIGN_ROOT。

工作流

分为三个阶段：设置 → 绑定或选择 → 组合并执行。

阶段 1 — 设置（每次调用时）

检查 OD 内容根目录：

ROOT="${OPEN_DESIGN_ROOT:-$HOME/.open-design-skill/repo}"
[ -d "$ROOT" ] && echo "OK: $ROOT" || echo "MISSING: $ROOT"

如果不存在，请使用 AskUserQuestion 确认是否克隆：

将 Open Design 内容克隆到 ~/.open-design-skill/repo？（几百 MB）

选项（单选）：“立即克隆”（推荐）/“取消”。

选择“立即克隆”后，运行：

mkdir -p "$(dirname "$ROOT")"
git clone https://github.com/nexu-io/open-design "$ROOT"

选择“取消”后，告知用户设置 OPEN_DESIGN_ROOT 指向现有检出目录，然后停止。

阶段 2 — 绑定或选择

检查用户项目（Agent 的当前工作目录）中是否存在 .open-design.json：

test -f .open-design.json && cat .open-design.json

**如果存在（已绑定）：**解析该文件，直接进入阶段 3，将 designSystem.path 和 skill.path 作为要加载的内容。不要 提供刷新提示或运行列表脚本。在项目中途迭代时，不应更改用户的模板内容。

如果用户明确要求切换（“将设计系统切换为 X”、 “重新选择模板”、“更改品牌”），先删除 .open-design.json， 然后继续未绑定流程。

如果不存在（未绑定）：

(a) **刷新提示。**AskUserQuestion：

先刷新 Open Design 内容吗？（在本地克隆中运行 git pull）

选项：“拉取最新内容”（推荐）/“跳过”。

如果选择“拉取最新内容”：

git -C "$ROOT" pull --ff-only

(b) **明确意图。**AskUserQuestion（一个问题，四个选项）：

我们要构建什么？

选项：

• 演示文稿 / 幻灯片 / 演讲稿
• 原型 / 落地页 / 仪表板 / 页面
• 图像、视频或音频作品
• 设置或应用设计系统（暂不创建作品）

如果都不合适，用户可以选择“其他”，然后你询问后续问题，将其归入其中一类或某项功能技能。

(c) **扫描相关子集。**使用 node 运行相应的列表脚本，并将 $SKILL_DIR 作为此技能目录的绝对路径传入：

意图	命令	筛选条件
演示文稿	node "$SKILL_DIR/scripts/list-design-templates.mjs"	mode == deck 的行
原型 / 落地页 / 仪表板	node "$SKILL_DIR/scripts/list-design-templates.mjs"	mode == prototype 的行
图像 / 视频 / 音频	node "$SKILL_DIR/scripts/list-design-templates.mjs"	mode in {image, video, audio, template} 的行
功能技能	node "$SKILL_DIR/scripts/list-skills.mjs"	全部；标记 upstream != "-" 的占位行
设计系统	node "$SKILL_DIR/scripts/list-design-systems.mjs"	按用户提供的关键词 / 风格筛选

所有脚本都输出带标题行的 TSV。列数固定；空字段写作 -。

(d) **筛选并展示。**每份列表都太长，不能原样全部输出。

对于设计系统（150+）：先通过 AskUserQuestion 询问风格 / 品牌关键词 （“特定品牌？极简？大胆？编辑风？温暖？技术感？”），然后按关键词在 title、category 和 description 列中用 grep 筛选 TSV，只展示匹配项。

对于模板（110+）和技能（130+）：先筛选出目标子集，再以内联紧凑列表展示排名靠前的约 6 个匹配项（slug + 一行描述），并使用 AskUserQuestion 提供三个可能性较高的默认选项，以及一个用于填写自定义 slug 的“其他”选项。

展示占位技能时（list-skills.mjs 中 upstream != "-" 的行），明确标记为“上游项目指针 — 需要单独安装”，供用户决定安装上游套件还是跳过。

(e) **绑定。**用户选定一个设计系统和一个模板 / 技能后，将 .open-design.json 写入 Agent 的当前工作目录：

{
  "version": 1,
  "designSystem": {
    "slug": "bmw",
    "path": "design-systems/bmw"
  },
  "skill": {
    "slug": "html-ppt-pitch-deck",
    "path": "design-templates/html-ppt-pitch-deck",
    "kind": "design-template",
    "mode": "deck"
  },
  "boundAt": "2026-05-20T13:22:00Z"
}

关于此文件的说明：

• 路径始终相对于 $OPEN_DESIGN_ROOT，并使用正斜杠（跨操作系统可移植）。
• 对于 design-templates/ 下的条目，skill.kind 为 "design-template"；对于 skills/ 下的条目，skill.kind 为 "skill"。
• skill.mode 与所选条目 frontmatter 中的 od.mode 值一致；如果不存在则省略。
• 如果模板的 frontmatter 包含 od.design_system.requires: false（模板自带固定样式），则设置 designSystem: null，并完全跳过设计系统选择。
• boundAt 使用 UTC 时区的 ISO 8601 格式。

第 3 阶段 — 组合并执行

从 $OPEN_DESIGN_ROOT 读取已绑定的正文，而不是从此技能的 目录读取：

1. Read "$OPEN_DESIGN_ROOT/<designSystem.path>/DESIGN.md" — 完整文件 （如果 designSystem 为 null，则跳过此步骤）。
2. Read "$OPEN_DESIGN_ROOT/<skill.path>/SKILL.md" — 完整文件。查看 其 frontmatter 中的：
   • od.craft.requires — 所选条目选择采用的工艺规则 slug 列表 （可能不存在）。
   • od.design_system.sections — 此模板实际需要关注的 DESIGN.md 部分（用它来集中注意力；完整的 DESIGN.md 仍会加载）。
3. 对于 od.craft.requires 中的每个 slug： Read "$OPEN_DESIGN_ROOT/craft/<slug>.md"。
4. 如果模板包含 assets/ 或 references/ 子目录，则在工作流正文引用 其中的文件时，按需读取。不要提前加载。

然后按照以下冲突时的优先级顺序，执行组合后的工作流：

1. DESIGN.md — 品牌令牌优先。
2. craft/*.md — DESIGN.md 未覆盖的内容遵循通用规则。
3. SKILL.md 正文 — 针对产物类型的工作流（澄清需求 → 编写文件 → 自检）。

将产物写入用户的项目（cwd），而不是 OD 克隆仓库或此技能的安装 目录。如果模板指定了输出文件名（通常为 index.html），则将其写入相对于 cwd 的路径。

同一项目中的后续轮次

已绑定的轮次会跳过第 2 阶段：读取 .open-design.json，重新读取相同的 DESIGN.md + SKILL.md + craft 正文，并遵循相同的工作流。已绑定的轮次不会提供刷新提示——这会在项目进行期间更改模板内容。如需在不重新选择的情况下刷新 OD 内容，用户可以在会话之间手动运行 git -C "$OPEN_DESIGN_ROOT" pull。

边缘情况

• skills/ 下的存根技能：约一半条目是指向上游仓库的精选存根（其 od.upstream frontmatter 字段已设置，正文会写明“在 X 安装上游版本”）。提供时展示上游 URL，并询问是单独安装上游版本，还是仅将存根的元数据用作设计上下文。
• od.design_system.requires: false：模板是自包含的，不需要 DESIGN.md（例如 guizang-ppt）。跳过设计系统选择，并将 designSystem: null 绑定。
• 用户 cwd 中没有 DESIGN.md：此技能不会将 DESIGN.md 复制到用户项目中。它会从 $OPEN_DESIGN_ROOT 读取文件，并通过提示词传递其内容。如果用户明确希望在其仓库中拥有一个实际的 DESIGN.md，则在绑定后复制： cp "$OPEN_DESIGN_ROOT/<designSystem.path>/DESIGN.md" .。
• 进程外预览 / 评论模式：这些功能位于 OD 的守护进程中，不属于此技能的范围。预览/调试时，请使用 Agent 的标准工具——启动开发服务器，并使用 chrome-devtools MCP 或 playwright 进行检查。

.open-design.json 的作用（回顾）

按项目记录“我们选择了 X 设计系统和 Y 模板/技能”。 这是纯 JSON，可手动编辑，旨在提交到 git，以便协作者之间保留设计选择。它不会缓存已绑定的正文——每轮都会从 $OPEN_DESIGN_ROOT 重新读取这些正文，因此克隆仓库中的 git pull 会在下一轮立即生效。

---

维护地址：https://github.com/sugarforever/open-design-skill。 Open Design 上游项目：https://github.com/nexu-io/open-design。