oh-my-design 设计工作流
为编码代理提供可追溯的设计系统约束,让界面实现遵循项目自己的设计决策。
- Star 数
- ★ 534
- 最近更新
- 11 天前
- License
- MIT
- 主语言
- JavaScript
- FA 评分
- 76/100 · 表现良好
30 秒速览
- 运行形态
- 可在哪里用
- 兼容但需适配Codex · Claude Code
- 费用
- 免费,无需付费服务
- 上手难度
- 低 · 几分钟可跑通
- 开始前需要
- 典型场景
- 使用 Claude Code 的前端开发者,希望先为新产品建立项目自有的 DESIGN.md,再让代理按其决策实现首页。
- 不适合
- 需要不依赖既有编码代理会话来生成设计系统的团队
- 只使用未列出的编码代理工具的团队
- 源码审查
- 76/100 · 表现良好
这个 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 检查、验证和迁移命令。
- 使用 Claude Code 的前端开发者,希望先为新产品建立项目自有的 DESIGN.md,再让代理按其决策实现首页。
- 使用 Codex 的团队,希望将技能、专业角色和参考目录安装到仓库,并在后续会话中复用设计约束。
- 使用 Cursor 的设计系统维护者,希望通过 Agent Skills 和项目规则让代理先读取 DESIGN.md。
- 需要迁移旧版 DESIGN.md 的团队,希望先检查并验证文档,再将迁移候选写入独立目录供审核。
- 希望审阅令牌来源和组件状态理由的设计师,希望用本地
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 ./outCursor 用户可安装该渠道并重启 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?
查看各维度的扣分理由
安装目标分为项目与全局,并说明 OpenCode 全局安装不修改 hooks/settings;升级会保留用户编辑的文件,并建议先用 doctor 检查、谨慎使用 --force。设计系统采用前置审阅和授权检查点,生成者不能批准自己的提案,因此确认机制充分。文档称核心流程不需要额外 API key 或 MCP,但也说明 agent 可直接 fetch 在线参考;没有完整说明所有网络访问和数据处理路径。敏感数据处理细节有限。依赖清单和锁文件流程、CI 检查及 npm provenance 有说明,但未见依赖漏洞处置政策。参考资料标明归属企业并称为重构的教育参考;发布者身份未验证,维护责任也未明确到具体负责人,因此未给满分。
文档、包元数据和工作流共同呈现多渠道安装、doctor、升级和构建流程;但发布工作流注释仍含 v1.7.2 示例,而包版本为 2.0.2,存在轻微陈旧信息。Node 18+ 与 npm/npx 安装路径有说明,CLI 需要安装依赖;在线安装与参考 fetch 依赖外部服务。doctor 和定向修复提供诊断路径,但给出的材料没有具体错误输出样例,故不评为全面。
材料覆盖设计系统创建、现有界面修改、参考导入、审阅和屏幕实现等场景,并明确 Claude Code、Codex、OpenCode、Cursor 的能力差异及 Cursor 的兼容边界。提供多语言提示和多个工作流,但触发规则的完整定义未全部呈现,无法给满分。
README 将产物、推导链、安装、渠道支持、升级和链接分区说明,并链接规范、示例与迁移材料。安装命令、全局/项目选择、重启、doctor、非交互安装和修复提示具体。命名在渠道和技能层面较稳定,但材料没有完整 FAQ,限制说明也未覆盖全部环境或风险。MIT 许可证文件与包元数据一致。版本和变更日志入口明确,但发布说明含过时版本示例;发布者身份未知,且未明确具体维护责任人。
产物包括可移植 DESIGN.md、分层系统契约和本地展示/静态导出;示例展示决策 ID 与 token 之间的追溯关系,支持审阅与复用。500+ 参考、技能和多渠道安装提供明确增量价值。README 声称无需 AI 调用、额外 API key 或 MCP,但安装需 Node/npm,且一些参考可联网获取;成本与网络依赖的完整权衡说明有限。
文档把多项主张链接到规范、推导链、门禁、预设和生成示例;包清单及 CI 工作流也展示了构建、检查和测试命令,形成一定交叉支撑。材料没有提供这些命令在此修订版上的执行结果,本评估不声称已运行或独立验证。部分能力描述仍是项目自身陈述,事实与推断的区分因此并非处处充分。
- 这是低置信度静态审查;没有执行安装、测试或 CI,也没有独立核实项目自述。
- 安装和部分参考获取依赖外部服务;使用前应检查目标渠道、写入路径和网络访问范围。
- 发布工作流注释包含旧版本示例,且材料未明确具体维护负责人。
常见问题
核心工作流需要付费 API 密钥或 MCP 服务器吗?
安装后会自动覆盖并采用新的设计系统吗?
哪些编码代理有安装支持?
可以先迁移旧 DESIGN.md 而不覆盖源文件吗?
design-md migrate 将候选迁移输出到指定目录;文档说明旧格式保持可读,迁移要求保留来源内容并报告 dropped=0。