@hupan56/wlkj 2.7.11 → 3.0.0

package/templates/qoder/skills/prototype-generator/SKILL.md

@@ -1,256 +1,256 @@
----
-name: prototype-generator
-description: "生成匹配项目 UI 风格的交互式 HTML 原型（Web 端 fywl-ui 用 Vben Admin + Ant Design Vue；APP 端 Carmg-H5 用 Vant 3）。Generate interactive HTML prototypes matching project UI style. 用户说'做个原型''画个 mockup''看看效果''出个界面预览'时触发。"
-trigger: "user asks for prototype, mockup, UI preview, or when PRD needs visual illustration"
----
-
-
-## 🔧 仓库根定位（QoderWork 桌面端 vs Qoder IDE/CLI）
-
-**后续脚本里的 `$R` 代表仓库根**，先确定它（QoderWork 桌面端工作目录不是仓库根，相对路径会失效）：
-```bash
-R=$(python ~/.qoderwork/repo_root.py 2>/dev/null) || R=.
-```
-> `repo_root.py` 从 `~/.qoderwork/mcp.json` 反推仓库根；失败回退 `.`（IDE/CLI 工作目录即仓库根）。找不到时先跑 `python .qoder/scripts/install_qoderwork.py`。
-
-# Prototype Generator
-
-Generate production-ready HTML prototypes that match the project's actual UI style.
-
-## ⚙️ 自取上下文（Quest / QoderWork 无 hook 注入，必须自读）
-
-- `.qoder/.developer` — 决定产出存到 `workspace/members/{dev}/drafts/`
-- 若 `.qoder/.current-task` 存在，原型命名带上任务关键词
-- 平台（Web/APP/Both）必须明确；如未指定，先问用户（见 prd-generator Step 0）
-
-## Step 0: Know the Platform
-
-The platform MUST already be decided (asked by /wl-prd-full Step 0).
-If you don't know it, STOP and ask the user (Web 管理端 / APP 移动端 / 两端都要).
-
-| Platform | Project | Template | Design Tokens |
-|----------|---------|----------|---------------|
-| Web | fywl-ui | .qoder/templates/prototype-web.html | data/index/vben-style-reference.json (HSL) |
-| APP | Carmg-H5 | .qoder/templates/prototype-app.html | Vant 3 variables (in template) |
-| Both | both | both templates | generate 2 files: -web.html and -app.html |
-
-## Style Sources (Priority Order)
-
-1. **data/code/** - Existing Vue code from the TARGET project (HIGHEST priority)
-2. **data/index/vben-style-reference.json** - Vben design tokens (Web)
-   / Vant variables baked into prototype-app.html (APP)
-3. **data/index/chart-style-reference.json** - Dashboard/big-screen/chart
-   idioms (REQUIRED for dashboard/看板/大屏/统计类原型)
-4. **data/style/** - PDF design specs (only if a token is missing above)
-
-If code conflicts with PDF, CODE WINS. The templates already contain the
-correct tokens — do NOT invent colors or copy Ant Design defaults
-(#1890ff is NOT this project's primary).
-
-## ⚠️ NEW-FEATURE prototypes MUST also anchor to real pages
-
-For a feature with NO existing page (e.g. brainstorm/new dashboard), the
-style must STILL come from the system, never from generic admin templates:
-
-1. Find the closest in-system page family:
-   `search_index.py --style <type> --platform <p>` + read 1-2 real pages
-2. Dashboard/看板/大屏类: read data/index/chart-style-reference.json and
-   choose the idiom — 大屏深蓝风 (dashboard/monitor 先例: 全国地图/驾驶舱)
-   or 浅色卡片风 (dashboard/workbench 先例: 工作台统计卡)
-3. Use REAL business vocabulary from the index (e.g. 异常三分类
-   人员作业异常/车辆异常/费用异常 comes from workbench/components/abnormal.vue)
-4. In the prototype header comment, cite which real files the style came from
-   — if you cannot name a source file, you have NOT done step 1.
-
-## Step 0.5: Get Design System (MUST DO FIRST)
-
-**PREFERRED: Call MCP tool (faster, auto-generates if missing):**
-```
-mcp__qoder-knowledge-graph__get_design_system(platform='web')
-```
-
-**FALLBACK: Read file directly:**
-Read `data/design/DESIGN.md`. If missing, run `python "$R/.qoder/scripts/gen_design_doc.py"`.
-
-Returns: layout fingerprint (sidebar 160px, mixed-nav), token set (primary HSL),
-page type patterns, form behavior modes, icon rules, component stats.
-
-> This is the v0.dev Registry equivalent — one call teaches AI the entire design system.
-
-## Step 1: Determine Prototype Type
-
-Read the requirement to decide:
-- **Table page**: List with search form + data grid + actions
-- **Form page**: Create/edit form with validation
-- **Detail page**: Read-only data display
-- **Modal/Drawer**: Popup form
-- **Dashboard**: Charts + summary cards
-
-## Step 1.5: Prefill Draft (MUST DO - 80% auto, 20% you adjust)
-
-**PREFERRED: Call MCP tool:**
-```
-mcp__qoder-knowledge-graph__fill_prototype(keyword='营业外合同', platform='web')
-```
-
-**FALLBACK: Run script:**
-```bash
-python "$R/.qoder/scripts/fill_prototype.py" <关键词> --platform <web|app>
-```
-
-Returns: 80% complete HTML draft (real columns/fields/layout injected) + data manifest.
-Your job: 20% adjustment only (interaction details, layout tweaks).
-**DO NOT change tokens/colors/layout params — they come from real code.**
-   需要用户提供参考页/设计稿，而不是默默画个默认骨架
-
-脚本/MCP 输出的数据清单包含：
-1. **真实表格列/表单字段**（来自 page_examples，非编造）
-2. **layout_fingerprint**（侧边栏宽度 160px、布局模式 mixed-nav，已注入 CSS）
-3. **behaviors**（表单模式 single/wizard/tabs、表格分页方式、弹窗类型）
-4. **🆕 真实按钮文案**（来自 entity-registry，如"添加反馈资产""导出 Excel"——别编"新增/编辑"）
-5. **🆕 功能模块**（需求属于哪个模块、该模块有多少现有页面、标杆页面路径）
-6. **预填 HTML 草稿**（80% 完成）
-
-你的工作只剩 **20% 微调**：
-- 用数据清单里的**真实按钮文案**替换通用文案（详情/编辑 → 系统真实按钮名）
-- 补充交互细节（侧边栏折叠、弹窗、Tab 切换）
-- 参考功能模块的标杆页面，确保布局跟同模块页面一致
-
-**⚠️ 铁律**：
-- 草稿里的 token（颜色/间距/侧边栏宽度）是**正确的**，**不要改成 #1890ff 或你编的值**
-- 数据清单里的字段/按钮来自真实代码，**不要替换成你编的**
-- 按钮文案优先用 entity-registry 里的真实文案，没有才用通用文案
-- 你只做"调整"，不做"重写"——如果草稿已满足需求，甚至可以零修改直接用
-
-> **为什么这一步必要**：旧流程 AI 从零手写 HTML+CSS，12 个原型里 2 个硬编码了
-> 禁止的 #1890ff（Ant Design 默认色，非 Vben），模板形同虚设。
-> fill_prototype 从源头消灭这个问题——token 继承模板，字段来自索引。
-
-## Step 2: Load Style Context（仅当 Step 1.5 草稿不够时补充）
-
-**PREFERRED: MCP tools (designer-focused, no code noise):**
-```
-mcp__qoder-knowledge-graph__context_pack(keyword='异常资产申请', platform='web', role='design')
-```
-`role='design'` 只返回页面示例+布局指纹+风格速查+字段，过滤掉代码/API噪音。
-比无 role 更干净，原型生成专用。
-
-**理解业务交互流程（原型要有状态，不只是静态截图）：**
-```
-mcp__qoder-knowledge-graph__get_workflow(module='资产')
-```
-返回操作链（如：查询→新增→提交→审批→归档→导出）。
-AI 据此设计原型的交互状态和页面跳转。
-
-**查语义级模块文档（比读代码更省 token）：**
-```
-mcp__search_wiki(keyword='资产')
-```
-
-**FALLBACK: Python scripts:**
-```bash
-python "$R/.qoder/scripts/search_index.py" --style <table|form|detail|modal|dashboard> --platform <web|app>
-python "$R/.qoder/scripts/search_index.py" <keyword> --platform <web|app>
-python "$R/.qoder/scripts/search_index.py" --field <field_name>
-```
-
-Then read the TOP 2-3 most similar existing Vue files to extract:
-- Table column titles/fields and widths
-- Form field layouts and component types
-- Button styles and positions
-
-## Step 3: Fill the Template
-
-Read the platform template and replace its placeholders.
-
-**prototype-web.html** (Web, Vben Admin mixed-nav shell, VxeGrid table):
-
-布局外壳 = mixed-nav 三段式(顶部一级菜单 + 左侧二级菜单[可折叠三级] + 主区标签页)。
-fill_prototype 会按目标项目的 `layout_fingerprint` 自动填示例菜单骨架,
-你只需按 PRD/需求替换成真实菜单层级。
-
-占位符:
-- `{{TITLE}}` - browser tab title
-- `{{LOGO_TEXT}}` - 顶部 logo 文字(如 "ICS智云")
-- `{{MODULE_NAME}}` - 当前模块名(breadcrumb/菜单高亮用)
-- `{{TOP_MENU}}` - 顶部一级菜单项(`<div class="top-menu-item">`),当前模块加 `active`
-- `{{SIDEBAR_MENU}}` - 左侧二级菜单;三级用 `<details class="sidebar-group">` 折叠(见下),当前页加 `sidebar-item active`
-- `{{TABS}}` - 主区标签页(承载三四级页面),当前页加 `tab-item active`
-- `{{PAGE_NAME}}` - page name in breadcrumb
-- `{{SEARCH_FORM_FIELDS}}` - search form items (label + input/select)
-- `{{TABLE_HEADERS}}` - `<th>` cells using REAL column titles from code
-- `{{TABLE_ROWS}}` - `<tr>` rows with realistic sample data
-
-三级折叠菜单写法(原生 `<details>`,零 JS):
-```html
-<details class="sidebar-group">
-  <summary>二级菜单A</summary>
-  <div class="sidebar-sub">
-    <div class="sidebar-item">三级菜单A-1</div>
-    <div class="sidebar-item">三级菜单A-2</div>
-  </div>
-</details>
-```
-
-**prototype-app.html** (APP, Vant 3 variables, 375px, NavBar + TabBar):
-- `{{TITLE}}` - browser tab title
-- `{{PAGE_TITLE}}` - NavBar title
-- `{{LIST_ITEMS}}` - list cells (van-cell style)
-- `{{ITEM_TITLE}}` / `{{ITEM_DESC}}` - cell content
-
-Key design tokens already in the templates (do not override):
-- Web primary: 来自 `style-index.json` 的 `layout_fingerprint.color_primary`
-  (ICS = `hsl(214.58, 86.34%, 59.8%)`,已写入模板 `:root --primary`)
-- APP primary: `--van-primary-color: #1989fa`
-
-## ⚠️ Icons: NEVER emoji, ALWAYS the project's real icon system
-
-Source of truth: **data/index/icon-reference.json** (real usage counts +
-ready-to-paste SVGs extracted from the actual projects).
-
-- **Web (fywl-ui)**: Ant Design icons. Inline the SVG from icon-reference.json:
-  ```html
-  <span class="anticon">{svg from icon-reference.json web.svg.outlined[...]}</span>
-  <style>.anticon svg{width:1em;height:1em;fill:currentColor}</style>
-  ```
-  Most-used in the real app: Download(303x), Plus(171x), Delete, Search, Edit...
-- **APP (Carmg-H5)**: Vant font icons:
-  ```html
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@4/lib/index.css">
-  <i class="van-icon van-icon-search"></i>
-  ```
-  Most-used: arrow-down, arrow, plus, cross, search...
-- An emoji (👤🚛💰⚠️...) anywhere in a prototype = automatic style FAIL.
-
-## ⚠️ 菜单/侧边栏层级: 必须按需求填, 不准退化成扁平框
-
-这是最常翻车的点。模板已是 **mixed-nav 多级骨架**(一级顶栏 + 二级侧栏 +
-三级折叠 + 标签页),不要退化成旧的"扁平单级 sidebar"。
-
-铁律:
-1. 如果 PRD/需求**描述了侧边栏或菜单结构**(如"左边点一级显示二级,右边显示
-   三四级"),**严格按它填** `{{TOP_MENU}}`/`{{SIDEBAR_MENU}}`/`{{TABS}}`。
-   例如"一级→二级,右侧三四级"翻译成:顶部一级 tab + 左侧二级列表 + 标签页放三四级。
-2. 如果需求没提菜单,保留 fill_prototype 填的**示例多级结构**(不要删成单级)。
-3. 永远不要把 `{{SIDEBAR_MENU}}` 填成只有一个 `sidebar-item` —— 那是 bug。
-4. ICS 的菜单来自后端接口(`access_mode: backend`),静态代码里抓不到完整菜单树,
-   所以菜单层级**必须由需求/PRD 提供**,不要去代码里找。
-
-## Step 4: Highlight Changes + Interactivity
-
-- Mark NEW/CHANGED elements with the template's `highlight-new` class
-  (subtle border + legend), so reviewers see the diff at a glance
-- Minimal JavaScript: row click highlight, form expand/collapse,
-  tab switching, modal open/close, validation hints
-- Single self-contained HTML file, no external dependencies
-
-## Rules
-
-1. **ALWAYS match the TARGET platform style** - colors, spacing, fonts come
-   from the template + real code, never from memory
-2. **NEVER invent new patterns** - if the project uses VxeGrid, mimic VxeGrid
-3. **Use REAL fields** - column titles and field names must come from the
-   actual code found in Step 2, not made up
-4. **Prototype must be interactive** - clickable buttons, fillable forms, hover states
-5. **Save to** `workspace/members/{developer}/drafts/prototype-{feature}.html`
-   (Both platforms -> `prototype-{feature}-web.html` + `prototype-{feature}-app.html`)
+---
+name: prototype-generator
+description: "生成匹配项目 UI 风格的交互式 HTML 原型（Web 端 fywl-ui 用 Vben Admin + Ant Design Vue；APP 端 Carmg-H5 用 Vant 3）。Generate interactive HTML prototypes matching project UI style. "
+trigger: "user invokes /wl-* command explicitly"
+---
+
+
+## 🔧 仓库根定位（QoderWork 桌面端 vs Qoder IDE/CLI）
+
+**后续脚本里的 `$R` 代表仓库根**，先确定它（QoderWork 桌面端工作目录不是仓库根，相对路径会失效）：
+```bash
+R=$(python ~/.qoderwork/repo_root.py 2>/dev/null) || R=.
+```
+> `repo_root.py` 从 `~/.qoderwork/mcp.json` 反推仓库根；失败回退 `.`（IDE/CLI 工作目录即仓库根）。找不到时先跑 `python .qoder/scripts/setup/install_qoderwork.py`。
+
+# Prototype Generator
+
+Generate production-ready HTML prototypes that match the project's actual UI style.
+
+## ⚙️ 自取上下文（Quest / QoderWork 无 hook 注入，必须自读）
+
+- `.qoder/.developer` — 决定产出存到 `workspace/members/{dev}/drafts/`
+- 若 `.qoder/.current-task` 存在，原型命名带上任务关键词
+- 平台（Web/APP/Both）必须明确；如未指定，先问用户（见 prd-generator Step 0）
+
+## Step 0: Know the Platform
+
+The platform MUST already be decided (asked by /wl-prd-full Step 0).
+If you don't know it, STOP and ask the user (Web 管理端 / APP 移动端 / 两端都要).
+
+| Platform | Project | Template | Design Tokens |
+|----------|---------|----------|---------------|
+| Web | fywl-ui | .qoder/templates/prototype-web.html | data/index/vben-style-reference.json (HSL) |
+| APP | Carmg-H5 | .qoder/templates/prototype-app.html | Vant 3 variables (in template) |
+| Both | both | both templates | generate 2 files: -web.html and -app.html |
+
+## Style Sources (Priority Order)
+
+1. **data/code/** - Existing Vue code from the TARGET project (HIGHEST priority)
+2. **data/index/vben-style-reference.json** - Vben design tokens (Web)
+   / Vant variables baked into prototype-app.html (APP)
+3. **data/index/chart-style-reference.json** - Dashboard/big-screen/chart
+   idioms (REQUIRED for dashboard/看板/大屏/统计类原型)
+4. **data/style/** - PDF design specs (only if a token is missing above)
+
+If code conflicts with PDF, CODE WINS. The templates already contain the
+correct tokens — do NOT invent colors or copy Ant Design defaults
+(#1890ff is NOT this project's primary).
+
+## ⚠️ NEW-FEATURE prototypes MUST also anchor to real pages
+
+For a feature with NO existing page (e.g. brainstorm/new dashboard), the
+style must STILL come from the system, never from generic admin templates:
+
+1. Find the closest in-system page family:
+   `search_index.py --style <type> --platform <p>` + read 1-2 real pages
+2. Dashboard/看板/大屏类: read data/index/chart-style-reference.json and
+   choose the idiom — 大屏深蓝风 (dashboard/monitor 先例: 全国地图/驾驶舱)
+   or 浅色卡片风 (dashboard/workbench 先例: 工作台统计卡)
+3. Use REAL business vocabulary from the index (e.g. 异常三分类
+   人员作业异常/车辆异常/费用异常 comes from workbench/components/abnormal.vue)
+4. In the prototype header comment, cite which real files the style came from
+   — if you cannot name a source file, you have NOT done step 1.
+
+## Step 0.5: Get Design System (MUST DO FIRST)
+
+**PREFERRED: Call MCP tool (faster, auto-generates if missing):**
+```
+mcp__qoder-knowledge-graph__get_design_system(platform='web')
+```
+
+**FALLBACK: Read file directly:**
+Read `data/design/DESIGN.md`. If missing, run `python "$R/.qoder/scripts/report/gen_design_doc.py"`.
+
+Returns: layout fingerprint (sidebar 160px, mixed-nav), token set (primary HSL),
+page type patterns, form behavior modes, icon rules, component stats.
+
+> This is the v0.dev Registry equivalent — one call teaches AI the entire design system.
+
+## Step 1: Determine Prototype Type
+
+Read the requirement to decide:
+- **Table page**: List with search form + data grid + actions
+- **Form page**: Create/edit form with validation
+- **Detail page**: Read-only data display
+- **Modal/Drawer**: Popup form
+- **Dashboard**: Charts + summary cards
+
+## Step 1.5: Prefill Draft (MUST DO - 80% auto, 20% you adjust)
+
+**PREFERRED: Call MCP tool:**
+```
+mcp__qoder-knowledge-graph__fill_prototype(keyword='营业外合同', platform='web')
+```
+
+**FALLBACK: Run script:**
+```bash
+python "$R/.qoder/scripts/report/fill_prototype.py" <关键词> --platform <web|app>
+```
+
+Returns: 80% complete HTML draft (real columns/fields/layout injected) + data manifest.
+Your job: 20% adjustment only (interaction details, layout tweaks).
+**DO NOT change tokens/colors/layout params — they come from real code.**
+   需要用户提供参考页/设计稿，而不是默默画个默认骨架
+
+脚本/MCP 输出的数据清单包含：
+1. **真实表格列/表单字段**（来自 page_examples，非编造）
+2. **layout_fingerprint**（侧边栏宽度 160px、布局模式 mixed-nav，已注入 CSS）
+3. **behaviors**（表单模式 single/wizard/tabs、表格分页方式、弹窗类型）
+4. **🆕 真实按钮文案**（来自 entity-registry，如"添加反馈资产""导出 Excel"——别编"新增/编辑"）
+5. **🆕 功能模块**（需求属于哪个模块、该模块有多少现有页面、标杆页面路径）
+6. **预填 HTML 草稿**（80% 完成）
+
+你的工作只剩 **20% 微调**：
+- 用数据清单里的**真实按钮文案**替换通用文案（详情/编辑 → 系统真实按钮名）
+- 补充交互细节（侧边栏折叠、弹窗、Tab 切换）
+- 参考功能模块的标杆页面，确保布局跟同模块页面一致
+
+**⚠️ 铁律**：
+- 草稿里的 token（颜色/间距/侧边栏宽度）是**正确的**，**不要改成 #1890ff 或你编的值**
+- 数据清单里的字段/按钮来自真实代码，**不要替换成你编的**
+- 按钮文案优先用 entity-registry 里的真实文案，没有才用通用文案
+- 你只做"调整"，不做"重写"——如果草稿已满足需求，甚至可以零修改直接用
+
+> **为什么这一步必要**：旧流程 AI 从零手写 HTML+CSS，12 个原型里 2 个硬编码了
+> 禁止的 #1890ff（Ant Design 默认色，非 Vben），模板形同虚设。
+> fill_prototype 从源头消灭这个问题——token 继承模板，字段来自索引。
+
+## Step 2: Load Style Context（仅当 Step 1.5 草稿不够时补充）
+
+**PREFERRED: MCP tools (designer-focused, no code noise):**
+```
+mcp__qoder-knowledge-graph__context_pack(keyword='异常资产申请', platform='web', role='design')
+```
+`role='design'` 只返回页面示例+布局指纹+风格速查+字段，过滤掉代码/API噪音。
+比无 role 更干净，原型生成专用。
+
+**理解业务交互流程（原型要有状态，不只是静态截图）：**
+```
+mcp__qoder-knowledge-graph__get_workflow(module='资产')
+```
+返回操作链（如：查询→新增→提交→审批→归档→导出）。
+AI 据此设计原型的交互状态和页面跳转。
+
+**查语义级模块文档（比读代码更省 token）：**
+```
+mcp__search_wiki(keyword='资产')
+```
+
+**FALLBACK: Python scripts:**
+```bash
+python "$R/.qoder/scripts/kg/search_index.py" --style <table|form|detail|modal|dashboard> --platform <web|app>
+python "$R/.qoder/scripts/kg/search_index.py" <keyword> --platform <web|app>
+python "$R/.qoder/scripts/kg/search_index.py" --field <field_name>
+```
+
+Then read the TOP 2-3 most similar existing Vue files to extract:
+- Table column titles/fields and widths
+- Form field layouts and component types
+- Button styles and positions
+
+## Step 3: Fill the Template
+
+Read the platform template and replace its placeholders.
+
+**prototype-web.html** (Web, Vben Admin mixed-nav shell, VxeGrid table):
+
+布局外壳 = mixed-nav 三段式(顶部一级菜单 + 左侧二级菜单[可折叠三级] + 主区标签页)。
+fill_prototype 会按目标项目的 `layout_fingerprint` 自动填示例菜单骨架,
+你只需按 PRD/需求替换成真实菜单层级。
+
+占位符:
+- `{{TITLE}}` - browser tab title
+- `{{LOGO_TEXT}}` - 顶部 logo 文字(如 "ICS智云")
+- `{{MODULE_NAME}}` - 当前模块名(breadcrumb/菜单高亮用)
+- `{{TOP_MENU}}` - 顶部一级菜单项(`<div class="top-menu-item">`),当前模块加 `active`
+- `{{SIDEBAR_MENU}}` - 左侧二级菜单;三级用 `<details class="sidebar-group">` 折叠(见下),当前页加 `sidebar-item active`
+- `{{TABS}}` - 主区标签页(承载三四级页面),当前页加 `tab-item active`
+- `{{PAGE_NAME}}` - page name in breadcrumb
+- `{{SEARCH_FORM_FIELDS}}` - search form items (label + input/select)
+- `{{TABLE_HEADERS}}` - `<th>` cells using REAL column titles from code
+- `{{TABLE_ROWS}}` - `<tr>` rows with realistic sample data
+
+三级折叠菜单写法(原生 `<details>`,零 JS):
+```html
+<details class="sidebar-group">
+  <summary>二级菜单A</summary>
+  <div class="sidebar-sub">
+    <div class="sidebar-item">三级菜单A-1</div>
+    <div class="sidebar-item">三级菜单A-2</div>
+  </div>
+</details>
+```
+
+**prototype-app.html** (APP, Vant 3 variables, 375px, NavBar + TabBar):
+- `{{TITLE}}` - browser tab title
+- `{{PAGE_TITLE}}` - NavBar title
+- `{{LIST_ITEMS}}` - list cells (van-cell style)
+- `{{ITEM_TITLE}}` / `{{ITEM_DESC}}` - cell content
+
+Key design tokens already in the templates (do not override):
+- Web primary: 来自 `style-index.json` 的 `layout_fingerprint.color_primary`
+  (ICS = `hsl(214.58, 86.34%, 59.8%)`,已写入模板 `:root --primary`)
+- APP primary: `--van-primary-color: #1989fa`
+
+## ⚠️ Icons: NEVER emoji, ALWAYS the project's real icon system
+
+Source of truth: **data/index/icon-reference.json** (real usage counts +
+ready-to-paste SVGs extracted from the actual projects).
+
+- **Web (fywl-ui)**: Ant Design icons. Inline the SVG from icon-reference.json:
+  ```html
+  <span class="anticon">{svg from icon-reference.json web.svg.outlined[...]}</span>
+  <style>.anticon svg{width:1em;height:1em;fill:currentColor}</style>
+  ```
+  Most-used in the real app: Download(303x), Plus(171x), Delete, Search, Edit...
+- **APP (Carmg-H5)**: Vant font icons:
+  ```html
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@4/lib/index.css">
+  <i class="van-icon van-icon-search"></i>
+  ```
+  Most-used: arrow-down, arrow, plus, cross, search...
+- An emoji (👤🚛💰⚠️...) anywhere in a prototype = automatic style FAIL.
+
+## ⚠️ 菜单/侧边栏层级: 必须按需求填, 不准退化成扁平框
+
+这是最常翻车的点。模板已是 **mixed-nav 多级骨架**(一级顶栏 + 二级侧栏 +
+三级折叠 + 标签页),不要退化成旧的"扁平单级 sidebar"。
+
+铁律:
+1. 如果 PRD/需求**描述了侧边栏或菜单结构**(如"左边点一级显示二级,右边显示
+   三四级"),**严格按它填** `{{TOP_MENU}}`/`{{SIDEBAR_MENU}}`/`{{TABS}}`。
+   例如"一级→二级,右侧三四级"翻译成:顶部一级 tab + 左侧二级列表 + 标签页放三四级。
+2. 如果需求没提菜单,保留 fill_prototype 填的**示例多级结构**(不要删成单级)。
+3. 永远不要把 `{{SIDEBAR_MENU}}` 填成只有一个 `sidebar-item` —— 那是 bug。
+4. ICS 的菜单来自后端接口(`access_mode: backend`),静态代码里抓不到完整菜单树,
+   所以菜单层级**必须由需求/PRD 提供**,不要去代码里找。
+
+## Step 4: Highlight Changes + Interactivity
+
+- Mark NEW/CHANGED elements with the template's `highlight-new` class
+  (subtle border + legend), so reviewers see the diff at a glance
+- Minimal JavaScript: row click highlight, form expand/collapse,
+  tab switching, modal open/close, validation hints
+- Single self-contained HTML file, no external dependencies
+
+## Rules
+
+1. **ALWAYS match the TARGET platform style** - colors, spacing, fonts come
+   from the template + real code, never from memory
+2. **NEVER invent new patterns** - if the project uses VxeGrid, mimic VxeGrid
+3. **Use REAL fields** - column titles and field names must come from the
+   actual code found in Step 2, not made up
+4. **Prototype must be interactive** - clickable buttons, fillable forms, hover states
+5. **Save to** `workspace/members/{developer}/drafts/prototype-{feature}.html`
+   (Both platforms -> `prototype-{feature}-web.html` + `prototype-{feature}-app.html`)

package/templates/qoder/skills/spec-coder/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: spec-coder
-description: "严格按开发 Spec 实现代码。Implement code strictly following development Spec. 用户说'开始写代码''按规格实现''实现这个接口''把这个需求做出来'时触发。需用户确认（DANGEROUS）。"
-trigger: "Spec 已确认待实现时；用户说'开始写代码''按spec实现''/wl-code'"
+description: "严格按开发 Spec 实现代码。Implement code strictly following development Spec. 需用户确认（DANGEROUS）。"
+trigger: "user invokes /wl-* command explicitly"
 ---
 
 
@@ -11,7 +11,7 @@ trigger: "Spec 已确认待实现时；用户说'开始写代码''按spec实现'
 ```bash
 R=$(python ~/.qoderwork/repo_root.py 2>/dev/null) || R=.
 ```
-> `repo_root.py` 从 `~/.qoderwork/mcp.json` 反推仓库根；失败回退 `.`（IDE/CLI 工作目录即仓库根）。找不到时先跑 `python .qoder/scripts/install_qoderwork.py`。
+> `repo_root.py` 从 `~/.qoderwork/mcp.json` 反推仓库根；失败回退 `.`（IDE/CLI 工作目录即仓库根）。找不到时先跑 `python .qoder/scripts/setup/install_qoderwork.py`。
 
 # Spec Coder
 
@@ -45,7 +45,7 @@ ls workspace/tasks/           # 任务内的 specs
 2. **PRD 文件**（推荐）：原始需求，理解业务背景
 3. **现有代码风格**（必需）：用 search_index.py 找相关模块真实代码作参考
    ```bash
-   python "$R/.qoder/scripts/search_index.py" <模块关键词>
+   python "$R/.qoder/scripts/kg/search_index.py" <模块关键词>
    ```
    读 top 2-3 个相似文件，照着它们的命名/结构/异常处理写
 4. **架构/数据字典**（如存在）：`.qoder/context/architecture.md`、`data-dictionary.md`

package/templates/qoder/skills/spec-generator/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: spec-generator
-description: "从已确认的 PRD 自动生成开发 Spec 文档（技术规格说明）。Auto-generate development Spec documents from confirmed PRDs. 用户说'生成规格''写spec''出技术方案''把PRD转成开发文档'时触发。"
-trigger: "PRD 被确认/发布后自动触发；或用户说'生成Spec''写技术规格''/wl-spec'"
+description: "从已确认的 PRD 自动生成开发 Spec 文档（技术规格说明）。Auto-generate development Spec documents from confirmed PRDs. "
+trigger: "user invokes /wl-* command explicitly"
 ---
 
 
@@ -11,7 +11,7 @@ trigger: "PRD 被确认/发布后自动触发；或用户说'生成Spec''写技
 ```bash
 R=$(python ~/.qoderwork/repo_root.py 2>/dev/null) || R=.
 ```
-> `repo_root.py` 从 `~/.qoderwork/mcp.json` 反推仓库根；失败回退 `.`（IDE/CLI 工作目录即仓库根）。找不到时先跑 `python .qoder/scripts/install_qoderwork.py`。
+> `repo_root.py` 从 `~/.qoderwork/mcp.json` 反推仓库根；失败回退 `.`（IDE/CLI 工作目录即仓库根）。找不到时先跑 `python .qoder/scripts/setup/install_qoderwork.py`。
 
 # Spec Generator
 
@@ -27,7 +27,7 @@ R=$(python ~/.qoderwork/repo_root.py 2>/dev/null) || R=.
 - `.qoder/.current-task` — 当前任务（决定 spec 存到哪个 task 目录）
 - 扫描 PRD 来源目录：`data/docs/prd/`（已发布）+ `workspace/members/{dev}/drafts/REQ-*.md`（草稿）
   找出还没有对应 Spec 的 PRD
-- 风格/字段参考：`python "$R/.qoder/scripts/search_index.py" --field <字段名>` 查现有字段命名约定
+- 风格/字段参考：`python "$R/.qoder/scripts/kg/search_index.py" --field <字段名>` 查现有字段命名约定
 - 团队 Java 约定（MyBatis Plus + RESTful + BigDecimal 金额）写在本 skill 的 Step 3
 
 ## Step 1: 定位 PRD

package/templates/qoder/skills/test-generator/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: test-generator
-description: "从已实现代码和 Spec 自动生成单元测试。Auto-generate unit tests from implemented code and Spec. 用户说'写单元测试''补测试''覆盖一下''写个test'时触发。需用户确认（DANGEROUS）。"
-trigger: "代码实现完成后；用户说'写测试''补单测''生成test''/wl-test'"
+description: "从已实现代码和 Spec 自动生成单元测试。Auto-generate unit tests from implemented code and Spec. 需用户确认（DANGEROUS）。"
+trigger: "user invokes /wl-* command explicitly"
 ---
 
 
@@ -11,7 +11,7 @@ trigger: "代码实现完成后；用户说'写测试''补单测''生成test''/w
 ```bash
 R=$(python ~/.qoderwork/repo_root.py 2>/dev/null) || R=.
 ```
-> `repo_root.py` 从 `~/.qoderwork/mcp.json` 反推仓库根；失败回退 `.`（IDE/CLI 工作目录即仓库根）。找不到时先跑 `python .qoder/scripts/install_qoderwork.py`。
+> `repo_root.py` 从 `~/.qoderwork/mcp.json` 反推仓库根；失败回退 `.`（IDE/CLI 工作目录即仓库根）。找不到时先跑 `python .qoder/scripts/setup/install_qoderwork.py`。
 
 # Test Generator
 
@@ -30,7 +30,7 @@ R=$(python ~/.qoderwork/repo_root.py 2>/dev/null) || R=.
 - Spec 文件：`workspace/specs/REQ-{ID}-*.spec.md` 或 `workspace/tasks/{task-id}/spec.md`
 - 已实现代码：用 search_index.py 定位
   ```bash
-  python "$R/.qoder/scripts/search_index.py" <类名或模块关键词>
+  python "$R/.qoder/scripts/kg/search_index.py" <类名或模块关键词>
   ```
 
 ## Step 1: 定位待测代码
@@ -48,7 +48,7 @@ ls data/code/                     # 已实现代码库
 2. **Spec 文件**（推荐）：测试用例映射来源
 3. **现有测试代码**（推荐）：用 search_index.py 找同类 Test 类，照着写
    ```bash
-   python "$R/.qoder/scripts/search_index.py" Test
+   python "$R/.qoder/scripts/kg/search_index.py" Test
    ```
 
 ## Step 3: 生成测试

package/templates/qoder/skills/wl-code/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: wl-code
-description: "按开发 Spec 严格实现代码（/wl-code 命令入口）。Implement code following a Spec strictly. 用户说'开始写代码''按规格实现''实现这个接口''把这个需求做出来'或输入 /wl-code 时触发。需用户确认（DANGEROUS）。"
-trigger: "Spec 已确认待实现；用户说'开始写代码''按spec实现''/wl-code'"
+description: "按开发 Spec 严格实现代码（/wl-code 命令入口）。Implement code following a Spec strictly. 需用户确认（DANGEROUS）。"
+trigger: "user invokes /wl-* command explicitly"
 ---
 
 
@@ -11,7 +11,7 @@ trigger: "Spec 已确认待实现；用户说'开始写代码''按spec实现''/w
 ```bash
 R=$(python ~/.qoderwork/repo_root.py 2>/dev/null) || R=.
 ```
-> `repo_root.py` 从 `~/.qoderwork/mcp.json` 反推仓库根；失败回退 `.`（IDE/CLI 工作目录即仓库根）。找不到时先跑 `python .qoder/scripts/install_qoderwork.py`。
+> `repo_root.py` 从 `~/.qoderwork/mcp.json` 反推仓库根；失败回退 `.`（IDE/CLI 工作目录即仓库根）。找不到时先跑 `python .qoder/scripts/setup/install_qoderwork.py`。
 
 # wl-code — 按 Spec 实现代码（/wl-code 命令入口）
 
@@ -41,7 +41,7 @@ R=$(python ~/.qoderwork/repo_root.py 2>/dev/null) || R=.
 1. **加载 Spec**：按 REQ-ID 找 spec；没参数就读 `.qoder/.current-task`
 2. **搜相关代码**：
    ```bash
-   python "$R/.qoder/scripts/search_index.py" <关键词>
+   python "$R/.qoder/scripts/kg/search_index.py" <关键词>
    ```
    读相关文件了解现有模式。
 3. **按 spec-coder skill 实现**：严格按 spec，遵循 data/code/ 的团队约定