个人主页 · 单文件 HTML
Overview
把一个真实的人（或角色）资料，快速做成一个零依赖单文件网页：全部 CSS/JS 内联，图片用相对路径，
双击即可离线打开，方便直接发给别人或丢到任意静态托管上。视觉走「主题色 + 衬线体大标题 + 大留白」的
杂志/画册路线，而不是常见的 Bootstrap 模板味。
核心资产是 assets/template.html：已含全部样式与交互，所有待填文案都是 {{TOKEN}} 占位符。
使用时不要从零写 CSS，而是复制模板到目标目录后逐项替换占位符。
何时使用
- 用户说「给 XXX 做个个人主页 / 个人介绍网页 / 作品集页面 / 粉丝站」
- 用户提供了某个人的简历、照片，希望「做成一个网页」
- 需要一个能离线打开、可单文件分发的落地页（而非 React/Vue 工程）
不适用的场景：需要多页面/后台数据/表单提交的站点 → 改用正式的 Web 应用 Skill。
工作流程
第 1 步：收资料，先判断「够不够开工」
最小可开工集：姓名 + 一句话身份 + 1 张主图 + 200 字左右介绍 + 3 张以上配图。
缺东西不要卡住：按 references/content-guide.md 的优先级清单向用户一次性提问（最多一次追问），
其余用公开信息整理或留白，绝不允许编造履历、奖项、日期、数据。
整理的资料不确定的，先在页面页脚注明「资料来源于公开报道，仅供学习交流」+ 待核实项，
并在交付时口头告知哪些数字是占位/待用户确认。
第 2 步：准备图片
在目标目录建 img/（或 images/），优先使用用户给的原图；缺图时用占位色块或纯 CSS 渐变代替，
不要引入外链图床（会破坏离线可用）。
| 用途 | 建议 | 说明 |
|---|---|---|
首屏背景 HERO_IMG |
横构图 ≥1920×1080，主体偏上 | 会被 object-position:50% 28% 裁切；脸在正中间的图最稳 |
关于区 ABOUT_IMG |
竖/方构图，高 ≥900 | 容器高 560px、object-position:50% 22% |
| 图集 9 张 | 统一长边 ≥1200 | 尽量同一修图色调；混 1–2 张 .webp 无妨 |
第 3 步：生成页面
复制模板到目标目录（文件名取 index.html 或 <姓名>个人网页.html），然后逐项替换占位符：
cp <skill>/assets/template.html "<目标目录>/index.html"
替换要点：
{{HERO_LEAD}}、{{ABOUT_P1}}、{{ABOUT_P2}}属于富文本槽位，可以内联<b>做强调（每句 1–2 处即可）。{{STAT_n_UNIT}}不需要就留空字符串（统计单位如+/%/万）。- 历程建议 6–10 条（
{{EVENT_n_*}}共 9 组，多余的整块.tl-item删掉即可）。 - 图集默认 9 格 3×3，
{{ITEM_n_*}}共 9 组；删/增都行，但保持.g-item数量是 3 的倍数。 - 分类必须闭环：
{{ITEM_n_*}}的data-cat只能取cat1/cat2/cat3，且与.filters button[data-f]双向对应
（有按钮无图＝点了空白；有图无按钮＝永远筛不出）。 - 没有社媒账号时，把
.f-social+.soc-panel两个块连同脚本末尾socBtn那段逻辑一起删除。
第 4 步：自检（必做）
python <skill>/scripts/check_page.py "<目标目录>/index.html"
脚本会查占位符残留、本地图片是否真的存在、锚点与 id 是否闭环、必备区块是否齐全、
分类是否双向对应、计数 data-to 是否为整数、网格是否为整齐倍数。有 ERROR 必须修完再交付。
然后务必实际渲染确认：用 present_files 打开页面让用户看到；涉及「点击后才显示」的内容
（社媒账号行、灯箱、筛选）要真实点一遍——只看源码不算验过。
第 5 步：交付
present_files 给出 HTML（必要时连 img/ 一起打包 zip）。口头说明：文件路径、主题色、
哪些信息是待用户核对的、如何换主题色/增删区块。
定制与换色
- 换主题色：只改
:root里的--c-50 … --c-900十个色值即可，其余样式全部引用变量。
references/design-system.md里直接给了 4 套可直接粘贴的配色（青瓷蓝 / 墨黑描金 / 朱丹红 / 松墨绿）。 - 增删区块：8 个区块彼此独立，整段
<section>剪切即可；删除后同步改导航与页脚链接，
再跑一次check_page.py（会报锚点失效）。 - 改布局/字号：
references/design-system.md记录了各区块背景色顺序、动效清单、响应式断点，
改动前先看一眼，避免破坏首屏与移动端。
关键约束
- 零外部依赖：不引 CDN、不联网字体、不用
<link>。这是「双击即开」的前提。 - 图片一律相对路径（如
img/1.jpg），不用file:///绝对路径，否则换机器全挂。 - 不要为了填满设计而编造数据、奖项、时间节点。编造＝不可接受。
- 尽量别用可视化编辑器打开生成的页面：某些编辑器会往每个标签注入
data-page-node-id，
把源码污染成两倍长度（check_page.py会提示）。要改就用文本编辑。
Resources
assets/template.html— 主模板，含全部 CSS/JS 与 209 个占位符。替换即可，勿重写样式。references/design-system.md— 色板、字体、间距、动效、响应式断点、4 套备选配色。references/content-guide.md— 资料清单优先级、各区块文案写法、完整占位符表、图片规范。references/pitfalls.md— 已踩过的坑（矮视口重叠、触屏无 hover、灯箱大图路径等）。scripts/check_page.py— 交付前体检脚本。
