首版样板与两条硬要求

1无论屏幕大小、怎样缩放，画面比例不变

2像PPT一样单击翻页，并有转场效果

对样板提出这两条要求后，按样板重做16页；随后决定改为严格沿用院模板，一页一页地过。

负面清单（交接文件第六部分）

核对中发现的问题（示例）

• 两套口径并存：恢复已确认口径；如要调整，须给出逐条变动清单
• 漏项：一项污水及再生水配套项目曾被漏计，核对后补入
• 误归类：“历史遗留废弃矿山”不因含“历史”二字归入历史文化保护
• 按实际承接工作归类：名称为设计施工总承包、我院只做设计的，不计入施工

八步流程

两个技能的目录

---
name: hxn-word-to-slides
description: 用户给出Word报告或讲话材料、要求“分章节”“拆成演示稿”“做PPT前先整理结构”时使用；把Word拆解为章节方案和逐页脚本（含讲稿），作为hxn-html-deck制作HTML演示稿的输入。
---

# Word 拆解为演示稿逐页脚本（技能一）

本技能把一份Word材料整理成“逐页脚本”（每页放什么、怎么出现、讲什么），交给技能二 `hxn-html-deck` 生成HTML。本技能不做HTML，不排版。

## 一、工作程序

**第1步　读原文**
- 用 `pandoc 文件.docx -t plain --wrap=none` 读全文；表格、图注一并读出。
- 列出原文骨架：各级标题、每节的观点句、全部数字（连同原文所在段落）、专有名称（文件名、机构名、项目名）。

**第2步　问清场合（多选题，一次问完）**
- 会议名称与日期、讲话时长、听众（班子／中层／外部领导）、署名写法（如“副总经理　于宇”）。
- 演示标题：默认用Word原标题，不另起。
- 是否需要讲稿（默认需要）。

**第3步　给两种分章方案，由用户选**
- **方案A：按Word原章节**，只做分页，不调结构。
- **方案B：按演讲逻辑重组**，参考结构为“为什么变（形势）—我们在哪（定位）—怎么做（路径）—落到哪（收束）”，章节名可调整。
- 两个方案都列成表：章节名、所含页名、每页一句话任务。每页只承担一个主要任务。页数按内容自然分，不凑数，也不硬压。
- 用 AskUserQuestion 让用户选A或B，或在某一方案上点改。**用户说“改”或选定之前，不写逐页脚本。**

**第4步　写逐页脚本**
- 按下文“逐页脚本模板”逐页填写，保存为 `逐页脚本.md`。
- 每页的“版型建议”从技能二的版型库里选代号（C1 封面、C2 目录、T1—T10 内容版型、E1 结束），没有合适的就写“新版型＋一句描述”。
- 每页的“单击步骤”写清楚每一下出现什么，以及底部结论条随之显示的文字。

**第5步　写讲稿**
- 按页写，段落内用【单击】标出点翻页笔的位置，和脚本里的单击步骤一一对应。
- 长度参照用户语速：约3500字可讲10—11分钟。每页标注时间段，如（3:06—4:32）。
- 讲稿同时出一份不带【单击】的纯文字版，标题行写“页名（P几）”。

**第6步　自检后交付**
- 数字逐条回到原文核对，写进“数据核对”栏；原文没有的数字不写，推算出来的数字要标明“推算”并提请用户确认。
- 交付 `逐页脚本.md` 与讲稿（Word，用户要公文格式时按公文格式出）；用 SendUserFile 发出，回复中列出章节方案和页数。

## 二、拆解原则

1. **每页一个任务**：一页只回答一个问题；一页塞两件事，就拆成两页或其中一件放进弹窗。
2. **结论先行**：每页要有一句“核心句”（≤30字），放在底部结论条；全篇三四个关键页可用居中大字结论。
3. **章节名**：凝练、正式，四字或六字为宜，如“市场形势研判”“发展思路举措”；不直白、不口号化。
4. **数据**：只用原文和用户提供的数据；每个数字写清口径（时间段、统计范围、单位），以及“项数、金额、占比”的对应关系；数字不要四舍五入到失真。
5. **详略**：主线内容上页面，支撑性明细（数据表、清单、资质列表、地图）放弹窗，用页面按钮或翻页笔顺序打开。
6. **用语**：正式书面语，不口语化、不说教；不下“某某是最难的环节”这类论断；对外场合不自我拔高；敏感事项（人事调整、经营困难、合规问题）用中性表述，或不上页面。
7. **不另起炉灶**：演示标题、核心口径、关键表述沿用原文；需要改写时，在对齐中列出“原文→建议”请用户确认。
8. **收束**：最后两页通常是“把问题收成路径”（前面提出的问题归结为几个问题及回答）和“结束页”（一句落脚语＋“请批评指正”）。

