Appearance
网站、H5 与互动成果
用户真实问题
“WorkBuddy 能不能做 H5”并不只是在问能否生成几段 HTML。真正需要判断的是：这个任务适合做网站、H5、互动报告、Dashboard、信息卡片还是普通文档；资料是否足够；页面需要哪些交互；生成后如何确认桌面和手机都能看。
这套方案把 WorkBuddy 放在“需求与资料 → 页面结构 → 文件生成 → 浏览器预览 → 验收”的链路中。页面可以是单文件 HTML，也可以是项目文件；具体输出形态由当前产品能力、任务权限和验收要求决定。
先定义成果形态
| 目标 | 更适合的起点 | 先确认什么 |
|---|---|---|
| 对外介绍或活动信息 | 单页网站 / H5 | 受众、移动端路径、CTA 和素材授权 |
| 多指标与结论展示 | 互动报告 / Dashboard | 指标定义、数据来源、筛选和更新时间 |
| 城市或项目介绍 | 信息展示页 / 城市名片 | 官方资料、来源、地图或图片授权 |
| 页面结构和视觉草稿 | 原型或静态 HTML | 信息层级、品牌约束和评审方式 |
| 需要持续编辑的长内容 | 说明页或内容站 | 版本、导航、搜索和维护责任 |
不要在还没有明确目标和输入时先追求动画。一个能被读懂、能回到来源、能在手机上完成任务的页面，比堆叠效果更重要。
页面生产链
1. 定义用户任务与输入
先列出页面目标、用户、主要问题、期望动作、已有文案、数据、图片、品牌资料、链接和参考页面。把“必须保留”“可以重写”“待确认”和“禁止公开”分开。涉及数据展示时，先登记指标口径、时间范围、单位和来源。
2. 设计信息架构
先画出页面 Section 和浏览路径，再决定卡片、表格、时间轴、Tabs、Accordion、Filter、Modal 或表单。每个区块只服务一个信息任务，并明确首屏、核心证据、行动入口和脚注的位置。不要用长段落替代结构，也不要为了凑页面长度增加无来源内容。
3. 生成页面文件
可以让 WorkBuddy 根据已确认的结构生成 HTML、CSS 和 JavaScript 文件，并在浏览器中预览。要求它说明文件清单、入口文件、外部依赖、数据来源和未实现项。需要离线打开时，明确要求 CSS、脚本、字体和图片的依赖边界；不要默认页面一定是零依赖。
4. 处理视觉与交互
视觉验收关注风格、字体、信息密度、图片比例、卡片间距、数据图表和响应式断点。交互验收关注导航、Tabs、Accordion、筛选、Modal、表单、回到顶部和错误状态。每个交互都应有无 JavaScript 或低带宽时的合理退化，至少尊重 prefers-reduced-motion。
5. 分层发布
先在本地文件和浏览器预览中验收；需要公开时再选择静态部署；正式域名、DNS、后端接口和数据库属于另一层变更。生成了 HTML 不代表已经部署，也不代表域名、权限、统计和外部服务已经配置完成。
互动报告和 Dashboard 的最小验收
- 指标、单位、筛选范围和更新时间写清楚；
- 图表、卡片和明细表使用同一份数据口径；
- 空数据、加载失败、无权限和筛选无结果时有可理解提示；
- 关键结论能回到原始文件、网页或数据表；
- 桌面端
1280×900与手机端390×844不出现横向溢出； - 导航、按钮、表单和弹窗可用，键盘焦点与文字对比度可接受；
- 浏览器控制台没有本次页面引入的错误，链接和锚点可到达；
- 页面准确性、隐私、图片/字体授权和外发范围通过责任人检查。
可复制提示词
text
请把这份资料设计成一个可验收的 <成果形态>。
页面目标：<页面目标>
目标用户：<目标用户>
核心输入：<文案、数据、图片、品牌资料和链接>
发布边界：<本地预览、静态文件或已授权的部署环境>
请按以下阶段执行：
1. 先列出页面目标、用户路径、Section、信息优先级和 CTA。
2. 登记每个数据、结论和图片的来源、版本、授权与待确认项。
3. 先输出页面结构和验收标准，确认后再生成文件。
4. 生成 HTML/CSS/JS，并说明外部依赖、文件清单和未实现能力。
5. 检查导航、交互、空状态、链接、锚点、控制台错误和内容准确性。
6. 分别按 1280x900 与 390x844 检查布局、文字、表格、代码和横向溢出。
7. 输出本地文件与发布边界；未经确认不要部署、外发或修改正式环境。变量说明
| 变量 | 填写方式 |
|---|---|
<成果形态> | 网站、H5、互动报告、Dashboard、信息卡片或项目展示页 |
<页面目标> | 用户看完后要理解、比较、填写或采取的动作 |
<目标用户> | 访客、客户、内部成员、管理者或研究读者 |
<核心输入> | 文件、网页、数据、品牌资料、图片和链接，写明权限 |
<发布边界> | 只在本地预览、交付静态文件，或进入另一个已授权的发布流程 |
与城市名片案例的关系
公开的城市名片生成案例记录了一次从公开城市资料到单文件互动网页的实际任务。案例只保留可追溯的输入、过程、产物和验收事实；本方案则抽象出适用于网站、H5 和互动报告的通用方法，不把案例中的城市数据当成模板事实。
相关内容
- 内容生产到发布前验收：先把文案、数据、素材和发布门禁准备好。
- 从资料包生成 PPT 并验收：当最终交付物更适合演示文稿时，使用页面级验收。
- PDF 阅读、抽取与证据整理：为互动报告建立可追溯的资料底稿。
- WorkBuddy 实战案例
- 第 23 章：实操案例的拆解方法
来源引用
- SRC-UPSTREAM-CH23：网站设计、浏览器预览和多类实操任务的上游依据，经重新组织为需求、生成和验收流程。
内容版本与核对日期
- 内容版本：
0.1.0 - 最后核对：
2026-09-26 - 适用版本状态：文件生成、浏览器预览、HTML/CSS/JS 和外部部署能力以当前版本与实际权限为准。
- 来源提交版本：
6b5e2403f0f2ad5d3f7ab7a67e9c4d4113583ff3 - 内容更新说明：新增网站/H5/互动报告形态判断、输入登记、响应式验收和发布边界。