Person Profile Website（人物介绍网页）
Overview
为任意人物生成高质量的介绍网页，产出两种可选形态：
- 人物档案页（核心产出）：单文件 HTML，浅色主题，自带内联样式，无外部依赖，结构为 Hero → 信息速览 → 简介 → 时间轴 → 事件卡片 → 小结引言 → 口径说明。
- 网站版（可选，需要参考模板）：单文件 HTML，照片 base64 内嵌，复刻用户提供的参考网页（如保存的网站模板）的设计语言与动效。
完整成品实例见 assets/example-archive-page.html（Angelababy 人物档案页，作为版式与口吻的对照样本）。
工作流总览
按以下五个阶段顺序执行。开始前先确认三件事：目标人物、用户提供的照片素材、是否有参考模板（决定是否产出网站版）。
阶段1 资料收集与口径核实 → 阶段2 照片素材整理 → 阶段3 生成人物档案页
↓（有参考模板时）
阶段4 生成网站版
↓
阶段5 收尾与交付
阶段1：资料收集与口径核实
- 用 WebSearch/WebFetch 检索人物生平，以百度百科等公开资料为主，交叉核对维基百科等其他来源；重大事件至少两个来源印证。
- 口径三原则（必须遵守，写入页面末尾的口径说明）：
1. 存疑信息（如出生地有两说）并列标注，不擅自取其一；
2. 争议数字（婚礼花费、销售额、代言损失等）标注为"媒体估算"，不写成事实；
3. 争议事件按"疑似/传闻 + 官方澄清 + 实际后果"三层客观陈述，不作定性评价。 - 在写作中提炼人物叙事主线（例如"流量造神与祛魅的完整样本"），贯穿 Hero 文案与小结。
阶段2：照片素材整理
- 照片统一存入工作区
assets/，语义化命名：p1-white-shirt.jpg、p2-beret.jpg这类"序号-视觉特征"格式。 - 逐张记录照片的视觉特征，并规划安置位置（首屏 / 速览区 / 各时期章节 / 画廊），安置原则：最有辨识度的照片进首屏，其余按内容对应的时间阶段分配，画廊收纳全部。
- 若用户未提供照片，先向用户确认是否需要联网搜集，以及使用哪些。
阶段3：生成人物档案页（核心产出）
- 加载
references/archive-page-spec.md，按其中的设计 token、章节结构、HTML 片段模板生成。 - 硬性要求：单文件 HTML（内联全部 CSS，无外链）、浅色主题、中文简体、移动端可用（760px 断点）。
- 配色必须从人物照片主色提取，不要套用默认色：从照片中取 1 个主强调色（如玫瑰陶土
#b0736a）+ 1 个次强调色（如淡金#a98b5b），底色用暖米白#f7f5f2系；具体 CSS 变量体系见 spec。 - 章节结构（编号 01/02/03…）：Hero 概览 → 基本信息速览（三列网格）→ 平生简介 → 成名/生平过程时间轴（5-7 阶段）→ 破圈/关键事件卡片（2 列网格）→ 档案小结引言 → 资料来源与口径说明（虚线边框 note）。
- 产出文件命名：
{人名}_人物档案.html。
阶段4：生成网站版（有参考模板时）
- 加载
references/site-effects-spec.md，按其中的动效提取方法与实现清单执行。 - 从参考模板提取的信息：章节骨架、动效清单、遮罩/菜单等交互模式。提取方法：分析模板存档的
*_files/目录（真身通常是 iframe 引用的index.html+style.css）。 - 关键决定原则：保留阶段3确定的档案配色体系，把模板自身的主色（如
#fe4274粉）替换为人物主色；黑色遮罩rgba(0,0,0,.8)调暖为与主色协调的深色（如rgba(34,31,28,.78)）。 - 照片全部 base64 内嵌为单文件（无 assets 依赖，可独立分发）；
assets/留照片原件副本。 - 动效必须逐项实现并用浏览器实测：全屏弹出菜单、首屏 3D 倾斜、逐字跳动、画廊悬停遮罩、滚动渐入 + 进度条、分类筛选、回到顶部。具体 JS 实现片段见 spec。
- 产出文件命名：
{人名}_人物网站.html。
阶段5：收尾与交付
- 用 present_files 打开成品 HTML 预览，向用户展示。
- 在工作区 memory 日志（
{workspace}/.workbuddy/memory/YYYY-MM-DD.md）追加：产出文件路径、复刻的模板与动效清单、配色决定、口径决定、照片安置方案——供下次续做同一人物或同类任务时复用。
Resources
references/archive-page-spec.md— 档案页版式规范：设计 token（CSS 变量）、章节结构、各节 HTML/CSS 片段、响应式规则、口径说明模板。阶段3 必读。references/site-effects-spec.md— 网站版规范：模板动效提取方法、七项动效的 JS 实现片段、配色替换原则、base64 内嵌方法、章节骨架。阶段4 必读。assets/example-archive-page.html— 完整成品实例（Angelababy 人物档案页），用于对照版式细节与文案口吻。
