oh-my-design 设计工作流

为编码代理提供可追溯的设计系统约束,让界面实现遵循项目自己的设计决策。

Star 数
★ 534
最近更新
11 天前
License
MIT
主语言
JavaScript

30 秒速览

运行形态
命令行工具Agent 插件 / 技能
可在哪里用
兼容但需适配Codex · Claude Code
费用
免费,无需付费服务
上手难度
低 · 几分钟可跑通
开始前需要
Node.jsClaude CodeCodexCursorOpenCodeShell / 命令行网络访问本地文件系统
典型场景
使用 Claude Code 的前端开发者,希望先为新产品建立项目自有的 DESIGN.md,再让代理按其决策实现首页。
不适合
  • 需要不依赖既有编码代理会话来生成设计系统的团队
  • 只使用未列出的编码代理工具的团队

这个 Agent 能做什么,适合哪些场景?

oh-my-design 是一个 CLI,用于把设计工作流安装到 Claude Code、Codex、OpenCode 和 Cursor。安装包包括 28 个技能、20 个专业角色、93 个预设组件契约,以及 500 多份经过质量分级的公司设计参考。工作流从设计理念和决策表推导令牌、组件契约与布局规则,再让代理据此构建并检查界面。项目输出包括可移植的 DESIGN.md,以及可选的 .omd/system/ 结构化证据;本地 `omd book` 可浏览系统,也可导出单文件 HTML。核心流程在用户现有的编码代理会话中运行,无需单独的 API 密钥、守护进程或 MCP 服务器。

通过 npx oh-my-design-cli@latest 启动安装器,将技能、专业角色和参考目录安装到检测到的代理,或用 install-skills --agent <name> --all 指定渠道。安装后,doctor 检查安装包;自然语言请求由编码代理中的 OmD 技能处理。omd:init 可根据简报推荐参考并准备 DESIGN.md 与图的预览,项目所有者审核批准后,CLI 编译并采用绑定哈希的文件。后续代理读取 DESIGN.md,按记录的决策制作界面;omd book 在本地端口呈现令牌、决策、状态矩阵和预设来源。CLI 还提供 DESIGN.md 检查、验证和迁移命令。

  1. 使用 Claude Code 的前端开发者,希望先为新产品建立项目自有的 DESIGN.md,再让代理按其决策实现首页。
  2. 使用 Codex 的团队,希望将技能、专业角色和参考目录安装到仓库,并在后续会话中复用设计约束。
  3. 使用 Cursor 的设计系统维护者,希望通过 Agent Skills 和项目规则让代理先读取 DESIGN.md。
  4. 需要迁移旧版 DESIGN.md 的团队,希望先检查并验证文档,再将迁移候选写入独立目录供审核。
  5. 希望审阅令牌来源和组件状态理由的设计师,希望用本地 omd book 浏览系统或生成静态 HTML 交接文件。

如何安装或部署这个 Agent?

需要 Node.js/npm 环境以及受支持的编码代理。项目范围安装是默认选项;安装完成后重启代理并运行 doctor 检查。

如何使用这个 Agent?

在项目目录中安装并诊断:

npx oh-my-design-cli@latest
npx oh-my-design-cli@latest doctor

重启代理后,可向 Claude Code、Codex 或 OpenCode 提交 README 示例中的简报:

Create a project-owned DESIGN.md for a family meal-tracking app. Use Toss as a reference, keep only verified reference facts, and ask before deciding product-specific facts.

预览审核和采用由 OmD 工作流按审核门槛处理。之后,可要求代理读取 DESIGN.md 并设计具体页面。查看系统:

npx oh-my-design-cli@latest book
npx oh-my-design-cli@latest book --static ./out

Cursor 用户可安装该渠道并重启 Cursor:

npx oh-my-design-cli@latest install-skills --agent cursor --all

这个 Agent 有哪些优点和局限?

优点
  • 提供从理念、带编号的决策到令牌和组件契约的可追溯链路,并以门槛检查缺少决策引用或忽略匹配预设的情况。
  • 包含 93 个预设契约和 500 多份质量分级参考,可从已有设计材料开始,而非每次从空白起步。
  • 支持四种编码代理渠道,并提供本地 doctor 检查与 omd book 静态 HTML 导出。
局限
  • 工作流依赖 Claude Code、Codex、OpenCode 或 Cursor 等受支持的代理会话;它本身不是独立的设计生成服务。
  • 首次安装后需要重启代理;Codex 还要求信任项目后才加载项目本地角色。
  • DESIGN.md 的采用包含项目所有者或预先登记的外部权限控制者审核;代理不能自行批准。

这个 Agent 与同类方案有什么区别?

README 将设计系统预设与 shadcn/ui 结构联系起来:shadcn/ui 提供结构,OmD 预设要求哪些值来自项目决策表。项目还说明旧版目录 MCP 传输已退役,当前技能和角色读取本地目录或原始 Markdown 路径。

与相关度最高的同类 agent 并排比较关键指标。

