前言¶
在如翼、人群资产、数据看板一类 B 端场景里，页面往往要绑在 one-design-next（ODN）组件和既有区块上实现，而不是随手用通用 UI 库或纯 HTML 拼界面。人工对照设计规范、区块清单和业务知识，再决定走需求分析、出码还是审查，成本高且容易偏离 ODN 约束。
下面介绍社区 Skill wxad-design-ruyi（坐标 @user_9209a79b/wxad-design-ruyi，当前版本 1.0.5）。它把「意图识别 → 子流程路由 → 流水线接力」写进 SKILL.md，让 Agent 在用户提到搭建页面、审查代码、查组件用法等场景时，加载对应 GUIDE 并按结构化工作流执行，而不是即兴回答。
这是什么¶
wxad-design-ruyi 是 SkillHub 上分类为 dev-programming 的社区 Skill（requires_api_key=false）。SkillHub 页面标注作者为 Aragakey@WxadDesign，发布者为 user_9209a79b。截至页面与索引信息，评分为 100000，下载 766 次，安装 12 次。
一句话定位：用 one-design-next 组件库做如翼平台相关页面；当用户描述里出现「做一个页面」「审查代码」「如翼」「one-design」「GenUI」等关键词时，Skill 要求 Agent 使用本 Skill，并禁止用纯 HTML/CSS 或其他 UI 库替代 ODN。
核心功能¶
以下能力均来自 Skill 包内 SKILL.md 与 SkillHub CLI 检索结果，可按安装后的同路径文件自行核对。
意图路由与子 Skill¶
总入口负责解析用户意图，匹配到子 Skill 时必须加载对应 GUIDE.md 并执行流程，而不是直接答疑。常见路由包括：
| 用户意图（节选） | 加载路径 |
|---|---|
| 贴截图/线框、「做一个页面」「搭建 XX」 | p1-design-analyst/GUIDE.md |
| 结构化需求、设计 Prompt | p1-design-spec/GUIDE.md |
| 「实现页面」「把设计稿转成代码」 | p3-page-implement/GUIDE.md |
| 「审查」「review」「合规检查」 | p4-audit/GUIDE.md |
| 「精修」「polish」「发布前」 | p4-polish/GUIDE.md |
| 「创建项目」「scaffold」「template」 | 总入口内「创建项目」流程 |
| 查组件、设计规范、GenUI | 总入口「知识查询」 |
主流水线为：design-analyst → design-spec → page-implement → audit → polish，各子 Skill 通过 frontmatter 中的 next_skill 接力。并列的 p2 知识层（p2-business-knowledge、p2-block-catalog、p2-one-design）在分析、出码、审查阶段按需加载。
full 与 readonly 模式¶
Skill 支持可选参数 mode（SkillHub 简介与 SKILL.md frontmatter 一致）：
- full（完整模式）：可修改知识库；Skill 内说明为「本项目内部默认」，各写操作按完整流程执行。
- readonly（只读模式）：仅输出代码和建议；不写入
docs-pages/、不更新区块/业务知识文件，不修改components/下组件源码；page-implement将代码输出到用户工作目录，polish只给修复建议；audit与知识查询仍可用。Skill 注明外部平台场景下 readonly 为默认取向。
工程约束（节选）¶
写代码前 Skill 强制若干硬约束，例如：单次 Write 估算超过约 800 行须先拆文件；修 TS 报错须先跑 tsc 再对症修改；页面实现前须检查是否在含 one-design-next 依赖的 ODN 项目中，否则先走「创建项目」组装；命中区块关键词须查 p2-block-catalog 并优先复用 references/blocks/ 下区块，而非重写表格或图表。全流水线还有 ODN 视觉与组件选用铁律（禁止渐变、外部图标库、用原生标签拼完整控件等），audit 阶段按规则判定。
安装与启用¶
1、安装 SkillHub CLI（若尚未安装）¶
command -v skillhub && skillhub --version
未安装时可按 SkillHub 官方安装文档执行完整安装（CLI + 默认 Skill）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
2、安装 wxad-design-ruyi¶
安装时必须用 --dir 指向当前 Agent 的 skills 目录，否则默认装到 ./skills/ 可能不会被识别。官方检索给出的安装命令为：
skillhub install wxad-design-ruyi --namespace user_9209a79b --dir <你的 Agent skills 目录>
常用路径（来自 SkillHub 安装文档）：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
安装完成后按所用客户端要求重启或刷新 Skill 列表。SkillHub 页面亦提示可让 AI 参照 https://skillhub.cn/install/skillhub.md 安装 @user_9209a79b/wxad-design-ruyi。
典型用法¶
触发方式¶
Skill 的 description 声明：当用户说「做一个页面」「还原设计稿」「审查代码」「查组件怎么用」「创建项目」，或提到「如翼」「人群资产」「数据看板」「one-design」「GenUI」「StreamText」「Composer」等时，必须使用本 Skill。Agent 应自动判断意图并路由，而不是用其他 UI 栈替代 ODN。
带 mode 的调用¶
在支持 Skill 参数的环境里，可为 input 传入需求描述（截图、Figma 链接或代码片段），可选 mode：
- 需要 Agent 更新 Skill 包内知识库与区块目录时，使用
full。 - 在外部平台或只想在工作区落代码、不改 Skill 内置组件与知识文件时，使用
readonly（Skill 内说明该模式下禁止写知识库与components/）。
可复现的对话示例（语义）¶
下列表述会进入不同子流程，便于自测路由是否生效：
- 「在当前 ODN 项目里做一个数据看板页面」→ 先项目环境检查，再进入
design-analyst流水线。 - 「审查这段页面代码是否符合 ODN」→ 加载
p4-audit/GUIDE.md。 - 「RyDateRangePicker 区块怎么用」→ 总入口知识查询，读取
p2-one-design或区块相关 rules。 - 空目录且无终端时要求「直接用 workshop 模板」→ 总入口「创建项目」，输出
references/组装步骤。
不确定意图时，Skill 要求 Agent 用固定选项向用户确认（创建项目 / 创建页面 / 审查 / 查用法 / 其他），而不是猜测。
适用场景与注意¶
适合谁：维护或新建基于 one-design-next 的如翼、人群资产、仪表盘、列表页等 B 端界面；需要把设计规范、区块目录和业务知识绑进 Agent 工作流的前端或全栈开发者。
限制与注意：
- Skill 体量较大，内含多份子 Skill、区块参考实现与 workshop 数据；首次安装会下载完整包，磁盘与上下文占用需自行评估。
- readonly 与 full 行为差异集中在是否改写 Skill 内置知识库与组件目录；团队共用 Skill 目录时建议默认 readonly，避免误改共享知识文件。
- 流水线假设能执行 shell（如
tsc、项目 scaffold）；无终端且空目录时，创建项目会退化为输出手动组装步骤。 - 评分、下载量来自 SkillHub 页面快照，会随时间变化；以安装时
skillhub search wxad-design-ruyi或官网为准。
结尾¶
wxad-design-ruyi 把如翼 / ODN 场景下的分析、规格、实现、审查、精修串成可接力流水线，并用 full / readonly 区分是否改动 Skill 内置知识库与组件目录。若你已在 Cursor 等环境使用 SkillHub，可按上文命令装入 skills 目录，用典型话术验证路由是否符合预期。
官方入口：
- SkillHub 页面：https://www.skillhub.cn/skills/user_9209a79b/wxad-design-ruyi
- API 坐标页：https://api.skillhub.cn/user_9209a79b/wxad-design-ruyi