## 三、逐页脚本模板（每页一节）

```
## P6　市场竞争格局
- 所属章节：03　市场竞争格局
- 本页任务：说明省内三条进入路径，以及区域市场的不同进入方式
- 核心句（结论条）：三条路径互不排斥：以咨询为基础，好项目依托集团投资，联合合作单位形成全链服务
- 版型建议：T4 格局对比＋区域弹窗
- 页面要点：
  - 省内三家：平台型｜投资型｜咨询型（各写门槛一句）
  - 全国：八大建筑央企……；同业：中规院、清华同衡……
- 单击步骤：
  - 进入：三条路径、央企、同业依次出现；结论条“省内：平台型、投资型、咨询型……”
  - 单击1：广安弹窗→攀枝花弹窗→对比（含总投资横栏）
  - 单击2：沐川弹窗
  - 单击3：关闭弹窗，出结论
- 弹窗：广安卡、攀枝花卡（四类清单数量与金额）、沐川卡
- 数据核对：
  - 广安 108个 409.9亿元｜《2026年城市更新机会清单》｜已核
  - 沐川 1—9月 25个 ××万元（金额已隐去）｜用户提供（含合同价口径）｜已确认
- 资料来源行：企业信息据公开资料；区域数据据2026年四川省城市更新机会清单；沐川数据据2026年1—9月中标明细
- 讲稿：（本页段落，含【单击】）
- 时间：3:06—4:32
```

## 四、对齐时常用的多选题

- 分章方案：A 按原章节 / B 按演讲逻辑重组 / 在A上微调 / 在B上微调。
- 某页详略：主线上页面 / 放进弹窗 / 删去。
- 数字口径：用原文数 / 用用户给的数 / 用重算的数（列出差异）。
- 讲稿语体：讲稿体（正式）/ 汇报体。

---
name: hxn-html-deck
description: 要做核西南院风格的HTML演示稿（放映版、翻页笔、可替代PPT）时使用；读取hxn-word-to-slides产出的逐页脚本（或用户给的Word），按版型库、版式标准、放映交互标准和制作程序，配合底板包生成单文件HTML演示稿。
---

# 核西南院 HTML 演示稿生成（技能二）

本技能只管“怎么做、做成什么样”。内容（页数、每页讲什么、数据口径）来自技能一 `hxn-word-to-slides` 产出的《逐页脚本》；用户直接给Word时，先按技能一把逐页脚本做出来并对齐，再进入本技能。

## 〇、开工前

1. 底板包：《核西南院_HTML演示底板包》（zip）。会话里没有时，先请用户上传；不要凭记忆重画LOGO、条带、楼体图。
2. 一律从底板包里的 `starter.html` 复制起步：它已含完整样式库与放映引擎，只需替换页面。`reference/完整样例_分管领域发展方向分析报告.html` 是2026年10月产业培育推进会的成品，组件不会写时去里面找现成写法（可先看 `reference/源代码_精简阅读版.txt`）。
3. 读《逐页脚本》：按每页的“版型建议”从下文版型库取结构，按“单击步骤”写动画阶段，按“核心句”写结论条，按“资料来源行”写页脚。脚本里没写清的（如某页用哪种版型、弹窗放几张卡），用多选题问清再做。
4. 制作顺序：先搭全篇骨架（每页页眉、章节标签、页码、条带、结论条文字），截图给用户看页序；再逐页做内容和动画，每做完两三页发一次文件。

## 一、制作程序（用户的硬性要求）

- **先对齐，后动手**：用户说“对齐一下”时只提方案，不改文件；用户说“改”才改。对齐优先用多选题（AskUserQuestion），每题给推荐项。
- **“不改”的含义**：用户说“按我的改动”“不改”，是遵守他的意思；病句、重复用词仍要直接改通，不能原样保留。
- **每次改动前备份**：`v_before_xxx.html`；编辑用脚本做“断言计数替换”（确认原文只出现一次再替换），不手工大段重写。
- **改完必须自检**：
  1. `python3 tools/shot_all.py 演示稿.html 截图目录` 逐页截图，逐张看：文字是否被裁切、是否重叠、是否溢出卡片、按钮是否可见；
  2. 关键页用脚本模拟翻页笔逐步前进，确认每一步只前进一步、弹窗开合正确；
  3. 定稿或每次改版后运行 `python3 tools/make_thumbs.py 演示稿.html` 重生成导航缩略图。
