单页个人档案 / 作品集网站
这个技能解决什么
把零散的人物资料（生平、作品、奖项、图片）组织成一个单文件、零依赖、可直接分享的中文单页档案网站。
核心是一套已验证的模板：内联 CSS + 内联 JS + 相对路径图片，紫蓝渐变的极简作品集基调，
外加一个可选的深色专题区块用来承载"另一个语境"（游戏代言、赛事、跨界合作等）。
适用场景举例：给一位演员做三十年演艺档案；给一位运动员做生涯履历页；
给一个工作室做团队介绍页；把已有的简陋个人主页重做成有设计的单页。
何时使用
触发：用户提到"给 X 做个人主页 / 档案页 / 作品集 / 一页式介绍"，或上传一份参考模板 / 旧页面要求重构美化。
不适用：
- 需要多页面、后台、数据库、表单提交 → 走完整建站方案（cloud-service 等），本技能只产出静态单页。
- 只需要一段介绍文字 → 直接写，不必建站。
- 需要在线协作文档 → 走腾讯文档类技能。
产物硬性约定
- 单文件：所有 CSS 写在
<style>、所有 JS 写在<script>，不拆分外链文件。 - 零外部依赖：不引用 CDN、字体服务、图标库、统计脚本。断网也能完整显示。
- 图片同级相对路径：图片下载到
index.html所在目录，src="hero.jpg"这种写法。 - 中文内容 + 响应式：默认
lang="zh-CN"，≤960px 与 ≤620px 两档断点必须正常。 - 交付前占位符清零：不得残留任何双层花括号占位符。
工作流
第 1 步：确认主体与边界
确定：主体姓名（含英文名）、身份串、内容边界（哪些能写、哪些不写）、
是否要深色专题区块及主题（例如某款游戏 / 某项赛事）、主题色是否沿用默认紫蓝。
信息不足时按合理默认推进：默认紫蓝主题、保留深色专题区块、内容以公开资料为准。
边界不清时在"关于本站"区块声明页面性质。
第 2 步：采集并核实事实
用 WebSearch / WebFetch 核对：出道年份、代表作品及年份、奖项名称与届数、
出生地与教育背景。年份、届数、奖项名称必须可溯源，无法确认的条目宁可不写。
内容质量红线：不编造作品、不虚构奖项、不写未经证实的私人信息。
涉及第三方 IP（游戏 / 品牌 / 赛事）时，必须保留模板中的免责说明区块。
第 3 步：准备图片
至少 3 张，建议 4 张：
| 用途 | 占位符 | 建议构图 |
|---|---|---|
| 首屏形象照 | {{HERO_IMG}} |
3:4 竖构图，人物居中偏上 |
| 简介配图 | {{ABOUT_IMG}} + {{ABOUT_IMG_FALLBACK}} |
4:5，与首屏不同的场景 |
| 专题区块图 | {{FEAT_IMG}} |
16:10 横构图 |
要求：单张 ≤ 300KB，优先 WebP / JPG；文件名不带空格与括号（重命名为 hero.jpg /
about.jpg / about-origin.jpg / feature.jpg）。
低分辨率图的处理：先用 buddy-image-processing 的 enhance 操作提升清晰度，
再用 Pillow LANCZOS 放大 2–4 倍另存，原图保留作为 onerror 回退。
虚拟环境：C:/Users/wzbc-719/.workbuddy/binaries/python/envs/default（已含 pillow）。
第 4 步：套用模板
复制 assets/onepage-profile-template.html 到目标目录并改名 index.html。
需要看一个"填满的真实成品"时，读 assets/examples/actor-profile-example.html
（已完成的演员档案页，含全部区块的实际写法；其中的图片文件未随技能打包，图片位会留空）。
第 5 步：填充占位符
先枚举全部占位符：
grep -o '{{[A-Z0-9_]*}}' index.html | sort -u
再按区块分组替换：页头 → 导航 → 首屏 → 简介 → 时间轴 → 作品 → 荣誉 → 专题 → 关于本站 → 页脚。
重复块按模板中 ✂ 注释复制或裁剪：
- 时间轴保留 5–7 条，作品卡 6–9 张，荣誉卡 4–6 张，专题卡固定 4 张，关键资料卡 4 张。
- 删除某个整段区块时，必须同步删除导航栏、页脚、首屏按钮中指向该区块
#id的所有链接。 - 无论删不删，导航锚点与
section[id]必须一一对应（自检脚本会查）。
第 6 步：自检
python scripts/verify_page.py index.html
必须输出"结论: 通过"。脚本会检查：占位符残留、外部依赖、锚点悬空、id 重复、
必填 JS 钩子、viewport、本地图片是否存在、section/div/nav/footer 标签是否闭合，
并打印区块顺序与各组件数量，便于和预期结构对照。
失败项必须修完再交付；WARN 项逐条判断，onerror 回退图不存在这类要补齐。
第 7 步：预览与交付
cd <页面目录> && python -m http.server 8899
或直接双击 index.html。最后用 present_files 打开 index.html 让用户看到成品。
内容结构规范
| 区块 | 数量 | 写法要点 |
|---|---|---|
| 导航 | 5–7 项 | 用页面区块名，不要用"首页/关于"以外的泛称 |
首屏身份串 {{HERO_TAG}} |
1 串 | 3–6 个身份词，用「·」连接 |
首屏打字机 {{HERO_ROLES_JS}} |
3–4 条 | JS 数组，每条 6–12 字，覆盖不同侧面 |
首屏导语 {{HERO_TAGLINE}} |
50–90 字 | 一句带判断的概括，不是履历罗列 |
首屏数据 STAT1–3 |
3 组 | 数字 + 单位 + 12 字以内说明（出道年 / 作品数 / 从业年数） |
简介正文 ABOUT_P1–3 |
3 段 | 共 300–450 字：①出身与入行动因 ②代表阶段与转折 ③跨界或当下 |
简介徽章 ABOUT_BADGE* |
4–8 个 | 身份用 .badge，荣誉用 .badge.warm |
关键资料卡 FACT1–4 |
4 张 | 标签 2–4 字，值用「日期 · 地点」式短句 |
| 时间轴 | 5–7 条 | 每条 日期 + 小标题 + 身份/作品 + 60–110 字正文，正序排列 |
| 作品卡 | 6–9 张 | 年份 + 作品名 + 英文名 + 1–2 句看点 + 2–3 个标签 |
| 荣誉卡 | 4–6 张 | 奖项全称（届数+名称+类别）+ 获奖作品与年份 |
| 深色专题 | 1 块 | 2 段正文 + 3 条要点 + 4 张卡 + 免责说明；只放"另一个语境"的话题 |
| 关于本站 | 4 张资料卡 | 页面性质 / 内容范围 / 资料来源 / 技术实现 |
文风：克制的第三人称，每段至少落一个具体事实或作品名，避免"传奇""闪耀""天花板"这类空泛形容。
主题色沿用默认紫蓝；要换色只改 :root 的 --primary、--primary-2、--grad，
并检查 references/design-system.md 第 1 节列出的同色系 rgba() 硬编码处。
常见坑
- 占位符漏替换：模板首行注释里也有说明性花括号，改完后用自检脚本扫一遍最稳妥。
- 删区块忘删锚点：导航/页脚/首屏按钮里指向被删
#id的链接会导致自检 FAIL。 - 图片名带空格或括号：
OIP-C (2).webp能用但易踩坑，一律重命名。 - 动了脚本：
.reveal元素默认opacity:0，若删掉 IntersectionObserver 逻辑，整页内容不可见。 - 深色区块里套浅色类：
.delta内部文字色单独定义，直接复用.section-title会看不清。 - 深色区块滥用：一页最多一个，放在荣誉之后、关于本站之前。
- 事实核实：作品年份、奖项届数写错是最常见也最致命的问题，逐条对过再交付。
资源索引
assets/onepage-profile-template.html— 主模板，含全部区块、内联 CSS/JS 与占位符注释。改动前先通读一遍。assets/examples/actor-profile-example.html— 已完成的真实成品页（演员档案），需要参考具体写法时读。references/design-system.md— 设计令牌、区块清单、组件配方、响应式规则、禁忌事项。scripts/verify_page.py— 单页自检脚本，交付前必跑。
