@hupan56/wlkj 2.7.12 → 3.1.2

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

@@ -1,256 +1,305 @@
----
-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
+---
+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 "$R/.qoder/scripts/orchestration/wlkj.py" install-qw`。
+
+# Prototype Generator
+
+Generate production-ready HTML prototypes that match the project's actual UI style.
+
+## 🔌 MCP 工具可用性（双轨）
+
+本 skill 用到的知识图谱 MCP 工具（`MCP 工具 (` / `MCP 工具 (`）**自动路由（有 MCP 走 MCP，无 MCP 走 CLI）**。
+
+- **QoderWork**：直接调 MCP 工具（更快更准）。
+- **Qoder IDE/Quest/CLI（无 MCP）**：用 `python "$R/.qoder/scripts/orchestration/wlkj.py" search` 降级（`--style` / `--field <名>` / `--vben` / `--components`）；仅 MCP 有的能力（如 fill_prototype/context_pack）跳过或人工补。
+
+## ⚙️ 自取上下文（Quest / QoderWork 无 hook 注入，必须自读）
+
+- **当前身份**：决定产出存到 `workspace/members/{dev}/drafts/`。读法：先 `R=$(python ~/.qoderwork/repo_root.py 2>/dev/null) || R=.` 定位仓库根，
+  再 `python "$R/.qoder/scripts/foundation/core/paths.py" whoami`（输出开发者名；空=未初始化）。
+  ⚠️ 勿用裸相对路径 `.qoder/.developer`（QoderWork 桌面端 cwd 不在仓库根，会读不到而误报未初始化）。
+- 若 `.qoder/.current-task` 存在，原型命名带上任务关键词
+- 平台（Web/APP/Both）必须明确；如未指定，先问用户（见 prd-generator Step 0）
+
+## ⚠️ 前置门: 用户是否选了"画原型"？（v3.1 新增）
+
+本 skill **只在用户明确选择"画原型"后才进入**。
+
+- 如果上游 `/wl-prd-full` 或 `/wl-prd` 在「批量确认」环节已决定**不画**（PRD 第 1 行
+  `@contract` 头标记 `prototype: none`），**立即退出本 skill**，不生成任何 HTML。
+- 如果上游没有 contract 头（独立调用本 skill），**先问用户**：
+  `这个需求要画原型吗？(画 / 不画)`
+  用户答"不画"→ 退出；用户答"画"→ 继续。
+- **绝不擅自决定画/不画**。决策权在用户，本 skill 只执行。
+
+> 这条门治"AI 默默画了个塑料骨架"的反模式——比如"出交车点检固定为总部全局规则"
+> 这种纯规则下发型需求，AI 不该自己往里塞一个配置页原型。
 
-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
+---
+## 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（硬门 #1，跳过则 A2 必扣分）
+
+**PREFERRED: Call MCP tool (faster, auto-generates if missing):**
+```
+cap.mcp.call("get_design_system", {"platform": "web"})
+```
+
+**FALLBACK: Read file directly:**
+Read `data/design/DESIGN.md`. If missing, run `python "$R/.qoder/scripts/orchestration/wlkj.py" design-doc`.
+
+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（硬门 #2，跳过等于从零手抄 → 必出模板感）
+
+**PREFERRED: Call MCP tool:**
+```
+cap.mcp.call("fill_prototype", {"keyword": "营业外合同", "platform": "web"})
+```
+
+**FALLBACK: Run script:**
+```bash
+python "$R/.qoder/scripts/orchestration/wlkj.py" fill-prototype <关键词> --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):**
+```
+cap.mcp.call("context_pack", {"keyword": "异常资产申请", "platform": "web", "role": "design"})
+```
+`role='design'` 只返回页面示例+布局指纹+风格速查+字段，过滤掉代码/API噪音。
+比无 role 更干净，原型生成专用。
+
+**理解业务交互流程（原型要有状态，不只是静态截图）：**
+```
+cap.mcp.call("get_workflow", {"module": "资产"})
+```
+返回操作链（如：查询→新增→提交→审批→归档→导出）。
+AI 据此设计原型的交互状态和页面跳转。
+
+**查语义级模块文档（比读代码更省 token）：**
+```
+cap.mcp.call("search_wiki", {"keyword": "资产"})
+```
+
+**FALLBACK: Python scripts:**
+```bash
+python "$R/.qoder/scripts/orchestration/wlkj.py" search --style <table|form|detail|modal|dashboard> --platform <web|app>
+python "$R/.qoder/scripts/orchestration/wlkj.py" search <keyword> --platform <web|app>
+python "$R/.qoder/scripts/orchestration/wlkj.py" search --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 3.5: 来源锚定 + UTF-8（硬门 #3，eval A2 检查）
+
+### 来源锚定（必做）
+
+生成的 HTML 必须在 `<head>` 里写一行注释，标注样式来源的真实文件：
 
-三级折叠菜单写法(原生 `<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-source: fywl-ui/apps/ics/src/views/xxx/index.vue, fywl-ui/apps/ics/src/api/xxx.ts -->
+<meta name="x-source-pages" content="fywl-ui/.../index.vue">
 ```
 
-**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
+- 来源文件**必须来自 Step 2 读过的真实 Vue/TS 文件**（prefetch 返回的 page_examples）
+- 写不出具体文件名 = 你没做 Step 2 = 违规
+- eval A2 会检查：HTML 含 `@prototype-source:` 或 `x-source-pages` → 通过；否则 A2 扣 5 分
 
-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`
+### UTF-8 强制（治编码乱码）
 
-## ⚠️ Icons: NEVER emoji, ALWAYS the project's real icon system
+生成的 HTML **必须用 UTF-8 写入**，否则中文 `<title>`/注释会变成 `鍑轰氦杞?` 乱码。
 
-Source of truth: **data/index/icon-reference.json** (real usage counts +
-ready-to-paste SVGs extracted from the actual projects).
+- Write 工具调用时，内容里的中文必须是原始 UTF-8（不要从 GBK 源复制）
+- 如果用 Python 写文件：`open(path, 'w', encoding='utf-8')`
+- **绝不要从 bash 输出里复制中文再粘贴**（bash 在 Windows 上可能转 GBK）→ 优先让
+  `fill_prototype` 脚本直接出文件，AI 只 Edit 占位符
 
-- **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`)
+---
+## 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 "$R/.qoder/scripts/orchestration/wlkj.py" install-qw`。
 
 # Spec Coder
 
@@ -25,8 +25,10 @@ R=$(python ~/.qoderwork/repo_root.py 2>/dev/null) || R=.
 
 ## ⚙️ 自取上下文（Quest / QoderWork 无 hook 注入，必须自读）
 
-- `.qoder/.developer` — 当前开发者
-- `.qoder/.current-task` — 当前任务（含任务相关的 Spec 路径）
+- **当前身份**：当前开发者。读法：先 `R=$(python ~/.qoderwork/repo_root.py 2>/dev/null) || R=.` 定位仓库根，
+  再 `python "$R/.qoder/scripts/foundation/core/paths.py" whoami`（输出开发者名；空=未初始化）。
+  ⚠️ 勿用裸相对路径 `.qoder/.developer`（QoderWork 桌面端 cwd 不在仓库根，会读不到而误报未初始化）。
+- **活动任务**：当前任务（含任务相关的 Spec 路径）。读法 `python "$R/.qoder/scripts/foundation/core/paths.py" current-task`（输出任务路径；空=无活动任务）。
 - Spec 文件位置：`workspace/specs/REQ-{ID}-*.spec.md` 或 `workspace/tasks/{task-id}/spec.md`
 - 目标代码库：`data/code/`（fywl-ics 后端 / fywl-ui 前端 / Carmg-H5 移动端）
 
@@ -41,19 +43,26 @@ ls workspace/tasks/           # 任务内的 specs
 
 ## Step 2: 读取上下文
 
+### ⚡ 取全一次到位（先跑，省掉后续多次 search/Read）
+
+```bash
+cap.mcp.call("context_pack", {"keyword": "..."}) <spec里的模块关键词> --platform <web|app> --role dev
+```
+
+**一次拿到**：相关代码文件(第1段) + 真实字段名(第3段) + 相关 API(第5段) + Repo Wiki(第7段)。
+拿到后 Read top 2-3 个命中的相似文件，照着它们的命名/结构/异常处理写。**不要再 search_index 单词搜**。
+
+### 同时并发补这两项（与上面 context_pack 无依赖，同回合并发）
+
 1. **Spec 文件**（必需）：开发规格
 2. **PRD 文件**（推荐）：原始需求，理解业务背景
-3. **现有代码风格**（必需）：用 search_index.py 找相关模块真实代码作参考
-   ```bash
-   python "$R/.qoder/scripts/search_index.py" <模块关键词>
-   ```
-   读 top 2-3 个相似文件，照着它们的命名/结构/异常处理写
-4. **架构/数据字典**（如存在）：`.qoder/context/architecture.md`、`data-dictionary.md`
-   不存在就跳过，从现有代码推断
-5. **真实表结构（推荐）**：写 Entity/SQL 前调 MySQL MCP 核对数据库真实列定义。
-   - `mcp__qoder-mysql__query_schema(table='表名', db='库名')`
+3. **真实表结构**（写 Entity/SQL 前必查）：context_pack 不含 DB schema，单独调
+   - `cap.mcp.call("query_schema", {"table": "表名", "db": "库名"})`（先 list_envs 问环境）
    - 拿真实列名/类型/可空/注释（含枚举定义），避免 Entity 字段和数据库对不上
-   - 注意：[QAS 测试环境] 结构与生产一致；数据行仅参考格式
+   - [QAS 测试环境] 结构与生产一致；数据行仅参考格式
+
+> 架构/数据字典 `.qoder/context/architecture.md`、`data-dictionary.md` 如存在顺手读，不存在跳过。
+> 以上 Spec/PRD/query_schema 三项相互独立 → **同一条消息并发发**，不要逐个等。
 
 ## Step 3: 按 Spec 实现