- **交付**：
  - 改完一定要把HTML文件发给用户（用户多次指出“又忘了发”）；文件名固定，如 `演示稿_放映版_点击播放.html`，覆盖更新；
  - 回复里逐条列出“改了哪些点”，不复述没改的。
- **数据**：数字与来源原文逐一核对；页面底部写“资料来源：……”；数字不夸大、不自行推算后当事实写；口径变化要在对齐时说清。
- **文字**：正式书面语，不口语化、不说教，不下“某某是最难的”这类论断；标题正式、凝练，不直白；中文引号一律全角“”‘’；不设“AI”专页，也不在页面上提AI。

## 二、版式标准（画布与元素位置，单位px，基于1280×720）

**画布**：固定16∶9，1280×720，等比缩放居中（`#stage` + `--k`），任何屏幕都不变形；外围深色 `#1b2430`。

**配色**
| 用途 | 色值 |
|---|---|
| 主蓝（标题、主线、按钮） | #0061AB |
| 深蓝（小标题、卡片标题、深色条） | #1F4E79 |
| 强调红（结论键、重点、“我们在此”） | #E70014 |
| 绿（第二色、条带右段） | #66B03E / #4F9D3F |
| 标题后装饰三方块 | #C0843A、#E70014、#F5A623 |
| 正文灰 / 辅助灰 / 分隔线 | #2C3E50 / #6B7B8C、#8A99A8 / #D9E2EC |

**字体**：中文微软雅黑（无则苹方、思源黑体）；数字、日期、页码用 Times New Roman（`.num`）；英文 Arial。

**封面**：左上 `logo_cover`（左72、上52、宽330）；主标题居中 58px 粗体主蓝、字距6px；副标题“——……”24px深蓝，关键词红色；标题下“蓝72＋绿48”短双色线；右下“姓名＋日期”；条带 top 629。

**目录**：浅色楼体底图（`.slide.bg`＋楼体图60%透明）；左侧大字“目录”84px＋装饰三方块＋红色 Contents；右侧章节行：编号（Times，后几章转绿）、章名、关键词、页码范围；条带 top 673。

**内容页（每页统一）**
- 页眉：左上章节标签 `.sec`（left72、top14、13px灰、字距2px，前有绿色短竖线，如“01　市场形势研判”）；标题 `h1` 34px 粗体主蓝字距4px（top34），后接斜线＋三色方块；右上 SCRG 方标（right44、top20、宽62）。
- 内容区：放在 `.clip > .cam` 内，可视范围为 top104 至 bottom66（clip-path）。**任何必须一直可见的文字不要放进 .clip 里靠近上下边缘的位置，否则会被裁切。**
- 底部结论条 `.cap`：left200、right60、top606、高38；左侧红底白字关键词（2—4字），右侧一句话；最终结论加粗（`capSet(s,'结论',文字,true)`）。
- 资料来源 `.p7src2`：left72、top651，10.5px灰。
- 页码：右下 `.pno`（导航用）＋放映时 `#pgn` 显示“07 / 13”，淡灰。
- 底部条带 `stripe.png`：top673（封面、结束页 top629）。

**常用组件（样式库已有，直接用类名）**
- 编号卡片 `.p4k`（左边4px主蓝竖线，`.red` 红色强调，`.long` 长文字），分组标签 `.ctag`，箭头 `.p4arw`，深蓝小结条 `.p4sum`；
- 双栏对照 `.q6col.l / .r`，行 `.q6r`（`.us` 浅红底表示“我们在此”）；
- 页面小按钮：胶囊按钮 `.p6btn`（`data-pop="状态名"`），卡片角按钮 `.stbtn`（注意用 `<span>`，不要用 `<i>`，否则高度为0看不见）；
- 弹窗：每页一个 `.p8ov`，内放若干 `.p8card`（`--c` 定顶边色），状态类 `sXXX` 控制显示哪张、放在哪；右上自动生成“×”；
- 大字结论：`.dim` 遮罩＋`.bigc` 大字，`flyConcl()` 飞入底部结论条；
- 数字滚动：`<b class="num cnt" data-to="61">`，`countUp()`。


## 三、版型库（成品样例见 reference/完整样例 第×页）

每种版型写明：结构、动画阶段、可复用的类名前缀。新做时复制样例对应 `<section>` 和 `PH_`/`PLAY_` 函数，改id前缀和文字，不要从零重写。

