单页网站制作（Single-Page Site Builder）

用途

把一份资料（人物、赛事、产品、作品集、企业介绍）沉淀成一个零构建依赖、可双击打开的自包含单页静态网站，并在网络受限的环境下抓到真实、版权风险可控的图片素材。

核心约束（用户约定，务必遵守）：

• 纯静态单页优先：一个 index.html + 一个同级资源目录，不引入 npm / Vite / Webpack 等构建工具。
• 零运行时依赖：不依赖 CDN 上的 jQuery / Bootstrap / Owl Carousel / WOW.js。交互（汉堡菜单、轮播词、跑马灯、数字滚动、滚动渐入）一律用原生 JS + IntersectionObserver 自己实现。
• 输出目录：<用户指定目录>\<项目名>\index.html。用户历史约定为 D:\网页制作\<项目名>\；若当前工作区不同，则落在工作区的 <项目名>/ 下，并在交付时说明路径。
• 中文语境：金融/数据类页面遵循"涨红跌绿"，货币用 ¥。

何时使用

• "帮我做一个关于 XXX 的网页 / 单页 / 致敬页 / 作品集"
• "把这些资料做成一个 HTML 页面"
• "照着这个模板站（模板王 / 参考站）做一页"
• "页面缺图，帮我去网上找素材 / 下载图片"
• 需要把一个已有 HTML 模板的设计语言复刻成自包含版本

不要用于：多页应用、需要后端/数据库的产品、需要构建体系的工程化前端项目。

工作流

Phase 1 — 立事实与定风格（不要跳过）

1. 核实事实：人物/赛事/产品类页面必须联网核实关键数据（生涯统计、时间线、荣誉、最新动态），并标注"截至 YYYY-MM"。不要凭训练数据写数字，过期数据会直接毁掉页面可信度。
2. 列内容骨架：Hero（含一个"记忆点"）→ 数据带 → 时间线/生涯 → 图集 → 语录/引文 → 页脚。先定骨架再写样式。
3. 定设计语言：从 references/design-languages.md 选一套。没有参考物时用「体育大报 / Sports Broadsheet」（适用人物志、赛事、纪实），或让用户给出主色 + 气质关键词。
4. 明确"一个记忆点"：每页只做一个让人记住的视觉动作（被视口裁切的巨型镂空数字、无缝数据跑马灯、斜向光带……）。记忆点只能有一个，多了就乱。

Phase 2 — 抓素材

先读 references/asset-sourcing.md。要点：

• 沙箱走白名单代理，维基媒体 / GitHub / Imgur / Pinterest 一律不可达，不要在这上面浪费调用。
• 按该文档里的可达域名表与已验证套路取图（NBA CDN、TheSportsDB API、图集站、壁纸站直链 + Referer）。
• 目视筛选用拼版：不要逐张 Read 图片。用 scripts/contact_sheet.py 把几十张候选拼成一张带文件名标签的联络表，Read 一次即可批量筛选。
• 下载用 scripts/fetch_assets.py（自动带 UA/Referer、失败重试、生成清单），不要用 curl 往含中文的路径写文件。

Phase 3 — 落地页面

1. 写单文件 index.html，内联全部 CSS；资源放同级目录（如 images/、fonts/）。
2. 字体：优先系统字体栈；需要自定义字体时先确认 CDN 可达（fonts.googleapis.com / cdn.jsdelivr.net），否则降级到 思源黑体 / PingFang SC / Microsoft YaHei。
3. 交互一律原生实现：
   - 滚动渐入：IntersectionObserver 加 .in 类，CSS 做位移 + 透明度过渡。
   - 跑马灯：双份内容 + CSS translateX 动画（或 requestAnimationFrame）。
   - 数字滚动 / 圆环计数：进入视口后用 requestAnimationFrame 插值。
   - 汉堡菜单：classList.toggle + CSS transform: translateX()。
4. 加 @media (prefers-reduced-motion: reduce) 降级，动画全部关掉。
5. 响应式断点 ≥1200 / ≥992 / ≥768 / <768 四档即可，标题字号用 clamp()。

Phase 4 — 自检

• [ ] 断网（CDN 不可达）时布局不塌：关键字体/图片有本地或系统降级。
• [ ] 图片全部有 alt，首屏以下的图加 loading="lazy"。
• [ ] 无 console 报错；无 jQuery / Bootstrap 等外部 JS 依赖。
• [ ] 事实性数字与时点标注齐全（"截至 YYYY-MM"）。
• [ ] 交付时说明访问路径；本地预览用 python -m http.server 起服务再 present_files。

环境陷阱（Windows + 沙箱 Bash）

• Bash 工具默认 PATH 为空，每条命令开头先加：
  export PATH="/usr/bin:/bin:/c/Windows/System32:/c/Windows:$PATH"
• /tmp 不存在，临时文件落在工作区内，建议建 _tools/ 目录。
• 含中文的路径不能直接 curl -o 写入（会失败或乱码）；用 scripts/fetch_assets.py（Python 写中文路径没问题），或先下到 ASCII 路径再用 Python 搬运。
• 图片目视筛选、批量裁剪统一走 Pillow；Pillow 可以从 PyPI 装到托管 venv：
  C:\Users\Administrator\.workbuddy\binaries\python\versions\3.13.12\python.exe -m venv C:\Users\Administrator\.workbuddy\binaries\python\envs\default
  再 pip install pillow。

套用现成模板（模板王 / 参考站）

拿到一个下载好的模板时，外层往往只是 iframe 预览壳，真正的内容在 _files/index.html。复刻步骤：

1. 从 _files/ 里抠出设计令牌：背景色阶、强调色、标题/正文字体与字重、圆角、阴影、间距节奏。
2. 盘点"招牌组件"（例如 header-top 汉堡滑出、header-area 大字 banner + 轮播词、serviceBox3 左侧渐变推入、counter 圆环计数、box 斜向光带、newsBox 双弧渐变上涌、footer-area 渐变左栏），逐个用原生 CSS/JS 重建。
3. 只借构图与视觉语言，不搬模板的 JS 依赖；文字与图片换成用户自己的内容。
4. 交付自包含单页：1 个 HTML + 一个资源目录，无 jQuery / Bootstrap / Owl / WOW。

两套可直接照抄的设计语言规格见 references/design-languages.md。

文件索引