npm - @deppon/deppon-skills - Versions diffs - 2.4.18 → 2.4.21 - Mend

@deppon/deppon-skills 2.4.18 → 2.4.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/dist/deppon-prd-generator/examples/user-frontend/prototype.html ADDED Viewed

@@ -0,0 +1,223 @@
+<!--
+  技能示例 examples/user-frontend/ — 对齐 user-frontend-prd-template
+  fetch prd.md；须 HTTP。
+-->
+<!DOCTYPE html>
+<html lang="zh-CN">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>春季拉新活动 — 原型</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+        <style>
+            .anno-trigger {
+                display: inline-flex;
+                border-radius: 0.375rem;
+                border: 1px solid rgba(253, 224, 71, 0.9);
+                background: rgba(254, 249, 195, 0.95);
+                padding: 0.15rem 0.5rem;
+                font-size: 0.65rem;
+                font-weight: 700;
+                color: rgb(66 32 6);
+                cursor: pointer;
+            }
+            #annoDlgBody .prd-md table {
+                width: 100%;
+                border-collapse: collapse;
+                font-size: 0.75rem;
+            }
+            #annoDlgBody .prd-md th,
+            #annoDlgBody .prd-md td {
+                border: 1px solid rgb(226 232 240);
+                padding: 0.35rem;
+            }
+        </style>
+    </head>
+    <body class="min-h-screen bg-gradient-to-b from-rose-50 to-white text-slate-900">
+        <div id="prdLoadBanner" class="hidden border-b border-amber-400 bg-amber-100 px-4 py-2 text-center text-xs text-amber-950"></div>
+        <div id="toast" class="fixed top-4 right-4 z-[60] hidden rounded-lg bg-slate-900 px-4 py-2 text-sm text-white"></div>
+        <button type="button" id="btnAnnoLegend" class="fixed bottom-5 left-5 z-[65] rounded-full border border-amber-500 bg-white/90 px-3 py-2 text-xs shadow">
+            标注说明
+        </button>
+        <header class="border-b border-rose-100/80 bg-white/70 backdrop-blur">
+            <div class="mx-auto flex max-w-3xl items-center justify-between px-4 py-3">
+                <span class="text-sm font-medium text-rose-900">春季拉新</span>
+                <button type="button" class="anno-trigger" data-anno-key="s1">PRD §1</button>
+            </div>
+        </header>
+        <main class="mx-auto max-w-3xl px-4 py-10">
+            <section class="relative rounded-2xl border border-rose-100 bg-white/90 p-8 shadow-lg">
+                <button type="button" class="anno-trigger absolute right-4 top-4" data-anno-key="s21">§2.1</button>
+                <p class="text-xs font-semibold uppercase tracking-widest text-rose-600">限时活动</p>
+                <h1 class="mt-2 text-3xl font-bold text-slate-900">邀请好友 · 双倍权益</h1>
+                <p class="mt-3 text-sm leading-relaxed text-slate-600">
+                    完成注册并实名，即得优惠券包；分享链接再得积分（原型数据为示意）。
+                </p>
+                <button
+                    type="button"
+                    id="btnCta"
+                    class="mt-6 w-full rounded-xl bg-blue-600 py-3 text-center text-sm font-semibold text-white shadow-md hover:bg-blue-700 sm:w-auto sm:px-10"
+                >
+                    立即参与
+                </button>
+            </section>
+            <section class="mt-8 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+                <button type="button" class="anno-trigger float-right ml-2" data-anno-key="s22">§2.2</button>
+                <h2 class="text-base font-semibold text-slate-900">活动规则</h2>
+                <details class="mt-3 text-sm text-slate-600" open>
+                    <summary class="cursor-pointer font-medium text-slate-800">时间与资格</summary>
+                    <ul class="mt-2 list-disc space-y-1 pl-5">
+                        <li>活动时间：以运营后台配置为准。</li>
+                        <li>新用户定义：近 90 天无注册记录的手机号。</li>
+                    </ul>
+                </details>
+            </section>
+            <p class="mt-8 text-center">
+                <button type="button" class="anno-trigger" data-anno-key="s3">PRD §3 交互与反馈</button>
+            </p>
+        </main>
+        <div id="modalAnno" class="fixed inset-0 z-[70] hidden items-center justify-center bg-slate-900/55 p-4" role="dialog">
+            <div class="flex max-h-[88vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl border-2 border-amber-400 bg-white shadow-2xl">
+                <div class="flex shrink-0 justify-between border-b border-amber-200 bg-amber-50 px-4 py-2">
+                    <h3 id="annoDlgTitle" class="truncate text-sm font-semibold"></h3>
+                    <button type="button" id="btnAnnoClose">✕</button>
+                </div>
+                <div id="annoDlgBody" class="min-h-0 flex-1 overflow-auto p-4 text-sm" tabindex="-1"></div>
+            </div>
+        </div>
+        <script src="https://cdn.jsdelivr.net/npm/marked@12.0.2/marked.min.js"></script>
+        <script>
+            function runPrototype(prdMd, prdLoadError) {
+                function $(id) {
+                    return document.getElementById(id);
+                }
+                function escapeHtml(s) {
+                    return String(s)
+                        .replace(/&/g, '&amp;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;')
+                        .replace(/"/g, '&quot;');
+                }
+                if (typeof marked !== 'undefined' && marked.use) marked.use({ gfm: true, breaks: true });
+                var ban = $('prdLoadBanner');
+                if (ban && (!prdMd || prdLoadError)) {
+                    ban.textContent = '未加载 prd.md：请用 HTTP 打开本目录。';
+                    ban.classList.remove('hidden');
+                }
+                function sliceBetween(md, startRe, endRe) {
+                    if (!md) return '';
+                    var m = md.match(startRe);
+                    if (!m || m.index === undefined) return '';
+                    var i0 = m.index;
+                    if (!endRe) return md.slice(i0).trim();
+                    var tail = md.slice(i0 + m[0].length);
+                    var j = tail.search(endRe);
+                    if (j === -1) return md.slice(i0).trim();
+                    return md.slice(i0, i0 + m[0].length + j).trim();
+                }
+                function mdToHtml(src) {
+                    if (!src) return '<p class="text-xs">（无）</p>';
+                    if (typeof marked !== 'undefined' && marked.parse)
+                        return '<div class="prd-md">' + marked.parse(src) + '</div>';
+                    return '<pre class="text-xs">' + escapeHtml(src) + '</pre>';
+                }
+                var LEG = '<p class="text-sm">C 端页标注与 <strong>prd.md</strong> 联动。</p>';
+                var EX = {
+                    s1: { start: /^## 1\./m, end: /^## 2\./m, title: 'prd.md §1' },
+                    s21: { start: /^### 2\.1/m, end: /^### 2\.2/m, title: 'prd.md §2.1' },
+                    s22: { start: /^### 2\.2/m, end: /^## 3\./m, title: 'prd.md §2.2' },
+                    s3: { start: /^## 3\./m, end: /^## 9\./m, title: 'prd.md §3' },
+                };
+                var FB = {
+                    s1: { html: '<p class="text-xs">兜底</p>' },
+                    s21: { html: '<p class="text-xs">兜底</p>' },
+                    s22: { html: '<p class="text-xs">兜底</p>' },
+                    s3: { html: '<p class="text-xs">兜底</p>' },
+                };
+                function openAnno(key) {
+                    var w =
+                        !prdMd || prdLoadError
+                            ? '<div class="mb-2 rounded bg-amber-50 p-2 text-xs">prd 未联动</div>'
+                            : '';
+                    if (key === 'legend') {
+                        $('annoDlgTitle').textContent = '说明 · §9';
+                        var s9 = prdMd ? sliceBetween(prdMd, /^## 9\./m, /^## 10\./m) : '';
+                        $('annoDlgBody').innerHTML = w + LEG + (s9 ? '<div class="mt-2">' + mdToHtml(s9) + '</div>' : '');
+                        show();
+                        return;
+                    }
+                    var sp = EX[key];
+                    if (!sp) return;
+                    var sl = prdMd ? sliceBetween(prdMd, sp.start, sp.end) : '';
+                    $('annoDlgTitle').textContent = sp.title;
+                    $('annoDlgBody').innerHTML = w + (sl ? mdToHtml(sl) : FB[key].html);
+                    show();
+                }
+                function show() {
+                    $('modalAnno').classList.remove('hidden');
+                    $('modalAnno').classList.add('flex');
+                    $('annoDlgBody').scrollTop = 0;
+                }
+                function closeAnno() {
+                    $('modalAnno').classList.add('hidden');
+                    $('modalAnno').classList.remove('flex');
+                }
+                document.addEventListener(
+                    'click',
+                    function (e) {
+                        var t = e.target.closest('[data-anno-key]');
+                        if (!t) return;
+                        e.preventDefault();
+                        e.stopPropagation();
+                        openAnno(t.getAttribute('data-anno-key'));
+                    },
+                    true,
+                );
+                $('btnAnnoClose').addEventListener('click', closeAnno);
+                $('modalAnno').addEventListener('click', function (e) {
+                    if (e.target === $('modalAnno')) closeAnno();
+                });
+                $('btnAnnoLegend').addEventListener('click', function () {
+                    openAnno('legend');
+                });
+                document.addEventListener('keydown', function (e) {
+                    if (e.key === 'Escape' && !$('modalAnno').classList.contains('hidden')) closeAnno();
+                });
+                function toast(m) {
+                    var el = $('toast');
+                    el.textContent = m;
+                    el.classList.remove('hidden');
+                    clearTimeout(el._t);
+                    el._t = setTimeout(function () {
+                        el.classList.add('hidden');
+                    }, 2000);
+                }
+                $('btnCta').addEventListener('click', function () {
+                    toast('跳转注册 / 登录（模拟）');
+                });
+            }
+            fetch('prd.md', { cache: 'no-store' })
+                .then(function (r) {
+                    if (!r.ok) throw new Error();
+                    return r.text();
+                })
+                .then(function (t) {
+                    runPrototype(t, null);
+                })
+                .catch(function () {
+                    runPrototype('', new Error());
+                });
+        </script>
+    </body>
+</html>

package/dist/deppon-prd-generator/quick-reference.md CHANGED Viewed

@@ -1,5 +1,9 @@
 # deppon-prd-generator 快速参考指南
+**语言**：`prd.md` 与 `prototype.html` 中用户可见文案须按本技能默认**简体中文**（另有约定时从其指令）；详见 `SKILL.md`「语言与文案」与「本技能对执行者的硬性要求」。
+**PRD↔原型**：同目录有 `prototype.html` 时，`prd.md` 文首须有 `[描述](./prototype.html)` 相对链接；见 `SKILL.md`「PRD 与原型互链」。
 ## 🚀 快速开始
 ### 一句话命令
@@ -21,11 +25,12 @@
 | 图标 | 类型           | 适用场景                          | 模板                                 |
 | ---- | -------------- | --------------------------------- | ------------------------------------ |
-| 📊   | 数据看板类     | 统计看板、报表分析、指标监控      | data-prd-template.md                 |
-| 📋   | 后台列表类     | 数据列表、查询列表、台账管理      | backend-list-prd-template.md         |
-| ✏️   | 后台表单编辑类 | 新增/编辑表单、配置管理、数据录入 | backend-form-edit-prd-template.md    |
-| 👁️   | 后台表单预览类 | 详情查看、预览页面、只读页面      | backend-form-preview-prd-template.md |
-| 🎨   | 用户前台类     | C 端页面、营销活动、产品展示      | user-frontend-prd-template.md        |
+| 📊   | 数据看板类     | 统计看板、报表分析、指标监控      | data-prd-template.md；先读 `examples/data-dashboard/` |
+| 📋   | 后台列表类     | 数据列表、查询列表、台账管理      | backend-list-prd-template.md；纯列表 `examples/backend-list/`；含 CRUD `examples/list-crud/` |
+| ✏️   | 后台表单编辑类 | 新增/编辑表单、配置管理、数据录入 | backend-form-edit-prd-template.md；先读 `examples/form-edit/` |
+| 👁️   | 后台表单预览类 | 详情查看、预览页面、只读页面      | backend-form-preview-prd-template.md；先读 `examples/form-preview/` |
+| 🎨   | 用户前台类     | C 端页面、营销活动、产品展示      | user-frontend-prd-template.md；先读 `examples/user-frontend/` |
+| 🧭   | 壳层与多页导航 | 文档中心壳层、侧栏顶栏、多子页互跳     | app-shell-navigation-prd-template.md；先读 `examples/app-shell-navigation/`（含 `layout-spec.md`） |
 ---
@@ -58,12 +63,21 @@ skills/deppon-prd-generator/
 ├── SKILL.md                    # 主技能文档
 ├── workflow.md                 # 详细工作流程
 ├── quick-reference.md          # 本文件 - 快速参考
+├── examples/                   # 内置参考示例（见 examples/README.md）
+│   ├── data-dashboard/
+│   ├── backend-list/
+│   ├── list-crud/
+│   ├── form-edit/
+│   ├── form-preview/
+│   ├── user-frontend/
+│   └── app-shell-navigation/
 └── template/
     ├── data-prd-template.md              # 数据看板模板
     ├── backend-list-prd-template.md      # 后台列表模板
     ├── backend-form-edit-prd-template.md # 表单编辑模板
     ├── backend-form-preview-prd-template.md # 表单预览模板
-    └── user-frontend-prd-template.md     # 用户前台模板
+    ├── user-frontend-prd-template.md     # 用户前台模板
+    └── app-shell-navigation-prd-template.md # 壳层与多页导航模板
 ```
 ---
@@ -72,6 +86,7 @@ skills/deppon-prd-generator/
 生成 PRD 后，请确认：
+-   [ ] 已按页面类型对照阅读 `examples/<子目录>/prd.md`（见 `examples/README.md` / `SKILL.md` 映射表；将交付原型时含同目录 `prototype.html`）
 -   [ ] 文件保存在正确位置：`src/prototypes/<page-name>/prd.md`
 -   [ ] 文件名正确：`prd.md`（小写）
 -   [ ] 内容与页面实现一致
@@ -85,6 +100,8 @@ skills/deppon-prd-generator/
 -   [ ] `src/prototypes/<page-name>/prototype.html` 可用浏览器直接打开（默认 Tailwind Play CDN）
 -   [ ] 主要交互可演示；与 `prd.md` 描述一致
 -   [ ] **含 PRD 标注弹框**：分区触发、弹层内章节号与要点、与业务弹窗区分、可 ESC/遮罩关闭
+-   [ ] 常规主操作按钮为主题蓝实心（见 `SKILL.md` 技术约定第 8 条），与次要/危险按钮区分
+-   [ ] （推荐）标注正文与 `prd.md` 联动、长内容可滚动、`file://` 有兜底（第 9 条）
 ---

package/dist/deppon-prd-generator/template/app-shell-navigation-prd-template.md ADDED Viewed

@@ -0,0 +1,180 @@
+# [壳层 / 项目名称] 管理台壳层与导航 PRD（产品需求文档）
+> **生成时对照**：生成前阅读本技能目录 `examples/app-shell-navigation/prd.md`、`layout-spec.md`（首页栅格/间距速查）与（若交付原型）`examples/app-shell-navigation/prototype.html`，对齐**栅格尺寸、侧栏层级、多页目录约定、iframe/路由跳转**写法。`prd.md` 与原型可见文案默认**简体中文**（见本技能 `SKILL.md`「语言与文案」）。用户仓库产出：`src/prototypes/<项目目录名>/prd.md`；子页面建议 `src/prototypes/<项目目录名>/pages/*.html` 与壳层 `prototype.html` 同级或子目录。
+> **交互原型链接（有 `prototype.html` 时必填）**：文首加入 `- **交互原型**：[打开 prototype.html](./prototype.html)`（壳层主入口）；仅无原型时删除。见 `SKILL.md`「PRD 与原型互链」。
+---
+## 1. 引言
+### 1.1 背景
+```
+[说明：本壳层解决「多业务子页在同一管理台内统一导航、顶栏、页签」的问题；PRD 评审可在壳层原型中点击菜单/页签切换不同静态子页。控制在约 80 字内。]
+```
+### 1.2 功能清单
+> 壳层 PRD **需要**描述顶栏、侧栏、页签、主区占位与跨页跳转规则；与子页 PRD（列表/表单等）区分边界：子页字段与接口以各子目录 `prd.md` 为准。
+| 模块       | 功能点     | 功能描述 |
+| ---------- | ---------- | -------- |
+| `[壳层名]` | 全局布局   | 侧栏 + 顶栏 + 主工作区；栅格与间距见 §3 |
+| `[壳层名]` | 侧栏导航   | 一级 / 二级 / 三级（含飞层）与收起态，见 §4 |
+| `[壳层名]` | 顶栏与页签 | Logo、面包屑或页签、用户区等，见 §5 |
+| `[壳层名]` | 子页承载   | iframe 或前端路由；子页 URL 与目录约定见 §6 |
+| `[壳层名]` | 权限控制   | 菜单/路由可见性，见 §7 |
+---
+## 2. 页面菜单与权限规划
+### 2.1 入口与菜单树
+**入口**：`[URL 或功能码入口说明]`
+**菜单树（与侧栏一致）**：
+```
+[一级]
+  ├─ [二级] → 子页：[文件名或路由 path]
+  └─ ...
+```
+### 2.2 权限规划
+| 权限点 | 操作范围 | 数据范围 |
+| ------ | -------- | -------- |
+| 查看   | 进入壳层、可见菜单与可打开子页（只读场景） | `[个人/租户/全量]` |
+| 编辑   | 含配置类子页的新增/编辑（若壳层内嵌配置入口） | `[同上]` |
+---
+## 3. 全局布局与栅格
+### 3.1 尺寸与间距
+> 与视觉规范对齐；下列为**推荐默认值**（可按设计令牌替换）。
+| 区域 | 规格 | 说明 |
+| ---- | ---- | ---- |
+| 侧栏宽度（展开） | `[如 180px]` | 固定宽，内容区横向滚动不出现双滚动条为宜 |
+| 侧栏宽度（收起） | `[如 56px]` | 仅展示图标；Tooltip 展示全称 |
+| 顶栏高度 | `[如 56px]` | 固定高 |
+| 主区与侧栏间距 | `[如 16px]` | 侧栏右缘到主区 |
+| 顶栏与主区间距 | `[如 16px]` | 顶栏底缘到主区顶 |
+| 主区内模块间距 | `[如 16px]` | 卡片/区块之间 |
+| 页面底边距 | `[如 24px]` | 避免内容贴底 |
+| 栅格体系 | `[如 24 栅格]` | 主区内区块按列占位；大屏断点 `[列举]` |
+### 3.2 主工作区栅格
+> 描述首页或默认 landing 在主区内的分栏（如顶通栏 + 下区 2:1 双列）。
+- **顶通栏**：`[占满主区宽 / 占 N 栅格]`；用途：`[摘要/筛选/横幅]`。
+- **下区左列**：约 `[2/3]` 宽或 `[16/24 栅格]`；用途：`[列表/图表]`。
+- **下区右列**：约 `[1/3]` 宽或 `[8/24 栅格]`；用途：`[快捷入口/说明]`。
+---
+## 4. 侧栏导航
+### 4.1 一级菜单
+| 项 | 说明 |
+| -- | ---- |
+| 行高 | `[如 52px]` |
+| 左内边距 / 图标与文案间距 / 右内边距 | `[如 18px / 8px / 18px]` |
+| 展开指示 | 右侧 chevron；展开后旋转或向上 |
+| 选中态 | `[背景色 + 文字色 + 左侧条等]` |
+### 4.2 二级菜单
+- 点击一级展开/收起二级；**手风琴**是否互斥：`[是/否]`。
+- 二级项无图标或统一弱图标：`[说明]`。
+### 4.3 三级菜单（飞层）
+- **触发**：悬停二级项展开右侧浮层；**或**点击展开（二选一，写明）。
+- 浮层：白底、阴影、与侧栏对齐的左边距；**键盘**：`Esc` 关闭飞层。
+- 当前页在三级中**高亮**规则：`[与路由 path 匹配]`。
+### 4.4 收起导航
+- 切换按钮位置：`[侧栏右缘中部/顶栏左侧等]`。
+- 收起后：仅图标；当前一级 `active` 样式：`[描边/底色]`。
+- **Tooltip**：鼠标悬停图标展示菜单全称。
+---
+## 5. 顶栏与页签区
+| 元素 | 行为与内容 |
+| ---- | ---------- |
+| Logo / 产品名 | `[点击回首页或外链]` |
+| 页签（若启用） | 与打开的子页同步；可关闭；**右键菜单**（可选）：关闭其他/全部 |
+| 搜索 / 消息 / 用户 | `[占位说明，链到各子 PRD 若需要]` |
+---
+## 6. 多页跳转与文档中心目录约定
+> 目标：评审时在**不启动业务工程**的情况下，通过壳层在多个静态子页间跳转。
+**推荐目录（与 `deppon-prd-generator` 技能一致）**：
+```text
+src/prototypes/<项目目录名>/
+  prd.md                 # 本壳层 PRD
+  prototype.html         # 壳层入口（含侧栏/顶栏/主 iframe 或路由容器）
+  pages/
+    <feature-a>.html     # 子页原型 A
+    <feature-b>.html     # 子页原型 B
+    ...
+```
+**跳转实现（二选一或组合）**：
+| 方案 | 适用 | 说明 |
+| ---- | ---- | ---- |
+| A. iframe + `target` | 纯静态、零构建 | 侧栏 `<a href="pages/xxx.html" target="[iframe name]">`；子页独立 HTML，各自可带 PRD 标注 |
+| B. 前端路由（hash） | 单页壳 + 多 section | `location.hash` 切换主区内模板；子区块可拆文件后构建期合并 |
+| C. 多文件整页跳转 | 最简单 | `<a href="pages/xxx.html">` 整页替换；壳层重复则需每页引用同一壳或接受无壳 |
+**打开方式**：若子页或壳层使用 `fetch('prd.md')`，须 **HTTP 打开** 对应目录（勿依赖 `file://`）。
+---
+## 7. 权限与菜单可见性
+- 无权限的一级/二级：**隐藏**或**置灰并禁用**（写明策略）。
+- 深链：用户打开无权限路由时的跳转：`[403 页 / 首页 / 提示条]`。
+---
+## 8. 无障碍与响应式
+- 侧栏折叠按钮：`aria-expanded`；导航容器：`nav` + 当前项 `aria-current="page"`（若适用）。
+- 飞层：`role="menu"` 或 `dialog`（按实现选型）与焦点陷阱（若 modal）。
+- 小屏：`[侧栏改为抽屉 / 底栏等]`（若本期不做，写「本期仅桌面」）。
+---
+## 9. 原型与 PRD 对应关系
+| PRD 章节 | 原型演示点 |
+| -------- | ---------- |
+| §3 | 侧栏/顶栏/主区间距与主区栅格占位 |
+| §4 | 一级展开、三级飞层、收起态 |
+| §5 | 顶栏与页签（若有） |
+| §6 | 点击菜单/页签切换 `pages/` 下子页 |
+| §8 | 焦点与 Esc 行为（与实现一致部分） |
+---
+## 10. 修订记录
+| 版本 | 日期 | 说明 |
+| ---- | ---- | ---- |
+| v0.1 | `[YYYY-MM-DD]` | 初稿 |

package/dist/deppon-prd-generator/template/backend-form-edit-prd-template.md CHANGED Viewed

@@ -1,5 +1,9 @@
 # [页面名称] PRD (产品需求文档)
+> **生成时对照**：整页表单编辑类 PRD 生成前阅读本技能目录 `examples/form-edit/prd.md`（及将交付原型时的 `prototype.html`）。
+> **交互原型链接（有 `prototype.html` 时必填）**：文首加入 `- **交互原型**：[打开 prototype.html](./prototype.html)`；仅无原型时删除。见 `SKILL.md`「PRD 与原型互链」。
 ## 1. 引言
 ### 1.1 背景

package/dist/deppon-prd-generator/template/backend-form-preview-prd-template.md CHANGED Viewed

@@ -1,5 +1,9 @@
 # [页面名称] PRD (产品需求文档)
+> **生成时对照**：只读详情/预览类 PRD 生成前阅读本技能目录 `examples/form-preview/prd.md`（及将交付原型时的 `prototype.html`）。
+> **交互原型链接（有 `prototype.html` 时必填）**：文首加入 `- **交互原型**：[打开 prototype.html](./prototype.html)`；仅无原型时删除。见 `SKILL.md`「PRD 与原型互链」。
 ## 1. 引言
 ### 1.1 背景

package/dist/deppon-prd-generator/template/backend-list-prd-template.md CHANGED Viewed

@@ -1,5 +1,9 @@
 # [页面名称] PRD (产品需求文档)
+> **生成时对照**：若本页含典型 **列表 + 筛选 + CRUD（详情/新增编辑/删除）**，生成前阅读本技能目录 `examples/list-crud/prd.md`，对齐章节拆分、表格字段密度与「原型与 PRD 对应关系」小节（交付 `prototype.html` 时）。若仅为**筛选 + 列表 + 分页**（无弹层 CRUD），阅读 `examples/backend-list/prd.md`。
+> **交互原型链接（有 `prototype.html` 时必填）**：在文首「文档说明」或标题下第一段加入 Markdown 相对链接，例如 `- **交互原型**：[打开 prototype.html](./prototype.html)`（文件名随实际交付调整）；仅无原型时删除本行链接。见本技能 `SKILL.md`「PRD 与原型互链」。
 ## 1. 引言
 ### 1.1 背景

package/dist/deppon-prd-generator/template/data-prd-template.md CHANGED Viewed

@@ -1,5 +1,9 @@
 # [页面名称] PRD (产品需求文档)
+> **生成时对照**：数据看板类 PRD 生成前阅读本技能目录 `examples/data-dashboard/prd.md`（含 §3 子模块、§4 指标总览、§5 交互；交付原型时对照同目录 `prototype.html`）。
+> **交互原型链接（有 `prototype.html` 时必填）**：文首加入 `- **交互原型**：[打开 prototype.html](./prototype.html)` 等相对链接；仅无原型时删除。见 `SKILL.md`「PRD 与原型互链」。
 ## 1. 引言
 ### 1.1 背景

package/dist/deppon-prd-generator/template/user-frontend-prd-template.md CHANGED Viewed

@@ -1,5 +1,9 @@
 # [页面名称] PRD (产品需求文档)
+> **生成时对照**：用户前台 / C 端活动类 PRD 生成前阅读本技能目录 `examples/user-frontend/prd.md`（及将交付原型时的 `prototype.html`）。
+> **交互原型链接（有 `prototype.html` 时必填）**：文首加入 `- **交互原型**：[打开 prototype.html](./prototype.html)`；仅无原型时删除。见 `SKILL.md`「PRD 与原型互链」。
 ## 1. 引言
 ### 1.1 背景

package/dist/deppon-prd-generator/workflow.md CHANGED Viewed

@@ -12,35 +12,40 @@
     └─ 查看 screenshot.png
         ↓
     Step 2: 类型识别
-    ├─ 数据看板类？ ──是──→ 使用 data-prd-template.md
-    ├─ 后台列表类？ ──是──→ 使用 backend-list-prd-template.md
-    ├─ 表单编辑类？ ──是──→ 使用 backend-form-edit-prd-template.md
-    ├─ 表单预览类？ ──是──→ 使用 backend-form-preview-prd-template.md
-    └─ 用户前台类？ ──是──→ 使用 user-frontend-prd-template.md
+    ├─ 数据看板类？ ──是──→ data-prd-template.md（先读 examples/data-dashboard/）
+    ├─ 后台列表类？ ──是──→ backend-list-prd-template.md（纯列表 examples/backend-list/；含弹层 CRUD examples/list-crud/）
+    ├─ 表单编辑类？ ──是──→ backend-form-edit-prd-template.md（先读 examples/form-edit/）
+    ├─ 表单预览类？ ──是──→ backend-form-preview-prd-template.md（先读 examples/form-preview/）
+    ├─ 用户前台类？ ──是──→ user-frontend-prd-template.md（先读 examples/user-frontend/）
+    └─ 壳层与多页导航？ ──是──→ app-shell-navigation-prd-template.md（先读 examples/app-shell-navigation/）
         ↓
     Step 3: 需求确认 (按需)
     ├─ 仅类型/范围不明时确认
     └─ 禁止：仅要 PRD 时追问是否要原型
         ↓
     Step 4: PRD生成
+    ├─ 已映射类型则先读 examples/<子目录> 对照（见 SKILL.md）
     ├─ 应用对应模板
     ├─ 提取页面信息
-    ├─ 填充模板内容
+    ├─ 填充模板内容（默认简体中文；有 prototype 时文首加相对链接，见 SKILL.md）
         └─ 保存到 src/prototypes/<page-name>/prd.md
         ↓
     Step 4b: 原型生成 (仅用户指令含原型/HTML/Tailwind 等关键词时)
     ├─ 单文件 prototype.html + Tailwind CDN + PRD 标注弹框
     ├─ 单文件 prototype.html + Tailwind CDN
     ├─ 布局/视觉对齐截图或实现
+    ├─ 可见 UI 文案默认简体中文（见 SKILL.md「语言与文案」）
     ├─ 原生 JS 实现 Tab/弹层等演示交互
-        └─ 保存到 src/prototypes/<page-name>/prototype.html
+    ├─ 保存到 src/prototypes/<page-name>/prototype.html
+    └─ 回写 prd.md 文首：指向 prototype 的 Markdown 相对链接（见 SKILL.md）
         ↓
     Step 5: 一致性核对
+    ├─ (若已读 examples/) 核对章节与信息粒度不低于同类参考
     ├─ 核对功能点与页面实现
     ├─ 核对技术约定与spec.md
     ├─ 核对范围与用户要求
     ├─ 核对是否遗漏核心内容
-    └─ (若有原型) 核对原型与 prd.md、spec 一致
+    └─ (若有原型) 核对原型与 prd.md、spec 一致；prd.md 文首含 prototype 相对链接
         ↓
     一致性检查通过？
         ├─ 是 → 完成！交付 PRD（若用户要求原型则含 prototype.html）
@@ -79,16 +84,17 @@
 | 判断条件                             | 页面类型       | 模板文件                             |
 | ------------------------------------ | -------------- | ------------------------------------ |
-| 包含大量图表、指标卡片、数据看板     | 数据看板类     | data-prd-template.md                 |
-| 包含数据列表、筛选器、分页、批量操作 | 后台列表类     | backend-list-prd-template.md         |
-| 包含表单输入、提交按钮、字段校验     | 后台表单编辑类 | backend-form-edit-prd-template.md    |
-| 只有数据展示、无输入操作             | 后台表单预览类 | backend-form-preview-prd-template.md |
-| C 端用户界面、营销活动、产品展示     | 用户前台类     | user-frontend-prd-template.md        |
+| 包含大量图表、指标卡片、数据看板     | 数据看板类     | data-prd-template.md；先读 `examples/data-dashboard/` |
+| 包含数据列表、筛选器、分页、批量操作 | 后台列表类     | backend-list-prd-template.md；**纯列表**先读 `examples/backend-list/`；**含弹层 CRUD** 先读 `examples/list-crud/` |
+| 包含表单输入、提交按钮、字段校验     | 后台表单编辑类 | backend-form-edit-prd-template.md；先读 `examples/form-edit/` |
+| 只有数据展示、无输入操作             | 后台表单预览类 | backend-form-preview-prd-template.md；先读 `examples/form-preview/` |
+| C 端用户界面、营销活动、产品展示     | 用户前台类     | user-frontend-prd-template.md；先读 `examples/user-frontend/` |
+| 侧栏+顶栏+多子页跳转、PRD hub、iframe 承载 pages | 壳层与多页导航类 | app-shell-navigation-prd-template.md；先读 `examples/app-shell-navigation/`（含 `layout-spec.md`） |
 **如果无法自动识别**：
 -   向用户询问页面类型
--   提供 5 种类型供用户选择
+-   提供 6 种类型供用户选择（含壳层与多页导航）
 ---
@@ -119,8 +125,9 @@
 **生成流程**：
-1. **读取模板**
+1. **读取模板与参考示例**
     - 根据页面类型加载对应模板
+    - 按 `SKILL.md`「内置参考示例」表阅读对应 `examples/<子目录>/prd.md`（及将交付原型时的 `prototype.html`）
     - 理解模板的结构和要求
 2. **信息提取**
     - 从 `index.tsx` 提取功能点
@@ -131,6 +138,7 @@
     - 替换模板中的占位符
     - 按照模板结构组织内容
     - 确保术语统一、逻辑清晰
+    - **有同目录 `prototype.html`（或约定原型主文件）时**：文首加入 `[打开交互原型](./prototype.html)` 等 Markdown 相对链接（见 `SKILL.md`「PRD 与原型互链」）；仅无原型时不写死链接
 4. **保存文件**
     - 路径：`src/prototypes/<page-name>/prd.md`
     - 文件名：`prd.md`（小写）
@@ -139,7 +147,7 @@
 **关键原则**：
 -   内容必须基于实际页面实现
--   使用研发/测试通用术语
+-   使用研发/测试通用术语；**须遵守 `SKILL.md`「语言与文案」与「本技能对执行者的硬性要求」**，PRD 与原型可见文案默认简体中文
 -   避免冗余表述
 -   结构清晰、层次分明
@@ -152,10 +160,14 @@
 **操作清单**：
 -   [ ] 使用 Tailwind CSS（优先 Play CDN），单文件 `prototype.html` 为主
+-   [ ] **可见文案默认简体中文**（`title`、导航、按钮、表头等；见 `SKILL.md`「语言与文案」）
 -   [ ] 布局与关键样式对齐截图或现有页面
 -   [ ] 用原生 JS 实现需演示的交互（Tab、折叠、弹层、表单状态等）；数据 mock
 -   [ ] **PRD 标注弹框**：主要区块设触发器，独立弹层展示章节号 + 需求要点；z-index 高于业务弹层；ESC/遮罩/按钮可关
+-   [ ] **主按钮主题色**：查询、新增、保存等常规主操作为主题蓝实心（见 `SKILL.md` 技术约定第 8 条）；次要白底边线；危险操作为红色系
+-   [ ] **（推荐）标注与 prd.md 联动**：同目录 `fetch` + 章节切片 + Markdown 渲染；弹内 `overflow` 可滚；`file://` 时说明 HTTP 打开方式并含兜底（见技术约定第 9 条）
 -   [ ] 文件内注释或页脚注明与 `prd.md` 的对应关系
+-   [ ] **回写 `prd.md` 文首**：含指向本原型入口的 Markdown 相对链接（见 `SKILL.md`「PRD 与原型互链」）
 -   [ ] 保存路径：`src/prototypes/<page-name>/prototype.html`
 **关键原则**：
@@ -200,8 +212,14 @@
 -   [ ] 所有重要交互都已说明
 -   [ ] 模板的所有必填部分都已填充
+#### 维度 4b: 与内置参考示例对齐（若 Step 4 已阅读 `examples/`）
+-   [ ] 与本次选用的 `examples/<子目录>/prd.md` 同类模块在目标 PRD 中信息密度与章节习惯一致，或因用户缩小范围而明确删减
+-   [ ] 若交付 `prototype.html`：标注弹框分区、层级与 PRD 章节映射习惯与参考示例一致
 #### 维度 5: 原型与文档一致（若交付了 prototype.html）
+-   [ ] **`prd.md` 文首**含指向本目录原型入口（默认 `./prototype.html`）的 **Markdown 相对链接**，可点击打开（见 `SKILL.md`「PRD 与原型互链」）
 -   [ ] 原型展示的模块、字段、主流程与 `prd.md` 无矛盾
 -   [ ] 承诺可点的交互在原型中可用；未承诺的不宜过度「假实现」以免误导
 -   [ ] 与 spec.md 中的文案、枚举、状态一致（若有 spec）