单文件网页构建

把「一份参考资料 + 一堆散装素材」变成「一个零依赖、能直接双击打开的单文件网页」。

何时使用

• 用户给出素材（照片目录 / 压缩包 / 零散文件），要一个成品个人主页或展示页
• 用户给出一个参考网页（常见于模板站的在线预览页），要求「照这个做一版」
• 用户提到粉丝应援页、作品集、单页展示站、个人主页

不适用：需要后端、登录、数据库的多页应用；需要构建工具（React/Vite）的工程化项目。

硬约束（不得违反）

1. 零外部依赖：不引 CDN、不引统计脚本、不引外部字体文件。字体只用系统字体栈。
2. 单文件 + 相对路径：结构为 <项目名>/index.html + <项目名>/images/*。
   禁止绝对路径（C:\...）与在线图片地址。
3. 路径全 ASCII：图片一律重命名为 p1.jpg … pN.jpg，中文文件名跨平台易 404。
4. 不跳自检：scripts/verify.mjs 退出码非 0 时不得交付。
5. 涉及真人真事必须加免责声明（见「交付说明」）。

执行流程

完整步骤、验收标准与踩坑表见 references/workflow.md，按阶段执行：

1. 澄清需求 —— 一次问完三件事：主角与受众、素材位置、是否有参考模板。素材若已在工作区，自行 ls 查找，不要反问。
2. 盘点素材 —— ls -la 看命名与体积，file 确认真实格式（扩展名经常造假），标出竖版人像。
3. 吃透参考 —— 若参考页是保存的在线预览壳（含 saved from url= / <iframe>），真正内容在 *_files/index.html 里。只提取配色、字体、区块顺序，不照抄它的 CSS 与编辑器残留属性（data-page-node-id 等）。
4. 规整素材 —— 建 images/，按序复制重命名为 p1.ext …。原素材目录保持不动。
5. 写单文件 HTML —— 先定 :root 设计令牌，再写结构，最后写交互。
6. 机器自检 —— 运行校验脚本，修完所有 ERROR。
7. 交付预览 —— 用 present_files 打开 index.html，并说明替换照片的方法。

可用资源

参考实现的图片在 assets/demo-xiaozhan/images/，可直接拿来做本地渲染验证。

设计体系（默认）

暗色电影感：深黑底（--ink:#0a0a0c）+ 香槟金强调（--gold:#c8a86b）+ 应援红点缀（--red:#b8382f）；
中文标题用系统衬线，英文点题用 Didot 系并大幅拉开字距（letter-spacing:.24em~.62em）；
所有过渡统一 cubic-bezier(.2,.7,.2,1)。

用户若给了参考模板，只借用其配色与字体，结构仍按本体系的七区块叙事走：
亮相 → 铺情绪 → 讲人 → 列证据 → 给视觉 → 收荣誉 → 免责。

用户若要换色系，只改 --ink / --gold / --red / --text / --line 五个变量。

交付前的机器自检

node scripts/verify.mjs <项目名>/index.html

检查图片引用是否存在、id 是否重复、锚点是否有效、是否残留外部依赖、标签是否成对闭合、单图体积是否超限。
有 ERROR 必须修完重跑；有 WARNING 需在交付说明里向用户提及。

交付说明必含三点

1. 文件位置：<项目名>/index.html 双击即可打开，无需服务器。
2. 换素材：把自己的照片按同名覆盖 images/pN.jpg，同步改 alt 与 figcaption 文案即可。
3. 免责声明：涉及真人的页面已加入页脚说明；若为商用请自行确认图文版权。