单文件人物专题站生成器

把一个主体（歌手、演员、作家、品牌、事件……）的照片与公开资料，做成一个零依赖的单文件 HTML 网站：
index.html 内联全部 CSS 与 JS，素材放同目录 assets/，双击即可离线打开，也可直接挂到任意静态托管。

产出形态

<站点目录>/
├── index.html          单文件站点（全部 CSS/JS 内联，≈130–180 KB）
└── assets/
    ├── hero-bg.jpg     首屏虚化背景（1920×1080）
    ├── poster-a~d.jpg  卡片背景（1280×1920）
    ├── photos/NN.jpg   网页版原图（限宽 1400，q88）
    └── thumbs/NN.jpg   网格缩略图（宽 400，q80）

何时使用

• 用户给一批照片（webp/png/jpg）要求做成网站、专题页、官网、影像志、纪念页。
• 用户要求「单文件 HTML」「一个 HTML 能直接打开」「不要框架、不要构建」。
• 已有页面要沿用本设计语言，需要查设计 token、交互清单或踩坑记录。

不要用于：需要后端/登录/数据库的应用（改走 cloud-service + sites）；纯数据看板（用图表方案更省事）。

工作流

第 0 步 · 勘察

先清点用户给的材料，再决定站点规模。至少确认：

1. 照片数量与内容——逐张看图，为每张写一句画面描述（后面图注直接用它）。
2. 主体信息——出生/成立年份、代表作品、关键时间节点、合作者、关系人。
3. 有没有不可信素材——拼接图、AI 合成图、来源不明图。这类必须单独标注，不能混进「官方物料」。

若用户没给资料，联网检索补齐；检索不到的项目宁可留空也不要编，并在核验区块如实写「信源存在出入」。

第 1 步 · 素材预处理

用脚本一次性生成全部衍生图，不要手改尺寸：

python scripts/prep_assets.py <源图片目录> <站点目录> \
  --hero 08 --posters 08,12,11,23

• 自动按文件名数字前缀排序 → photos/01.jpg … photos/NN.jpg + 对应 thumbs/。
• --hero N：取第 N 张生成首屏虚化背景（高斯模糊 + 紫调压暗 + 暗角）。
• --posters a,b,c,d：取 4 张生成 poster-a~d.jpg（裁切 1280×1920 + 压暗 + 降饱和）。

脚本依赖 Pillow。若环境缺失，先建隔离 venv 再装（见 <binary_context> 的隔离规则），不要全局 pip install。

第 2 步 · 内容核验与真伪标注

这是本站的价值所在——不是资料堆砌，而是带可信度标注的资料。所有人物类内容按三级标注：

规则：

• 情感、健康、家庭、收入等敏感且易被编造的话题，一律进「核验」区块逐条判定。
• 传闻要写清它是怎么来的（如「由粉丝编造」「出自自媒体梳理」），而不只是否定。
• 图片同样要判真伪：拼接图标「拼接/待核实」，AI 图标「AI 合成」并说明判定依据（如伪文字、生成痕迹）。

第 3 步 · 基于模板改造

不要从零写页面。 复制基线模板，再替换内容：

cp -r assets/template/* <站点目录>/

然后按顺序改三处，保持 CSS 与 JS 骨架不动：

1. 数据层（最重要，改这一个块就能改掉大半页面）
   const PHOTOS / CATS / BADGE / TIMELINE / ALBUMS / TRACKS / TOURS / RELATIONS / VERIFY / FILM / CHAPS / CITIES
   —— 字段含义见 references/data-schema.md。绝大多数区块是空容器 + JS 渲染，改数据即改页面。
2. 静态文案——<title>、meta description、#hero 的标题与身份行、各 <section> 的 <h2>／导语、页脚。
3. 素材与主题色——assets/ 换成本主体素材；references/design-system.md 给了 3 套配色（紫夜／琥珀／宣纸）与换色方法。

改造锚点速查见 assets/template/NOTES.md；区块顺序与 id 见 references/design-system.md。

第 4 步 · 自审（必做，不能跳）

静态 HTML 里搜不到页面元素是正常的——绝大多数节点由 JS 运行时创建。所以判断「页面是否真的生成出来了」，必须用无头浏览器实测：

python scripts/audit_page.py <站点目录>/index.html --section gallery
python scripts/audit_page.py <站点目录>/index.html --browser "<Edge/Chrome 可执行文件路径>"

脚本会生成审查脚手架 _audit.html（?show=<区块> 隔离单区块、强制 .rv 可见、隐藏 loader），
再用无头浏览器把实测结果写回 document.title 后 --dump-dom，从而读出：

• 各动态容器的实际节点数（.cell / .alb / .trk / .tl-item / .node / .tour / .marquee span / .film-shots .s / .acc .ah）
• 捕获到的 JS 运行时错误

只看截图会骗人，原因见 references/pitfalls.md（动画跑不完、headless 视口被扣高、固定元素错位）。

第 5 步 · 交付

• 先 present_files 打开 index.html 预览，让用户在浏览器里实机试。
• 需要线上链接时再用 sites skill 发布——发布前务必确认素材是静态引用，
  否则远端只会收录 HTML 里直接写到的文件，JS 拼字符串注入的图片会全部 404。

不可妥协的设计规则

这些是让成品不像「AI 生成的模板」的关键，改版时不要推翻：

1. 避开 AI 配色套路——不要「紫→粉→蓝」流光渐变。本站主色紫 #5D3596/#8659C9 + 琥珀金 #C08A2C/#F0CE8A + 冷灰底 #0A0610。琥珀不是随便挑的，它对应主体的核心意象。
2. 中文排版不要用 Inter/Roboto——标题走宋体（--serif: Noto Serif SC），正文走黑体（--sans: Noto Sans SC），拉丁文点缀走衬线（Cormorant Garamond）。古典骨架 + 现代皮肤。
3. 程序生成的图形必须对应真实概念——专辑母题 SVG（motifSVG()）里每个图形都指向该专辑的真实视觉概念，不是随机涂鸦。换主体时同理：母题要有出处。
4. 动态效果要可关——保留 Tweaks 面板（3 套配色 / 3 档动效 / 3 个开关）与 prefers-reduced-motion 支持。
5. 音频不要内嵌——无授权音频不可托管；作品一律跳转官方平台搜索页（模板里是 YQQ()）。

参考文件