日期范围（如翼）	/ / 用两个 Select 拼"年/月" / 自画日历面板	RyDateRangePicker 区块（blocks/ry-date-range-picker.tsx）
单日期	自画日历 / 用 Select 拼日期
下拉选择	/ + 弹层自己写 / 用 Popover + 列表自拼
级联选择	多个 Select 嵌套 / 自写树形面板	（树形场景统一 Cascader，禁止 TreeSelect）
表单布局	裸 + + 手写栅格	+
弹窗	自写遮罩 + 居中容器
抽屉	自写右滑面板
浮层提示	自写 absolute 气泡 / title 属性	/
下拉菜单	自写 Popover + 列表
全局消息	alert() / 自写 toast	Message.info() / Message.success()
警告提示	自写黄/红条
卡片	裸 当主卡片	+
空状态	自写"暂无数据"插图
加载态	自写 spinner SVG
Tab 切换	自写按钮组切换	（按需选 5 种变体）
分页	自写"上一页/下一页"按钮
头像	+ 圆形
折叠面板	/ 自写展开	/
滚动区	裸 overflow-auto 当主滚动壳
虚拟列表	自己截窗渲染
图标	lucide-react / inline SVG（业务图标）

唯一例外（白名单）：

• Popover / Tooltip / Dropdown 的浮层内嵌小表（行数固定、列 ≤ 5、无排序/筛选/分页），可用 直拼，但仍须用 ODN 颜色 token
  与 Select 拼接（-ml-px + 自定义 border-radius）的复合控件场景允许 DateRangePicker，其他场景一律走 RyDateRangePicker
  装饰性 sparkline 段（< 50 px、无交互）允许内联 SVG，无需 ECharts

  > 判断准则：如果你正在用原生标签拼一个完整的交互控件，方向已经走偏了——回头查 p2-one-design/GUIDE.md 的组件速查表。如果速查表里有，必须用速查表里的。

  基调铁律

  > 如果生成的 UI 看起来像 SaaS 官网（渐变 Hero、全屏大图、动态粒子、紫蓝配色），那就偏离了 ODN。

  ODN 是 B 端工具 UI：白底、实色、方正、无装饰。用信息层级传达重要性，不用视觉装饰。

  遇到「上线公告 / Hero / 头图 / 封面 / 落地页」等需求时，尤其要警惕渐变先验。正确做法：白底容器 + 实色标签/徽章 + 字号层级制造视觉冲击。

  生成后自检（所有产出代码的 skill 必须执行）

  视觉自检：

  • [ ] 代码中无 gradient / from- / via- / to-（AP-15）
  • [ ] 代码中无 Tailwind 默认色板（AP-01）
  • [ ] 代码中无硬编码 hex / rgb（AP-02）
  • [ ] 代码中无 lucide-react / react-icons / heroicons（AP-11）
  • [ ] 整体视觉是 B 端工具风，不是营销落地页风

  组件选用自检（与视觉同级 · 缺一项即不准报 DONE）：

  • [ ] 代码中无
  / / （除浮层内嵌小表白名单外，AP-19）
  [ ] 代码中无原生 / / / （AP-19）
  [ ] 日期范围用 RyDateRangePicker，不是 DateRangePicker、不是两个 Select 拼"年/月"（AP-20）
  [ ]
  设了 scroll={{ x: 'max-content' }}（不是固定数字），且每列 width 不小于中文 title 的实际宽度（AP-21）
  [ ] 表单结构是 Form + Form.Item，不是裸 + Input
  [ ] 空状态/加载态/弹窗/抽屉/折叠都走 ODN 组件，不是自写 div

  > 完整反模式清单（AP-01 ~ AP-20）见 p2-one-design/rules/design-paradigm.md。完整组件选用映射见上方「组件选用铁律」表。

  终极检验：把生成的页面截图和如翼现有页面并排放——看得出哪个是新做的吗？如果新页面明显"更好看""更现代""更有设计感"，那就偏了。ODN 追求的是融入，不是突出。

  流水线

  子 skill 之间有固定的接力关系。当一个 skill 执行完毕后，自动加载下一个：

  [项目环境检查] → design-analyst → design-spec → page-implement → audit → polish
  

  每个 skill 的 frontmatter 中声明了 next_skill，按此执行。

  mode 参数沿流水线向下透传。

  mode 参数

  readonly 模式（外部平台默认）

  当 mode=readonly 时：

  • 不写入 docs-pages/、不更新 block-catalog、business-knowledge 等知识文件
  • 不修改 components/ 下的组件源码
  • page-implement 输出代码到用户工作目录
  • polish 输出修复建议但不自动修改
  • audit 和知识查询正常工作

  向下游传递时标注：mode: readonly

  full 模式（本项目内部默认）

  完整功能，所有操作正常执行。

  知识查询

  当用户只是提问（不是要创建/审查/修复），本 skill 直接回答，不转发。

  用户问题类型	读取的文件
  --------------------------------------------	-----------------------------------------------------------------------------------
  组件用法（"Button 怎么用"）	p2-one-design/GUIDE.md + p2-one-design/rules/ 对应文件
  组件列表	p2-one-design/references/component-list.md
  设计规范（"颜色"、"间距"、"Token"）	p2-one-design/rules/design-tokens.md
  图标（"搜索图标叫什么"）	p2-one-design/rules/icons.md
  GenUI 组件（"对话组件怎么用"）	p2-one-design/rules/genui.md + GUIDE.md GenUI 章节
  区块（"有没有筛选区块"）	p2-block-catalog/GUIDE.md
  业务知识（"5R 是什么"）	p2-business-knowledge/GUIDE.md + rules/
  页面类型（"仪表盘长什么样"）	p2-business-knowledge/GUIDE.md 页面类型参考
  已有 workshop 页（slug、改某页、和某页对齐）	p2-page-catalog/GUIDE.md（含 / 路由约定）+ p2-page-catalog/rules.md

  流程：识别问题类型 → 读取对应文件 → 提取信息 → 简洁回答。

  已有 workshop 页面（与 p2-page-catalog 联跑时）

  当用户要改已实现的如翼 workshop 页时：

  1. 路由：浏览器访问 / 直达该页；slug 与 p2-page-catalog/rules.md 中的章节标题一致。文件名与 slug 不一致时查 references/workshop/workshopModules.ts 的 WORKSHOP_SLUG_TO_IMPORT。
  2. 文档站区别：dumi 上为 /workshop/；模板独立跑时为 /。
  3. 源码位置：references/workshop/.tsx（skills 内自包含），详见 p2-page-catalog/GUIDE.md。

  区块查询 · 按"想解决什么产品问题"路由

  区块目录（p2-block-catalog）按 L1/L2/L3/L4 分层。当用户问"要做 XX 该用什么区块"时，按产品问题映射：

  产品问题	优先考虑的区块	层级
  -------------------------------------------------------------	----------------------------------------------	----
  页面壳（复盘主从布局）	review-master-detail-layout	L1
  页面头部/筛选栏/Tab	page-header（14 种模式）	L1
  从候选池挑选人群	crowd-pick-card-grid	L2
  某维度的排位展示	ranking-list（brand/share/hot/surge 4 变体）	L2
  5R 人群资产指标	metric-card-group	L2
  品牌心智量 + 份额 + 趋势	metrics-overview	L2
  渗透率对比 + 榜单联动	penetration-analysis	L2
  多媒体触点对比	touchpoint-analysis	L2
  通用词云段落	wordcloud-section	L2
  本品 vs 参照系雷达对比	radar-with-metrics-panel	L2
  转化复盘的核心指标	conversion-metrics / conversion-trend	L3
  人群相似度涟漪	ripple-chart	L3
  资产流转桑基图	sankey-chart	L3
  心智图谱 TreeMap	treemap-panel	L3
  四象限分布图（资产×R3 或心智双矩阵，同一 quadrant-scatter）	quadrant-scatter	L3
  结构化"热词榜+多层词云"	mindshare-dictionary	L3

  选择准则：

  • 优先 L1（页面壳）和 L2（多页复用）。L3（场景专属）只在业务语境匹配时用，误用会引入不相关的 UI 复杂度
  • L4 层级用于「交互模式」类知识；当前无独立区块 slug，复杂弹窗/表单在对应 workshop 页面内联实现
  • 找不到匹配的区块 → 内联实现；判断是否应该纳入"候选区块"观察（见 p2-block-catalog/GUIDE.md 的候选区块小节）

  创建项目

  当用户意图为创建新项目时，从 references/ 目录组装一个基于 one-design-next 的完整项目。

  **强制规则：必须使用 Vite + React + TypeScript + Tailwind CSS + one-design-next 组件库。

  禁止用纯 HTML/CSS、Material UI、Ant Design 或其他 UI 库替代。

  所有如翼页面必须以 RuyiLayout 组件为页面壳。**

  处理流程

  1. 读取 MANIFEST（强制）：第一步必须 Read references/MANIFEST.json。它预计算了每个页面的文件、区块依赖和数据依赖，不需要自行扫描 import。禁止跳过 MANIFEST 直接靠 Glob/列目录决定要哪些文件——Glob 在某些环境下会失败（已观测到"查找目录失败"复发），此时 MANIFEST 是唯一可靠的清单
  2. 推断项目名称：从用户描述中提取项目名（如"创建一个数据看板"→ data-dashboard），无法推断时用 odn-app
  3. 判断复制范围：
  • 用户要全部页面 → 复制全量 workshop + blocks（见「全量复制」）
  • 用户指定了具体页面（如"首页"）→ 按 MANIFEST 只复制该页面 + 依赖（见「按需复制」）
  4. 创建项目目录，组装 scaffold + 选定的 workshop/blocks
  5. 安装依赖：运行 npm install（pnpm v10+ 必须先确保 .npmrc + package.json 的 pnpm.onlyBuiltDependencies 已就位，见「1. 创建 Vite + React + Tailwind 项目骨架」）
  6. 定制（可跳过）：根据用户需求修改。如果用户明确说"不需要改动"/"直接用"，跳过此步
  7. 告知用户：
  • npm run dev 启动开发服务器
  • 如果用户提到了具体页面（如"首页"对应 slug home）→ 告知 http://localhost:5173/ 直达该页
  • http://localhost:5173/ 是空壳起始页，用于从零搭新页面

  > MANIFEST 兜底原则：当 Glob、列目录或 find 类操作失败时，永远回退到 Read references/MANIFEST.json——它包含完整的 pages / allBlocks / allWorkshop / allData 清单。不准在缺失目录信息时凭空臆想要哪些文件。

  降级策略

  条件	行为
  ------	------------------------------------------------
  有终端	自动执行下方全部步骤
  无终端	输出完整步骤让用户手动执行（包括文件列表和命令）

  不存在"网络不通"的问题——所有文件都在本地 references/ 里，不需要 clone 或 degit。

  组装步骤

  1. 创建 Vite + React + Tailwind 项目骨架

  mkdir <项目名> && cd <项目名>
  npm init -y
  

  设置 package.json（pnpm v10+ 必须包含 pnpm.onlyBuiltDependencies 和 packageManager，否则会卡 ERR_PNPM_IGNORED_BUILDS）：

  {
    "name": "<项目名>",
    "private": true,
    "type": "module",
    "packageManager": "pnpm@9.15.0",
    "scripts": {
      "dev": "vite",
      "build": "tsc && vite build",
      "preview": "vite preview"
    },
    "pnpm": {
      "onlyBuiltDependencies": ["esbuild", "sharp", "@swc/core"]
    }
  }
  

  同时把 references/scaffold/.npmrc 复制到项目根目录，包含 auto-install-peers=true 等 pnpm v10 兼容配置。

  安装依赖：

  npm install one-design-next react react-dom react-router-dom
  npm install -D @tailwindcss/vite tailwindcss @vitejs/plugin-react vite typescript @types/react @types/react-dom
  

  创建 tsconfig.json：

  {
    "compilerOptions": {
      "target": "ES2020",
      "useDefineForClassFields": true,
      "lib": ["ES2020", "DOM", "DOM.Iterable"],
      "module": "ESNext",
      "skipLibCheck": true,
      "moduleResolution": "bundler",
      "allowImportingTsExtensions": true,
      "isolatedModules": true,
      "moduleDetection": "force",
      "noEmit": true,
      "jsx": "react-jsx",
      "strict": true,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "noFallthroughCasesInSwitch": true,
      "resolveJsonModule": true
    },
    "include": ["src"]
  }
  

  创建 index.html：

  <!doctype html>
  <html lang="zh-CN">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title><项目名></title>
    </head>
    <body>
      <div id="root"></div>
      <script type="module" src="/src/main.tsx"></script>
    </body>
  </html>
  

  2. 复制 scaffold 关键文件

  从 references/scaffold/ 复制到项目根目录和 src/：

  来源	目标	说明
  --------------------------------------------------------------------------	-------------------	---------------------------------------
  references/scaffold/vite.config.ts	vite.config.ts	React dedupe，不可删减
  references/scaffold/main.tsx	src/main.tsx	全局 React 兼容，不可删减
  references/scaffold/app.css	src/app.css	ODN token → Tailwind 桥接，不可删减
  references/scaffold/App.tsx	src/App.tsx	路由入口
  references/scaffold/vite-env.d.ts	src/vite-env.d.ts	Vite 类型声明
  references/scaffold/pages/	src/pages/	WorkshopPage
  （内联生成）	.npmrc	pnpm v10 兼容，scaffold 脚本内联生成

  3. 复制 workshop 页面和区块

  来源	目标	说明
  ----------------------------------------	--------------------	-------------------
  references/workshop/*.tsx	src/workshop/	33 个完整页面
  references/workshop/workshopModules.ts	src/workshop/	页面注册表
  references/workshop/data/*.json	src/workshop/data/	mock 数据（精简版）
  references/blocks/	src/blocks/	31 个可复用区块

  全量复制（快捷命令，有终端时一键执行）

  # 假设 SKILLS_DIR 指向 skills/ 目录的绝对路径
  SKILLS_DIR="<skills目录路径>"
  
  cp "$SKILLS_DIR/references/scaffold/vite.config.ts" .
  cat > .npmrc << 'EOF'
  auto-install-peers=true
  strict-peer-dependencies=false
  EOF
  mkdir -p src/pages src/workshop/data src/blocks
  
  cp "$SKILLS_DIR/references/scaffold/main.tsx" src/
  cp "$SKILLS_DIR/references/scaffold/app.css" src/
  cp "$SKILLS_DIR/references/scaffold/App.tsx" src/
  cp "$SKILLS_DIR/references/scaffold/vite-env.d.ts" src/
  cp "$SKILLS_DIR/references/scaffold/pages/"*.tsx src/pages/
  
  cp "$SKILLS_DIR/references/workshop/"*.tsx src/workshop/
  cp "$SKILLS_DIR/references/workshop/"*.ts src/workshop/
  cp "$SKILLS_DIR/references/workshop/data/"*.json src/workshop/data/
  cp -r "$SKILLS_DIR/references/blocks/"* src/blocks/
  

  按需复制（用户只要特定页面时）

  当用户只要一个或几个页面（如"创建如翼首页的模板"）：

  1. 读 MANIFEST：references/MANIFEST.json → 找到 pages.
  2. scaffold 不变：scaffold 全部复制（同上）
  3. 只复制需要的页面 + 依赖：

  以 home 为例，MANIFEST 记录：

  {
    "file": "workshop/home.tsx",
    "blocks": ["blocks/ry-date-range-picker.tsx"],
    "data": [
      "workshop/data/home-trend-data.json",
      "workshop/data/home-view-data.json",
      "workshop/data/market-rank-config.json",
      "workshop/data/market-rank-data.json"
    ]
  }
  

  只需复制：

  • workshop/home.tsx → src/workshop/
  • workshop/workshopModules.ts → src/workshop/（始终需要，但只保留选中页面的注册条目）
  • workshop/data/home-.json + workshop/data/market-rank-.json → src/workshop/data/
  • blocks/ry-date-range-picker.tsx → src/blocks/
  • 如果区块依赖 _internal/*，也一并复制 blocks/_internal/

  不需要逐个读 tsx 文件来分析 import——MANIFEST 已预计算。

  项目架构

  组装后的项目使用 React Router 做 URL 路由：

  路由	组件	用途
  --------	--------------	------------------------------------------------
  /:slug	WorkshopPage	动态路由，从 workshopModules.ts 懒加载指定页面

  每个 workshop 页面（src/workshop/.tsx）是完全自包含的——内置 RuyiLayout + 菜单 + 业务内容 + mock 数据，不依赖外部状态。

  页面注册表 src/workshop/workshopModules.ts 包含：

  • WORKSHOP_SLUG_TO_IMPORT：slug → 懒加载 import 映射（/:slug 路由用）
  • WORKSHOP_INDEX：{ slug, title }[] 数组

  定制要点

  修改项	位置	说明
  ------------	-------------------------	--------------------------
  页面标题	index.html 的