---
name: html-one-pager
description: 为 JCAI 活动设计并产出可直接在浏览器打开的 standalone HTML one-pager 目标件(活动执行页/验收页/汇报页)。照仓里 PRD 方法论做「带脚本演示页」:JCAI 家族版式(PRD_CSS 三层壳)、写死示例数据、可带演示脚本让编辑态活起来;零外链,尾部带平移指引,可按《HTML报告生成规范》平移进活动包。只要用户提到:给某个活动(A1-A7 或新活动)做执行页、验收页、工单页、one-pager、目标件、报告设计稿、HTML 样稿,或要求「把活动报告做得精美/有设计感/突出结构」——即使没说 one-pager 三个字,也要用本技能。
---

# html-one-pager —— 活动执行/验收页的目标件

## 定位:设计答案,不是提前交付的模版

产出 = 一份 standalone .html,照仓里 PRD 目标件的方法论做成**带脚本演示页**:
浏览器直接打开、示例数据写死、演示脚本让编辑态与重算活起来(仓里两份 A1 原型
`~/coding/JCAI_PRD/docs/活动执行页/` 就是这么做的)。设计定稿后由活动开发者按
`docs/HTML报告生成规范.md` §7 平移进活动包 —— 剥脚本、换绑定,不归本技能管。

实测教训(2026-08-03 一轮评测得来的):模型 + 仓库本身就能出用户认可的好件,
**版面与信息设计不需要本技能立规矩** —— 立多了反而把件做小(列缩到现有台账、
数字照存储口径摆、按钮是死的)。本技能只补三样:**省力**(装壳脚本)、
**可平移**(平移指引)、**底线**(自检)。其余放开发挥。

## 四步

### 1. 看范本定基调

打开整件读版面节奏(抄节奏不抄字):

- 文件件基调:A1 `activities/quote-intake/src/views/report.ts`(执行/验收/归档三张)
- slide 基调:A2 `activities/quote-alternative/src/views/report.ts`(一页一屏、深空 hero)
- 原型出处:`~/coding/JCAI_PRD/docs/活动执行页/`(带脚本演示页的原始形态)
- 组件名录:`references/block-catalog.md`(点菜用,以仓内源为准)
- 业务素材:`docs/MVP示例工作流.html`(示例数据要像真的)

可选:跑 ui-ux-pro-max 拿设计方向(`references/uipm-recipes.md`,注意五不取:
字体外链/JS 库/换色/图标库/CDN —— 查询结果只进脑子不落盘)。

### 2. 装壳

```bash
python3 <本技能目录>/scripts/assemble.py --out draft.html \
  --activity <目标活动id> --title <件名> --kicker "统一报价 · <活动> · <身份>"
```

PRD_CSS 约 30KB,**手搬必静默截断**,所以走脚本抽。目标活动自带 `views/prd-style.ts`
时优先抽它自己的,缺了落回 A1。

### 3. 设计上行,尽情画

- **业务需要什么就摆什么**:来源标签、档位列、命中留痕、数轴、走廊图 —— 不受现有
  台账声明限制。现有台账没有的列,**不缩版面**,记进平移指引的「建模欠账」清单
  (目标件本该驱动建模:A1 就是先画件、后立表的)。
- **数字按人读形态摆**:9.2% 不是 0.092,让价 −0.17 元不是裸差值;台账口径与呈现
  口径不一致的,也记欠账。判定表带「本单命中留痕」(哪条规则命中了哪几颗料)。
- **演示脚本可以有**:集中在 `<script>` 标签里(不写内联 `on*=`,平移一剥就净);
  初始画面不靠脚本也完整(脚本只做演示交互:开编辑、改数重算、切状态)。
- **能映射现有台账的格子,顺手预埋真钩子**(`data-slot`/`data-col`/`data-edit`,
  语义见规范 §4/§6)—— 省平移的事,但**不为它牺牲版面**。
- 家族底线:令牌不换色(--brand #3370ff 等)、三层壳一层不少、图标一律精灵 SVG
  (缺的照 lucide 线稿新增 symbol)、无外链、报告上不摆英文内部名、无 emoji。

### 4. 自检交付

```bash
python3 <本技能目录>/scripts/check.py draft.html
```

13 条底线全绿(它不判设计,版面好不好交给人眼);浏览器打开截图走查一遍。
交付单文件,尾部**必带**「平移指引」注释段(骨架自带固定格式):取哪段、剥什么
(脚本/示例值)、建模欠账清单、钩子键名对着目标活动 `manifest.ts` 核一遍。

## 陷阱速查

| 症状 | 根因 → 出路 |
|---|---|
| 整张样式一条不生效 | 三层壳少了一层 → `.proto-root>.app-shell>.jc-stage>article.jc-report` 一层不能省 |
| 版面「像又不像」家族 | PRD_CSS 手搬截断(样式半死极难定位)→ 用 assemble.py;或没读范本自创版面 → 整件抄节奏 |
| 平移后行为丢了一半 | 演示行为写成了内联 on*=,散在标记里剥不净 → 全部集中进 script 标签 |
| 平移时不知道哪些列是编的 | 设计上行摆了台账没有的列却没记账 → 平移指引里「建模欠账」逐列点名 |