城市名片生成：从公开资料到可交互单文件 HTML

本页是 PUBLIC_AFTER_REWRITE：公开源案例本身可访问，但本页只重写可追溯的任务结构，不复制原文、完整 HTML 或截图。

1. 场景

城市推介材料常见两种问题：PPT 容易变成数据堆叠，长文章又难以承担“看城市基本面、再继续浏览文旅信息”的连续路径。公开源案例要做的是一份可交互、可复用的城市信息产品，既展示城市实力，也让读者按区块浏览历史、交通、产业、高校、文旅和行程信息。

本页只把它当作一个公开的网站设计任务来拆解，不把城市名片当成 WorkBuddy 的固定产品模板，也不把源案例中的城市事实直接迁移给其他城市。

2. 原始输入

公开源案例明确的输入是：城市名称，以及可选的官方统计公报、政府门户“走进某城”资料和文旅信息。页面中的数据应使用官方公开口径，生成前后都要人工核对。源案例同时要求输出为一个无外部依赖的单文件 HTML，不依赖账号或外部 API。

本页没有复制东莞的数字、图片或原始成品。复用时，输入至少要登记：资料名称、发布机构、发布日期、链接、适用范围、图片/字体授权和需要人工确认的字段。

3. 目标

目标是从公开资料生成一个可以浏览和复用的城市信息页面，并满足以下约束：

• 信息架构覆盖城市速览、发展脉络、区位交通、产业、科创、开放、城市气质、高校、文旅、美食和行程等主题；
• 页面内容由一个数据对象驱动，换城市时不需要重写页面结构；
• 交互和动效服务于浏览，不依赖在线 CDN、外部字体或未授权图片；
• 页面在桌面端和手机端可阅读，数据来源与时效提醒可见。

4. WorkBuddy 使用方式

源案例记录的使用方式是进入设计创意场景并选择“网站设计”，输入城市名、页面结构、资料要求和技术约束；生成后在内置浏览器中预览，再把文件保存到本地检查。这里的“实际使用方式”只采用源案例明确记录的步骤；本页没有补写未公开的对话轮次、模型名称或隐藏配置。

5. 工作过程

Source fact：公开源案例已经说明的过程

1. 以城市名称和官方公开资料作为输入边界；
2. 要求输出单文件 HTML，并把页面文字和数据放进名为 CITY 的 JavaScript 常量对象；
3. 组织 11 个信息板块，并加入进度条、滚动渐入、数字计数、导航高亮和回到顶部等交互要求；
4. 在浏览器预览中逐板块检查数据、导航和响应式表现；
5. 解决首屏数字计数、卡片对比度、打印空白和旧版 WPS 资料读取等源案例明确记录的问题。

Editorial reconstruction：本页的编辑重组

为了让读者可以复用，本页把上面过程整理为“资料登记 → 信息架构 → 数据驱动页面 → 交互实现 → 桌面/移动验收 → 发布边界”。这是阅读结构，不是对源案例增加新的真实步骤。

General method：可迁移的方法

如果换成另一座城市，先替换城市资料和 CITY 数据对象，再复跑事实核对和响应式验收。不要只改名称；人口、产业、交通、景点、开放时间和行程都需要重新回到各自官方来源。

6. 最终产物

源案例描述的产物是一个单文件、可离线打开的交互式城市网页，包含 11 个城市信息板块，并用一个数据对象驱动页面内容。源案例还提供了页面预览图，但本页不复制这些图片，也不把源案例的具体数值当作本站的产品事实。

正式交付时，应同时保留：HTML 文件、来源表、素材授权清单、待确认项和验收记录。只有页面文件没有来源表时，不能认为交付完成。

7. 验收

至少检查：

• 11 个板块、导航和锚点是否完整；
• 首屏数据是否能显示正确的公开数值，而不是停留在动画初始值；
• 数据、时间轴、交通、景点、高校和行程是否逐项回到官方来源；
• CSS、JavaScript、字体、图片和图标是否符合单文件或明确的依赖边界；
• 桌面端 1280×900 与移动端 390×844 是否无横向溢出，导航和卡片是否可操作；
• 打印或低动效模式是否仍能看到正文；
• 票价、开放时间和其他容易变化的信息是否提示读者出行前核实官方渠道。

8. 遇到的问题

以下问题只保留公开源案例明确写出的事实：首屏数字动画可能因触发范围停留在 0；白色卡片在交替背景上对比度不足；区块初始透明度可能导致打印空白；旧版 WPS 文件不能直接读取。页面重写时应把这些作为验收用例，而不是声称所有同类项目都会遇到它们。

9. 如何改进

• 生成前先做来源表和数据字段表，避免页面完成后才发现数字无出处；
• 把“单文件、无外部资源、可离线打开”写成验收条件，并扫描 HTML 的外部请求；
• 把首屏计数、打印模式、prefers-reduced-motion 和移动端导航纳入早期验收；
• 把城市资料、页面结构和交互代码分离，后续换城市时只替换已核对的数据对象；
• 页面上线前再次核对易变信息，不把历史公开资料当成永久有效。

10. 如何复用

普通用户可以把城市名换成自己的目标城市，准备官方统计、政府门户和文旅资料，再要求 WorkBuddy 先列出资料缺口和页面结构。若目标是活动页、项目展示页或互动报告，只保留适用板块即可；不要为了模仿案例而保留与任务无关的动画和数据。

本案例对应的通用方法见网站、H5 与互动成果；内容和素材准备见内容生产到发布前验收。

11. 来源与授权状态

来源事实：本页核对的是当前公开仓库提交 e510a2c89114efef2c3031d86ac9c31b36ff8b80 下的 city-guide-dongguan 案例；该页面公开说明了城市资料、网站设计、单文件 HTML、11 个板块和验收约束。

授权判断：这是公开的城市信息任务，不含本站复制的客户身份、内部数据、账号、二维码或后台截图。城市数据和素材仍须在复用时逐项回到官方来源并确认授权。因此本页判定为 PUBLIC_AFTER_REWRITE，而不是把源页面原样镜像进本站。

来源定位（不公开原文复制、原作者身份、完整 HTML 或截图）：公开案例页面。

内容版本与核对日期

• 内容版本：0.1.0
• 最后核对：2026-09-26
• 来源提交：e510a2c89114efef2c3031d86ac9c31b36ff8b80
• 本页状态：PUBLIC_AFTER_REWRITE