通用模板 → 主题官网改造

这个 skill 解决什么

拿到一份多栏目、内容空泛的通用 HTML 模板（如影视热播、新闻资讯模板），把它收敛成单主题、内容扎实、视觉统一的官网。核心不是"改文字"，而是四件事：拆模板、换内容、补配图、加主题层。

已验证的完整实例见 references/case-xiyangyang.md（模板王 22919「影视视频热播平台」→ 喜羊羊角色官网）。

何时使用

• 用户提供一份 HTML 模板压缩包 / 模板站预览页，要求改造成某个具体主题的站。
• 用户想做角色资料站（IP 人物、动漫/游戏角色、历史人物）。
• 用户只有少量原图（几张立绘/截图），却需要一整站尺寸各异的配图。
• 用户要求"这套站的图都按这个风格生成"。

不适用：从零设计站点（无模板）、纯静态文档站、需要后端数据的应用。

三条核心原则

1. 绝不动模板的 style.css / main.js。所有自定义写进独立的 主题前缀.css 和 主题前缀.js，在模板文件之后加载，靠覆盖与 CSS 变量生效。这样模板升级/替换不影响定制层，出问题一眼能定位。
2. 配图全部由脚本生成，不手工 P 图。用 scripts/build_images.py 从一个 sources/ 目录的少量原图，批量产出 hero 大图、海报、透明立绘、模糊底图、画廊图、favicon、OG 封面。可复跑、可微调、可换主题。
3. 内容结构先定、再填字。先按模板已有区块确定"这个主题需要哪些信息"，再去抓取/整理素材，最后才对号入座改 HTML。

六阶段工作流

阶段 1 · 拆解模板

1. 解压压缩包。模板站（如模板王）导出的通常是外层预览页 + _files 目录，真正能改的是 _files/index.html 及其 style.css、assets。
2. 抽出干净的工程骨架：把 index.html、style.css、assets/{css,js,img,webfonts} 独立成 <主题>官网/ 目录，丢掉外层预览页、demo 脚本、埋点 JS。
3. 通读模板 style.css 顶部的 CSS 变量（--theme-color / --body-bg / --color-dark / --theme-bg2 等）——这是后面换肤的抓手。
4. 记录模板的区块清单与类名（如 hero-section、movie-area、choose-area、cta-area），后续改内容全靠这些锚点。
5. 清理模板自带的无用资源（示例图、多余栏目），但先备份一份原始模板。

细节与目录结构见 references/workflow.md。

阶段 2 · 定义主题与内容结构

1. 从模板区块映射出主题所需信息。角色站典型映射：
   hero→主视觉+一句话定位、档案区→基本信息表、特点区→性格标签+数据、Tab 区→能力/道具/座驾、轮播区→代表作、关系区→人物关系、时间线→成长经历、画廊→图片欣赏、chips→作品年表。
2. 抓取/整理素材：角色类首选百度百科（信息权威、结构化），品牌类用官网/百科。逐条核对不要臆造。
3. 建立"文案 → 模板区块"对照表，明确每块放什么。区块 HTML 骨架见 references/section-recipes.md。

阶段 3 · 生成整套配图

1. 把原图放进 sources/，写一份 config.json（见 scripts/config.example.json）描述每张图的用途。
2. 运行：
   bash python scripts/build_images.py --config config.json --src sources --out site/assets/img
3. 脚本覆盖的技术点：cover 裁剪、焦点偏移裁剪、可读性渐变遮罩（左深右透，保证 hero 文案清晰）、海报（透明立绘贴渐变底）、模糊压暗底图、PIL 手绘 favicon、OG 分享封面。
4. 参数含义与调参经验见 references/asset-pipeline.md。

阶段 4 · 改写 HTML 内容

1. 保留模板标签结构与类名，只替换文本、图片路径、href 锚点。
2. 中文化微调：标题字距、段落 max-width、hero 文案行高，写进主题层 CSS 而非模板 CSS。
3. 统一锚点：所有 nav / footer 链接指向 #区块id，并给 [id] 加 scroll-margin-top 避开吸顶导航。

阶段 5 · 主题扩展层

1. 新建 <前缀>.css（约 600 行量级），覆盖配色、卡片、时间线、画廊、chips 等定制样式；全部走 CSS 变量，方便换色。
2. 新建 <前缀>.js（约 60 行量级），补齐模板缺的交互：预加载兜底、移动端菜单自动收起、滚动高亮当前导航、图片懒加载、占位点击反馈。
3. 内联 SVG 做 logo：直接写 <svg> 画主题徽标 + 文字，比位图轻、可随主题变色。
4. 命名规范与代码模板见 references/theme-overlay.md。

阶段 6 · 自检与交付

• 用本地静态服务器打开 index.html 截图核对各区块。
• 检查断点：窄屏 hero 渐变靠 CSS 补齐、信息表在超窄屏转单列、时间线左轴缩进。
• 检查所有图片路径存在、无 404；favicon、og:image 生效。
• 交付：<主题>官网/ 目录 + 一份 README（素材来源、生成命令、如何换主题色）。

资源索引

常见坑

• 直接改模板 style.css：换模板就全丢。务必用独立主题层。
• hero 图没做渐变遮罩：文字压在复杂画面上不可读，窄屏尤其严重。左侧渐变 + 窄屏 CSS 兜底缺一不可。
• favicon / OG 忘记生成：分享卡片和标签页图标是完成度的门面。
• 文案臆造：角色/人物类信息必须可溯源（给出来源链接），不要编造年限、集数、亲属关系。
• 图片路径大小写：Windows 下不区分，部署到 Linux 会 404，统一用小写与短横线。
• 锚点跳动被导航遮挡：给所有 [id] 加 scroll-margin-top。