| 代号 | 版型 | 样例 | 结构与动画要点 |
|---|---|---|---|
| C1 | 封面 | P1 | 左上院LOGO；居中主标题＋副标题（关键词红）＋双色短线；右下姓名日期；首页底部“开始放映”按钮。无动画阶段 |
| C2 | 目录 | P2 | 楼体底图；左“目录／Contents”；右章节行（编号、章名、关键词、页码范围）逐行淡入 |
| T1 | 时间轴＋泳道＋镜头推移 | P3（`pw`） | 横向年份轴，泳道分“中央／部委／四川省”等；事件数据写在 `<script type="application/json" id="pwev">`；镜头 `camTo` 放大后沿时间轴平移，事件逐个点亮、字幕同步；第2阶段出量级卡片（数字滚动）→ 大字结论飞入。适合政策沿革、发展历程 |
| T2 | 三段因果卡片列 | P4（`p4`） | 三列：现象→原因→影响，每列三张编号卡 `.p4k`，列间箭头，列底深蓝小结 `.p4sum`；4个阶段（每列一下＋大字结论）。适合“为什么” |
| T3 | 关系框架图 | P5（`p5`） | 三层横条（专业／业务／产业）＋正向、反向箭头；“过去／现在”上下对照框；2个阶段。适合讲一把尺子、一个分析框架 |
| T4 | 格局对比＋区域弹窗 | P6（`p6x`，弹窗 `.p8card` + `sGA/sPZ/sCMP/sMC`） | 上部三列主体卡（门槛一句，“与我院同属”红角标）；下部全国／同业横条；弹窗依次单卡→并排对比（“对比”字样＋底部总投资横栏）→第三张卡；4个阶段 |
| T5 | 产业链节点＋双栏＋数据弹窗 | P7（`p6b`，`q6` 前缀） | 五环节圆形节点，用填充表示进入程度：实心＝已进入，半填＝部分，虚线＝支撑协同，空心＝短板；下方双栏对照（`.q6col`）；胶囊按钮打开结构弹窗（横条＋占比）；“我们在此／我们要切入”标注 |
| T6 | 任务—实践—能力矩阵 | P8（`p7a`，`data-auto`） | 顶部八项任务节点（项数、金额滚动）；中部四类实践卡；曲线连线实线＝主对应、虚线＝次对应；进入后一次自动播完 |
| T7 | SWOT四象限 | P9（`sw`） | 十字坐标（内部／外部、有利／不利可隐藏），四格要点；第2阶段出综合判断；四格详情弹窗不入翻页顺序，备用 |
| T8 | 总体思路结构图 | P10（`p9`） | 地基（前提）—两根支柱（路径）—两种打法—屋顶（目标）；第1阶段先出一句总述并逐词高亮，第2阶段搭结构；可配“运营前置”说明弹窗 |
| T9 | 台阶路径＋图示弹窗 | P11（`p11`，`stp` 前缀，`stbtn`） | 五级台阶由低到高，每级标题＋一句说明；台阶上的角按钮打开弹窗（全国方格示意图＋四川地图标点、资质三栏）；3个阶段 |
| T10 | 问题收束 | P12（`p12`） | 第1阶段列出前文各页提出的问题卡；第2阶段归结为三个问题并逐一给出回答；第3阶段串成闭环链条，大字收束 |
| E1 | 结束页 | P13（`p13b`） | 楼体淡入；一句落脚语（大字）＋双色短线＋“所讲内容不尽成熟，请各位领导和同事批评指正。” |

**通用小部件**：编号卡 `.p4k`、分组标签 `.ctag`、深蓝小结条 `.p4sum`、数字滚动 `.cnt`、胶囊按钮 `.p6btn`、角按钮 `.stbtn`、弹窗卡 `.p8card`、大字结论 `.bigc`、文件缩略图 `.docthumb`（引用政策文件时，右侧放文件首页截图）。

## 四、动画、镜头与字幕规则

- **节奏**：一页2—4个阶段（单击），每阶段内元素间隔0.3—0.7秒依次出现；整页自动部分不超过约20秒。
- **结论条**：每个阶段都更新底部结论条：左侧2—4字关键词（如“现象”“原因”“结论”），右侧一句话；最后一句用 `capSet(...,true)` 加粗作为本页结论，与脚本“核心句”一致。
- **大字结论**：遮罩＋居中大字＋飞入结论条，只用于章节性判断页，全篇三四次为宜。
- **镜头**：`camTo(s,中心x,中心y,倍数)` 推拉，倍数一般1.03—1.25；时间轴类可到2.0；每段推移1.6—2.4秒；阶段结束 `camReset` 回全景。
- **强调**：红色只用于关键词、“我们在此”、最终结论键；进入程度用填充深浅表示，不用红黄绿区分好坏。
- **数据弹窗**：标题写清口径（时间、范围、项数、金额），数值右对齐，占比用横条，最大值撑满。

