[开源挖掘 #2] oh-my-design，为代码代理赋予品牌风格

oh-my-design 是一个为 Claude Code、Codex 和 Cursor 安装 DESIGN.md 设计工作流的开源 CLI。本文拆解 440 个企业参考的证据标注方式、技能结构，以及使用前的注意事项。

SeokWoo Lee资深 iOS 软件工程师发布 2026年8月9日更新 2026年8月27日9 分钟阅读

这是挑选并打开研究隐藏仓库系列的第二篇。开源挖掘第 1 篇我们拆解了把 Threads 账号运营交给 AI 的桌面应用；这次则是韩国开发者的项目。oh-my-design 是为代码代理安装设计系统的工具。

问题很明确：让 AI 代理制作 UI 后，每个页面都会呈现不同的品牌风格。昨天是蓝色按钮，今天是紫色渐变。用文件约定解决这个问题的 DESIGN.md，已在另一篇文章介绍。它采用 Google Stitch 发布的规范，把设计 token 和品牌规则放进仓库中的 Markdown 文件，让代理每次都读取。oh-my-design 则把这套约定带到了“所以周一早上到底该输入什么？”的实际层面。

仓库于 2026 年 4 月公开，目前已超过 400 个 star，采用 MIT 许可证。作者是韩国开发者，因此目录里似乎特别多 Toss、Baemin、Danggeun、Bunjang 等韩国服务。这是该项目的实际差异之一，后文会再谈。

一行安装，四种代理

安装就这么多。

npx oh-my-design-cli@latest

交互式安装器会检测项目中有哪些代理，并按渠道安装对应套件。README整理的支持范围如下。

代理	安装内容
Claude Code	完整套件——`.claude/`下的 20 个技能、18 个子代理、hooks 和目录数据
Codex	`.agents/skills/`技能、`.codex/agents/`子代理角色、本地目录
OpenCode	`.opencode/`下的相同套件
Cursor	一个项目规则文件和共享目录。不安装技能、子代理或 hook

Cursor 的待遇明显不同。Cursor 没有执行技能和子代理的渠道，因此只通过规则文件植入“优先遵循 DESIGN.md”的契约，是有意设计的 rules-only 渠道。文档没有掩盖这一差异，还单独设置“Cursor 的准确使用路径”一节，这一点很诚实。

安装后重启代理，并使用npx oh-my-design-cli@latest doctor进行诊断。CLI 的职责到此为止：只负责安装和诊断，之后的设计工作全部在代理会话中通过自然语言完成。不需要 API 密钥、常驻守护进程或 MCP（Model Context Protocol，将外部工具连接到代理的标准）服务器。早期目录曾通过 MCP 提供，如今已撤下。技能直接读取本地文件更简单；过去的实现只归档在packages/mcp/。

oh-my-design 官方主页，介绍 440 个质量分级参考和 npx 安装命令 — 首页第一句话就是项目摘要：从 440 个参考中提取 DESIGN.md

440 个企业参考，关键不在数量而在依据

软件包包含 440 个以 DESIGN.md 格式重构的企业设计系统参考，从 Toss、Stripe、Linear、Apple 到 Airbnb。目录网站可以逐一查看，每个参考还在oh-my-design.kr/<id>/design.md提供 raw Markdown 副本，代理也可以直接通过 URL 获取。网站还有 Builder 页面，可以选择参考并下载 DESIGN.md；无法安装技能的 Cursor 应使用这条路径。

oh-my-design Builder 页面，展示 Toss、Danggeun、Baemin、Kakao 等企业参考卡片和分类筛选器 — 在 Builder 中选择参考即可直接下载 DESIGN.md。韩国服务卡片格外多

只看数字，可能会觉得“就是爬了网页做出 440 个吧”，但打开文件后观感会改变。Toss 参考的 front matter 为每个 claim 提供依据：在tokens.colors.primary: #3182f6旁注明来自哪个页面（TDS 移动端按钮文档）、通过什么方法（抓取 computed style 并与官方文档对照）、何时（2026-07-11）确认。正文也一样，会记录“在 810 个可见元素中观察到 Toss Product Sans 是第一字体”等观察次数，并提醒品牌标志的蓝色与实际 UI 的蓝色（#3182f6）不同，不要混用。至于字体再分发权利，官方来源没有明确说明，就把“不知道”保留为未知。

但 440 个参考并非都达到这种密度。目录公开了自己的等级：截至本文撰写时，Verified v2 有 141 个、Partial 有 159 个、Legacy 快照有 140 个。也就是说，新验证流程目前只覆盖三分之一。仓库规范写着“verified日期是时间戳，不是质量等级”，目录页面也明确表示“信任根据依据、新鲜度和冲突计算，而不是从日期印章推断”。用等级展示自身数据的局限，是这类目录项目中少见的优点。

oh-my-design 目录，显示 Verified v2、Partial、Legacy 质量等级分布 — 目录不隐藏等级。Verified v2 目前只有 141 个参考

超越 token：Voice

DESIGN.md 原始规范以颜色、字体和间距等 token 为核心。oh-my-design 以Google Stitch 的规范为基础，加入 Voice、Narrative、Principles、Personas、States、Motion 等章节，用来描述仅靠颜色代码无法捕捉的“这个品牌如何说话”。

官方网站展示差异的方式很有意思：给同一个模型输入同一个提示，只区分是否读取 DESIGN.md，再把结果 UI 并排展示。基础 CTA 按钮的“Get Started”套用 Toss 参考后变成“3 秒开始”，而“Error 500: Internal Server Error”提示在 Linear 参考下变成“Sync paused — we’ll retry in 4 seconds”。就连空页面的“No data available”，经过 Anthropic 参考后也会变成“Nothing here yet — and that’s a good place to begin”。

对比有无 DESIGN.md 时 CTA 按钮、空页面和错误提示文案的演示 — 左边是没有上下文的代理，右边是读取了 DESIGN.md 的代理。差异全在语气

这不是 token 值的差异，而是语气的差异。主页将其概括为“Tokens get you halfway. Voice takes you home.” Token 只能带你走一半，剩下的一半由声音补足。

20 个技能如何运作

套件的核心是技能。主要流程是omd:init。只需说“请为家庭饮食记录应用创建 DESIGN.md，以 Toss 为参考，但只采用已确认的值”，技能就会从目录推荐参考 → 请求用户确认 → 保留所选参考的语气并结合项目上下文，把 DESIGN.md 写入项目根目录。有趣的是，整个过程不会调用任何 CLI 子命令；连推荐分数也由代理读取本地文件，在会话中完成计算。

此外还有检查界面质量的omd:feel、识别 AI 特有平淡 UI 的omd:slop-audit，以及偏好循环（omd:learn / omd:remember / omd:taste）。偏好循环会把工作中的修正（“按钮再方一点”）累积到.omd/preferences.md，并应用到下一次工作；只要说“展示我的偏好”，就会在一个页面中显示已学到的内容和待处理内容。

这些技能无需斜杠命令即可通过自然语言触发，秘诀在 hooks。安装时，会在项目的.claude/settings.json中注册 UserPromptSubmit、SessionStart、PostToolUse hooks，每次收到提示时由 Node 脚本判断是否触发技能。虽然方便，但也会增加一个介入每条提示的层。

子代理由omd-master和 17 名专家组成，涵盖 UX 研究、a11y 审计、角色测试、文案润色等工作。详细列表整理在官方文档。

开始编写前需要知道的事

这次也列出几个容易卡住的地方。

不要误解参考资料的法律地位。 README 的许可证条款明确说明，代码采用 MIT 许可证，但参考资料属于各企业的资产，是为教育性参考而重构的。“Toss 风格”是灵感起点，不是可以原样移植 Toss 的颜色、字体和文案的许可。这也是 Toss 参考本身注明尚未确认 Toss Product Sans 再分发权利的原因。

**值会过时。**参考资料中的颜色和字体是特定日期实测的快照。企业一旦重新品牌化，它们就会开始偏离。需要养成检查 front matterverified日期的习惯；如前所述，v2 验证模式目前也只应用于部分内容。

**项目会安装不少文件。**技能、子代理、hook 和目录会进入仓库中的.claude/（或各渠道路径）。个人仓库无所谓，但团队仓库需要在提交前达成共识。管理方面考虑得很周到：管理文件带有标记和哈希，重新安装时会原地更新；用户修改过的文件不会覆盖，而是跳过（skipped-drift），doctor则提供限定范围的恢复命令。

**发布速度很快。**从以 npm 为准2026 年 4 月底首次发布，到三个月后已达到 1.9.0。期间还发生了移除 MCP 等结构性变化，并且为 0.1.x 用户单独提供了 MIGRATION.md。乐观地看，这是活跃；谨慎地看，无法保证半年后的工作流仍与现在相同。

**推理质量最终取决于代理。**这个工具只能提供良好的上下文，绘制 UI 的仍然是 Claude Code 或 Codex。用过这类文件约定的人都知道，即使有 DESIGN.md，代理也可能忽略它。因此才会配套omd:harness或doctor这样的验证机制。

总结

oh-my-design 是一个为代码代理（Claude Code、Codex、OpenCode、Cursor）安装基于 DESIGN.md 的设计工作流的开源 CLI。采用 MIT 许可证，由韩国开发者创建。
包含 440 个企业参考，并为每个值记录在哪个页面、通过什么方法、何时确认。但新验证模式目前只覆盖部分内容（约 140 个）。
在 Google Stitch 的 DESIGN.md 规范上加入 Voice、Narrative、Personas 等内容，将仅靠 token 无法捕捉的品牌语气也规范化。
基于本地文件。不需要 API 密钥、守护进程或 MCP 服务器即可在现有代理会话中运行，早期的 MCP 方式已被有意移除。
参考资料属于各企业的资产，不能直接照搬；它们是实测快照，也可能过时。团队仓库需要就是否提交安装文件达成共识。

仓库位于https://github.com/kwakseongjae/oh-my-design，目录和文档位于oh-my-design.kr。下一篇我们还会挑选并打开研究一个隐藏仓库。

来源与验证

oh-my-design READMEkwakseongjae · 官方文档 · 核查 2026年8月9日依据: 4 种受支持的代理及各渠道安装内容、20 个技能、18 个子代理、超过 440 个参考、无需 API 密钥、守护进程或 MCP 服务器、MCP 实现归档、MIT 许可证及参考资料的法律地位
Design Systems 카탈로그oh-my-design · 官方数据 · 核查 2026年8月9日依据: 质量等级分布（141 个 Verified v2、159 个 Partial、140 个 Legacy），以及“信任由依据、新鲜度和冲突计算”的原则
oh-my-design 공식 문서oh-my-design · 官方文档 · 核查 2026年8月9日依据: 技能与子代理的详细组成和安装选项
Google Stitch DESIGN.md OverviewGoogle · 官方文档 · 核查 2026年8月9日依据: oh-my-design 所依据的 DESIGN.md 规范来源
oh-my-design-cli — npmnpm registry · 官方数据 · 核查 2026年8月9日依据: 发布历史：2026 年 4 月底首次发布，当前版本为 1.9.0（2026-07-21）