Agent 源码审查 形态 / 费用 Star 最近更新 主语言 完整支持的平台
oh-my-design 设计工作流 当前 76 · 表现良好 命令行工具免费 ★ 534 11 天前 JavaScript Codex · Claude Code
UI Craft 77 · 表现良好 命令行工具免费 ★ 381 1 个月前 JavaScript Codex · Claude Code
Superdesign 设计技能 43 · 缺口较多 Agent 插件 / 技能免费版 + 付费版 ★ 652 1 个月前 JavaScript Codex · Claude Code
Taste-Skill:AI 前端审美升级包 31 · 缺口较多 命令行工具免费 + 模型费 ★ 95k 今天 JavaScript ChatGPT · Codex · Claude Code

FollowAgents 如何评估这个 Agent?

FollowAgents 源码审查 · FARS-2.1
表现良好
76/ 100 五分制 3.8 / 5
信任安全 19/29
可靠稳定 9/14
适用触发 16/18
规范维护 14/18
有效结果 12/13
证据核验 6/8
查看各维度的扣分理由
信任安全19 / 29 · 3.3/5

安装目标分为项目与全局,并说明 OpenCode 全局安装不修改 hooks/settings;升级会保留用户编辑的文件,并建议先用 doctor 检查、谨慎使用 --force。设计系统采用前置审阅和授权检查点,生成者不能批准自己的提案,因此确认机制充分。文档称核心流程不需要额外 API key 或 MCP,但也说明 agent 可直接 fetch 在线参考;没有完整说明所有网络访问和数据处理路径。敏感数据处理细节有限。依赖清单和锁文件流程、CI 检查及 npm provenance 有说明,但未见依赖漏洞处置政策。参考资料标明归属企业并称为重构的教育参考;发布者身份未验证,维护责任也未明确到具体负责人,因此未给满分。

可靠稳定9 / 14 · 3.2/5

文档、包元数据和工作流共同呈现多渠道安装、doctor、升级和构建流程;但发布工作流注释仍含 v1.7.2 示例,而包版本为 2.0.2,存在轻微陈旧信息。Node 18+ 与 npm/npx 安装路径有说明,CLI 需要安装依赖;在线安装与参考 fetch 依赖外部服务。doctor 和定向修复提供诊断路径,但给出的材料没有具体错误输出样例,故不评为全面。

适用触发16 / 18 · 4.4/5

材料覆盖设计系统创建、现有界面修改、参考导入、审阅和屏幕实现等场景,并明确 Claude Code、Codex、OpenCode、Cursor 的能力差异及 Cursor 的兼容边界。提供多语言提示和多个工作流,但触发规则的完整定义未全部呈现,无法给满分。

规范维护14 / 18 · 3.9/5

README 将产物、推导链、安装、渠道支持、升级和链接分区说明,并链接规范、示例与迁移材料。安装命令、全局/项目选择、重启、doctor、非交互安装和修复提示具体。命名在渠道和技能层面较稳定,但材料没有完整 FAQ,限制说明也未覆盖全部环境或风险。MIT 许可证文件与包元数据一致。版本和变更日志入口明确,但发布说明含过时版本示例;发布者身份未知,且未明确具体维护责任人。

有效结果12 / 13 · 4.6/5

产物包括可移植 DESIGN.md、分层系统契约和本地展示/静态导出;示例展示决策 ID 与 token 之间的追溯关系,支持审阅与复用。500+ 参考、技能和多渠道安装提供明确增量价值。README 声称无需 AI 调用、额外 API key 或 MCP,但安装需 Node/npm,且一些参考可联网获取;成本与网络依赖的完整权衡说明有限。

证据核验6 / 8 · 3.8/5

文档把多项主张链接到规范、推导链、门禁、预设和生成示例;包清单及 CI 工作流也展示了构建、检查和测试命令,形成一定交叉支撑。材料没有提供这些命令在此修订版上的执行结果,本评估不声称已运行或独立验证。部分能力描述仍是项目自身陈述,事实与推断的区分因此并非处处充分。

风险与缓解建议
  • 这是低置信度静态审查;没有执行安装、测试或 CI,也没有独立核实项目自述。
  • 安装和部分参考获取依赖外部服务;使用前应检查目标渠道、写入路径和网络访问范围。
  • 发布工作流注释包含旧版本示例,且材料未明确具体维护负责人。
证据充分度:低 评估于 2026年10月12日 审查版本 c0ec4385616d
查看完整评分方法 →

常见问题

核心工作流需要付费 API 密钥或 MCP 服务器吗?
不需要。README 表示核心安装和本地工作流无需单独 API 密钥、守护进程或 MCP 服务器;推理留在用户已有的编码代理会话中。
安装后会自动覆盖并采用新的设计系统吗?
不会静默采用。代理准备预览后,需要项目所有者或符合项目政策的外部权限控制者审核批准,CLI 才会编译并采用绑定哈希的包。
哪些编码代理有安装支持?
README 明确列出 Claude Code、Codex、OpenCode 和 Cursor,并说明各渠道安装的技能、角色、钩子和目录有所不同。
可以先迁移旧 DESIGN.md 而不覆盖源文件吗?
可以。design-md migrate 将候选迁移输出到指定目录;文档说明旧格式保持可读,迁移要求保留来源内容并报告 dropped=0。
在 GitHub 查看 ↗ 安装 ↓

对比同类 Agent

用同一套 FARS 评审,横向比较这个 Agent 所属的短名单。

相关 Agents