Agent Skills
返回列表
One Design Next 设计系统总入口

One Design Next 设计系统总入口

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_9209a79b/wxad-design-ruyi。

技能介绍

解决什么问题

  • 在 One Design Next 项目里，模型容易跳过设计系统规则，直接用 div、原生控件、默认 Tailwind 色、渐变和图标库拼出“像 SaaS 官网”的界面。
  • 页面实现、组件审查、设计咨询分散在不同文档中，模型需要反复判断该读哪个 GUIDE.md、是否命中现有区块、是否处于 ODN 项目。

技能如何工作

  • 总入口路由：根据“分析需求”“实现页面”“审查”“polish”“查组件”等意图，加载对应子 skill，而不是即兴回答。
  • 前置检查：进入实现流程前检查 package.json 是否包含 one-design-next；非 ODN 项目先创建 scaffold。
  • 区块优先：写 .tsx 前扫描关键词，如 触点、5R、排名、日期范围，强制查 p2-block-catalog 并复用现有区块。
  • 硬约束执行：禁止渐变、毛玻璃、默认 Tailwind 色、硬编码色值、外部图标库；表格、表单、弹窗、日期选择等必须使用 ODN 组件。
  • 自检闭环：产出代码后检查反模式，例如 gradient、lucide-react、裸 <table>、裸 <form>，并给出行动项。

适用边界

  • 适合基于 one-design-next 的 B 端页面设计、实现、审查和组件查询。
  • 不适合通用 UI 生成；用户要营销落地页、动态粒子、渐变 Hero 时，需要明确改需求。
  • readonly 模式只输出代码和建议，不修改组件库和知识文件。

使用场景

  • 在 ODN 项目中收到页面需求，先创建 Vite + React + TypeScript 脚手架，再进入设计分析流程。
  • 实现数据看板前扫描触点、5R、排名、日期范围等关键词，优先复用 p2-block-catalog 中已有区块。
  • 代码提交前审查渐变、默认 Tailwind 色、lucide 图标、裸 table/form 等 ODN 反模式并给出修改项。
  • 查询 Button、Token、Icon 或 GenUI 组件用法时，读取 p2-one-design 文档并直接回答。

适合人员

  • 维护 One Design Next 前端项目的工程师，需要按 ODN 规范生成页面和组件。
  • 负责 B 端数据看板实现的开发者，需要复用已有区块而不是自行拼装。
  • 做代码审查的前端负责人，需要检查 Tailwind 色、组件选用和视觉反模式。
  • 需要查询组件、Token、Icon 或 GenUI 用法的工程师，希望获得基于文档的直接答案。