## 五、放映交互标准（引擎已实现，新稿必须保持）

- **开始放映**：首页底部“开始放映”按钮。左键单击、翻页键、F5 → 翻页笔模式并全屏；右键单击按钮 → 弹出菜单选择“翻页笔模式 / 点选模式”。
- **翻页笔模式**：左键、→、↓、空格、回车、PageDown 都是“下一步”；每按一次只前进一步：未播的阶段 → 播放；正在播 → 快进到本阶段终态；全部播完 → 翻页。弹窗按 `POPS` 纳入顺序：按一下打开、再按一下关闭。
- **点选模式**：弹窗不入顺序，由鼠标点页面按钮打开，再点一次或点×关闭；点按钮不触发翻页。
- **后退**：右键、←、↑、PageUp、Backspace；先退回本页上一阶段（直接落到该阶段终态，不倒放），再退到上一页（落到最终画面）。
- **Esc 导航**：左侧缩略图列表（按章节分组）；单击＝右侧预览该页最终画面，再按 Esc 回到打开导航前的那一页；双击＝跳到该页最终画面并关闭导航；“重新播放本页”才从头重播；“退出放映”退出全屏。
- **黑屏**：B 或句号键切换黑屏，任意键恢复。
- **鼠标**：放映中静止2.5秒自动隐藏。
- **打印**：打印时每页自动定格为最终画面，导航、按钮、弹窗、黑屏层均不打印；打印后恢复原状态。
- **翻页转场**：左右平移淡入，480ms。

## 六、页面动画写法（每页一个函数）

```html
<section data-t="页名" data-g="01　章节名" class="slide cine light"
  data-cine="p4" data-steps="1" data-phases="3" data-fk="结论" data-ft="本页最终结论一句话">
```
- `data-t` 导航页名；`data-g` 导航分组（章节变化时写）；`data-phases` 本页单击次数（含进入时自动播放的第1阶段）；`data-fk / data-ft` 定格时底部结论条的关键词与文字。
- 脚本写 `window.PH_p4=function(s,n,instant){...}`，模板见 starter 中 `PH_demo3`、`PH_demo4`：
  - `T(毫秒, 函数)` 排程；结论大字飞入等必须完整播放的步骤加第三参数 `'c'`；
  - 动画元素用 `.an`（淡入）或 `.rv`，`on(el)` 显示；
  - 最后一阶段末尾 `st.done=true`；保留 `if(instant&&n<P){st.done=false}`。
- 弹窗纳入翻页笔顺序：在 `const POPS={...}` 里登记，如 `p11:{1:['sXY'],2:['sQZ']}`（第1阶段后开 sXY，第2阶段后开 sQZ）。

## 七、负面清单（本次踩过的坑）

1. 同一按钮绑定两套点击处理 → 再点不关闭。弹窗只用 `data-pop` 一套处理。
2. 重要文字放在 `.clip` 里靠边处被裁切 → 放到 `.clip` 外。
3. 导航预览时动画被暂停导致字幕不显示 → 预览页加 `.pvfin` 放行。
4. `<i>` 做按钮高度为0 → 用 `<span>`。
5. 定格（cineFinal）时把常驻元素的 `on` 去掉 → 常驻元素不要依赖动画类显示。
6. 页码写死“/ 13” → 用总页数自动计算（starter 已改）。
7. 改了页面忘记重生成导航缩略图 → 每次改版后运行 make_thumbs。
8. 改完忘记把文件发给用户 → 每次改完必发。
9. 大图重复内嵌导致文件过大 → 楼体等大图用压缩版（`img/building_q.png`）。

## 八、交付清单

- `演示稿_放映版_点击播放.html`（单文件，图片全部内嵌，离线可用）；
- 需要时附：逐页截图PDF、源代码精简阅读版（图片编码替换为“省略第×张图片”）。

三个实例

入门操作：让Agent做成第一件事

• 选工具　先用现成的Agent工具（如Claude、Codex），不必一开始自己搭
• 给地方　划出一个专用工作文件夹，只让它在里面操作
• 给任务　从一件固定的小事做起，如每周整理下载的文件
• 写规范　做顺以后，把要求写成第一份SKILL.md，下次直接调用
• 改规则　执行走样时修改规则，让它重新学习，而不是每次口头纠正