WORKBUDDY LESSON

用 WorkBuddy 制作 HTML 演示文稿和互动网站

PART 01 / 先认识它

HTML 不只是一个“会动的 PPT”

HTML 演示在观看上仍然可以一页一页翻动，但它的本质是网页。因此，它不仅能放标题、图片、数据和视频，还能接收输入、处理数据和响应用户操作。

对比	普通 PPT	HTML 演示
文件形式	PPTX 文件	网页文件，可以是单文件 HTML
播放	幻灯片翻页与全屏	可以鼠标、键盘、触摸翻页和全屏
动画	主要是页面与元素动画	数字增长、图表绘制、状态切换和自定义交互
分享	常需下载文件或演示软件	发布后可以通过浏览器链接打开
升级空间	主要用于演示	加入输入、计算、筛选和存储后，可继续升级为网站或轻量应用

一个链接打开

发布以后，对方使用浏览器即可查看，减少版本、字体和软件差异。

交互

观众可以真的操作

切换 Q3 实际与 Q4 目标，点击风险项展开负责人和处理时间。

数据

更适合动态表达

数字增长、进度环、仪表盘、折线图、柱状图和时间轴都能作为内容的一部分。

修改

统一调整，不用逐页重做

可以要求 WorkBuddy 只放大全部一级标题，或保留数据与逻辑，只重新设计视觉。

PART 02 / 制作前准备

先打开 Frontend Design Skill

WorkBuddy 能把页面写出来，但“能运行”不等于“真的好看”。Frontend Design 帮它在生成时同时考虑视觉方向、字体、配色、布局、动效、响应式与设计一致性。

打开 Skill

在 WorkBuddy 的 Skill 中搜索并启用 frontend-design。

提供真实内容

先准备逻辑完整、数据无明显冲突的原始材料。

说清使用场景

说明观众、展示时长、必须记住的结论和交付形式。

写下验收标准

页面、数据、交互、屏幕尺寸和报错都需要可检查。

PART 03 / 实操一 · 生成

把业务材料变成经营汇报

虚构品牌“森虫虫香氛”面向 20–35 岁城市女性。我们要在约 15 分钟内，向管理层说清 Q3 的结果、有效动作、主要问题和 Q4 计划。课程中的公司、产品与数据全部为教学虚构。

本集实操

森虫虫女性生活方式品牌—2026 Q3 业务复盘与 Q4 增长计划

输入: 《森虫虫女性生活方式品牌｜2026 Q3业务复盘与Q4增长计划虚构参考材料》，包含品牌背景、营收、订单、客单价、复购率、获客成本、渠道、产品和 Q4 计划。
执行: 先限定数据与使用场景，再给出约 12 页结构、女性生活方式品牌的视觉方向、动画、交互、技术要求和验收项。
产物: 一套约 12 页、16:9、支持键盘和触摸翻页、可全屏播放的单文件 HTML 演示文稿。
核验: 检查数据合计、页面溢出、图表与动画、键盘和按钮翻页，以及 1920×1080、1366×768 和 390px 手机宽度。

可复制提示词 01

生成 Q3 业务复盘 HTML 演示

请完整读取我刚刚提供的Word文件：

**《森虫虫香氛_2026_Q3业务复盘与Q4增长计划.docx》**

然后直接为我制作一套：

# 森虫虫香氛

## 2026 Q3 BUSINESS REVIEW & Q4 GROWTH PLAN

高质量HTML季度经营演示文稿。

这不是把Word逐段复制到网页里。

请先完整理解Word中的：

* Q3经营结果；
* 核心经营数据；
* 月度营收趋势；
* 增长来源；
* 渠道表现；
* 核心产品；
* 当前问题；
* Q4目标；
* Q4重点动作；
* 风险；
* 最终管理层结论；

再把这些内容重新组织成一套适合15分钟管理层会议使用的Web Presentation。

---

# 一、数据真实性要求

**Word文件是本次演示唯一的业务数据源。**

请严格使用Word中的数字。

不要：

* 擅自补造业务数据；
* 擅自增加不存在的月份；
* 擅自虚构行业平均值；
* 擅自计算Word没有要求的新指标并把它当成事实；
* 为了让图表更丰富而补数据。

如果发现Word里的数字之间存在冲突：

**先告诉我冲突位置，不要自行修改。**

已知需要保持一致的核心数字包括但不限于：

Q3总营收：

**1268万元**

Q2总营收：

**1018万元**

环比：

**+24.6%**

订单量：

**7.34万单**

平均客单价：

**172.8元**

新增购买用户：

**4.9万人**

复购率：

**31.8%**

CAC：

**46元**

毛利率：

**62.5%**

7月营收：

**372万元**

8月营收：

**421万元**

9月营收：

**475万元**

Q4营收目标：

**1650万元**

Q4复购率目标：

**36%**

Q4 CAC目标：

**控制在42元以内**

Q4毛利率目标：

**不低于63.5%**

---

# 二、使用场景

这是森虫虫香氛内部管理层季度经营汇报。

观众包括：

* CEO；
* 市场负责人；
* 增长负责人；
* 商品负责人；
* 运营负责人。

预计演示：

**约15分钟。**

所以不要把Word里面的大段文字全部搬上屏幕。

需要帮助管理层快速回答四个问题：

### 01

Q3结果怎么样？

### 02

增长从哪里来？

### 03

现在最大的风险和问题是什么？

### 04

Q4准备怎么做？

---

# 三、整体演示形式

制作：

**约11～12页**

的16:9 HTML演示文稿。

它应该明显是一套：

# Web Presentation

而不是：

“把PPT保存成HTML”。

需要支持：

* 键盘左/右方向键翻页；
* 上一页 / 下一页按钮；
* 当前页码；
* 页面进度条；
* 全屏；
* 触摸设备左右滑动；
* 手机浏览；
* Hover交互；
* Touch交互。

---

# 四、这套演示最重要的视觉特点

我希望这套演示充分体现HTML相比普通PPT更强的：

# 动态数据表达能力。

整套演示请重点做好以下四类效果：

### A. 数字Count-up / Tween

数字从0自然增长到最终结果。

### B. 数据变化Tween

例如：

39 → 46

1018 → 1268

31.8 → 36

### C. 图表绘制

折线和比例条不是直接出现，而是自己绘制出来。

### D. 状态切换

点击：

Q3 ACTUAL

和：

Q4 TARGET

数据可以动态切换。

这四部分是本次演示的重要亮点。

---

# 五、01｜Cover

标题：

# 森虫虫香氛

英文可使用：

**MORI CHUCHU**

或直接保留附件品牌图中的现有英文品牌表达。

不要自己重新发明第三套英文品牌名。

主标题：

**2026 Q3 BUSINESS REVIEW**

**& Q4 GROWTH PLAN**

副标题：

季度经营工作报告

---

# 六、封面必须使用Word附件中的品牌形象

Word文档后方包含一组已经设计好的：

**森虫虫香氛品牌视觉图片。**

请主动读取这些图片。

这些图片已经形成较明确的视觉体系：

* 紫色 / 薰衣草色；
* 香氛产品；
* 香薰蜡烛；
* 扩香；
* 枕间香氛；
* 礼盒；
* 帆布袋；
* 花草与薰衣草元素；
* 女性品牌角色；
* 居家、办公、咖啡、街头等生活方式场景。

请把这些图片当成：

# 品牌原始视觉资产

而不是普通附件。

---

## 封面图片建议

优先挑选一张：

人物形象完整、

同时带有森虫虫香氛产品、

品牌识别明显、

画面构图适合16:9裁切

的附件图作为封面主视觉。

可以采用：

**左侧 / 右侧大图 + 大Typography**

或者：

**图片全屏裁切 + 柔和渐变遮罩 + 大标题**

不要：

把附件图缩小以后放进一个普通圆角卡片。

我们需要的是：

**真正像香氛品牌季度报告的封面。**

---

# 七、品牌视觉方向需要以附件图片为准

上一版如果使用奶油白、深咖啡、鼠尾草绿作为主视觉，请不要机械沿用。

这次请优先从Word附件图片中提取品牌颜色。

整体可以使用：

### 主背景

柔和：

* 暖白；
* 极浅薰衣草白；
* 淡紫灰。

### 主品牌色

从附件图片提取：

* 薰衣草紫；
* 灰紫；
* 深紫；
* 紫罗兰色。

### 辅助色

* 银灰；
* 暖白；
* 柔和粉紫；
* 少量深墨紫。

---

## 但是不要做成廉价“紫色科技网页”

品牌紫色需要体现：

**香氛 / 女性生活方式 / 夜晚 / 放松 / 高级感**

而不是：

赛博朋克、

AI工具、

SaaS、

Web3。

所以请避免：

* 电光紫；
* 蓝紫霓虹；
* 满屏Glow；
* 大量玻璃拟态；
* 科技粒子；
* 黑底霓虹；
* AI产品官网感。

---

# 八、02｜Executive Summary

核心结论：

# 增长继续，

# 但获客效率正在成为下一阶段最需要解决的问题。

这一页重点突出四个数字：

### Q3营收

**1268万元**

### 环比

**+24.6%**

### 复购率

**31.8%**

### CAC

**46元**

---

# 九、重点动画①：1268万元必须从0开始增长

进入页面的时候：

不要直接看到：

1268万元。

应该首先看到：

# 0

随后通过流畅的JavaScript Tween：

0

↓

240

↓

620

↓

930

↓

1268

最终停在：

# ¥12.68M

或

# 1268万元

最终展示以中文1268万元为主。

动画不需要真的使用以上这些固定中间数字。

应通过数学Tween连续变化。

动画时间约：

**1.2～1.6秒。**

---

## 然后再出现增长比例

1268万元停止以后：

延迟约：

**200～350ms**

旁边的：

# ↑ 24.6%

再通过：

Fade + 微弱向上Slide

出现。

这样形成：

**结果 → 增长**

两个视觉节奏。

---

# 十、其他数字也采用Count-up

例如：

复购率：

0

→

**31.8%**

CAC：

0

→

**46元**

订单量：

0

→

**7.34万单**

但不要全部同时起跳。

可以：

主数字先出现；

然后其他指标错峰：

80～150ms。

---

# 十一、03｜Q3 Core KPI

根据Word报告展示：

### 总营收

1018万元

→

1268万元

**+24.6%**

### 订单量

6.18万单

→

7.34万单

**+18.8%**

### 平均客单价

164.7元

→

172.8元

**+4.9%**

### 新增购买用户

4.375万人

→

4.9万人

**+12.0%**

### 复购率

27.4%

→

31.8%

**+4.4个百分点**

### CAC

39元

→

46元

**+17.9%**

### 毛利率

61.2%

→

62.5%

**+1.3个百分点**

---

# 十二、KPI页面不要做成七张一模一样的卡片

请避免典型AI Dashboard：

▢ 营收
▢ 用户
▢ 复购
▢ CAC
▢ 毛利率

这样七个圆角框排成两排。

我希望这一页更接近：

# Editorial Data Storytelling

例如：

1268万元

占据约30～40%的主要视觉面积。

其他指标围绕：

* 收入增长；
* 用户；
* 效率；
* 利润；

形成不同层级。

使用Typography、细线、数字、比例和留白完成页面。

---

# 十三、Q2 → Q3也要有数字变化

例如：

页面先看到：

### 1018

然后自然Tween到：

# 1268

再出现：

**+24.6%**

复购率：

27.4

→

31.8

CAC：

39

→

46

---

## CAC是特殊指标

CAC从39元上涨到46元：

不是好消息。

因此：

不要把：

+17.9%

做成绿色、庆祝或向上胜利动画。

应该使用：

* 风险紫红；
* 暗红；
* 较克制的警示色；
* 小型风险标记。

同时增加简短结论：

**新客越来越贵。**

---

# 十四、04｜Monthly Revenue Trend

Word中数据：

### JUL

372万元

### AUG

421万元

较7月：

+13.2%

### SEP

475万元

较8月：

+12.8%

Q3最高。

---

# 十五、重点动画②：折线图从左向右自己画出来

页面进入以后：

不要直接显示完整折线图。

依次执行：

### 1

7月数据点Fade出现。

### 2

折线从7月向8月延伸。

### 3

8月数据点Scale出现。

### 4

折线继续从8月向9月绘制。

### 5

9月数据点出现。

### 6

最后出现：

**连续三个月增长**

以及：

**9月为Q3最高**

---

## 技术建议

优先使用：

SVG

*

`stroke-dasharray`

*

`stroke-dashoffset`

完成真实的折线绘制。

不要用CSS直接淡入一整张图。

---

# 十六、折线图必须可以Hover

电脑端：

鼠标放到：

### 7月

显示：

**JUL**

372万元

---

### 8月

显示：

**AUG**

421万元

较7月：

↑13.2%

---

### 9月

显示：

**SEP**

475万元

较8月：

↑12.8%

**Q3 HIGH**

---

手机端：

点击数据点也可以打开Tooltip。

Tooltip不要使用浏览器默认提示。

请设计与品牌统一的轻量信息框。

---

# 十七、05｜What Drove Growth

这一页不要简单写：

“Q3增长主要来自哪里”。

希望视觉上回答：

# WHY DID WE GROW?

根据Word只展示三个核心原因。

---

### 01 Hero Products

晚风香薰蜡烛：

# 248万元

今晚好睡枕间香氛：

# 186万元

两款合计：

# 434万元

占Q3营收：

# 34.2%

---

### 02 Repeat Purchase

复购率：

27.4%

→

# 31.8%

---

### 03 Content & Search

小红书品牌搜索：

# +38%

UGC：

# +52%

---

这些数字都可以适度使用：

Count-up

或者：

Q2 → Q3 Tween。

---

# 十八、06｜Channel Mix

渠道数据：

### 小红书

431万元

34.0%

### 抖音

276万元

21.8%

### 微信私域

219万元

17.3%

### 电商自然搜索

174万元

13.7%

### 快闪店及线下活动

93万元

7.3%

### 其他

75万元

5.9%

所有渠道合计必须：

# 1268万元

---

# 十九、渠道图不要用普通饼图

优先设计成：

**Editorial Horizontal Bar Chart**

或者类似品牌年度报告的：

比例排版。

页面进入以后：

所有Bar：

从0宽度开始。

依次增长到：

34%

21.8%

17.3%

13.7%

7.3%

5.9%

---

## Hover

Hover每个渠道：

显示：

收入

*

占比

*

Word里的简短判断。

例如：

### 小红书

431万元

34%

**增长主渠道，品牌搜索和种草表现最好**

---

# 二十、07｜Hero Products

这一页请重点利用Word附件中的品牌图片。

展示Word里的四款产品：

### 晚风香薰蜡烛

248万元

环比：

**+41%**

---

### 今晚好睡枕间香氛

186万元

复购率：

**42%**

---

### Cloud Bag通勤帆布包

143万元

退货率：

**12.8%**

---

### 晚安茶

122万元

组合购买表现稳定。

---

# 二十一、附件图片具体怎么用

请先读取所有Word附件品牌图。

然后根据画面内容进行视觉选择。

从附件图中优先挑选：

### 一张产品集合类图片

用于：

**Hero Products**

例如：

同时出现香薰蜡烛、瓶装香氛、礼盒或帆布袋的品牌场景。

---

### 一张睡眠 / 卧室场景

可以辅助：

“今晚好睡”枕间香氛。

---

### 一张办公 / 阅读场景

可以辅助：

品牌内容或Q3增长来源。

---

### 一张礼盒场景

可以留到：

12月礼物季。

---

### 一张户外 / 通勤场景

可以用于：

Cloud Bag

或者渠道/生活方式表达。

---

# 二十二、品牌角色使用频率

附件图片中的银紫发女性角色属于整个森虫虫香氛的：

**统一品牌角色 / 品牌视觉形象。**

请保持她的视觉连续性。

不要：

换成其他女性角色。

不要：

从网上重新找真人。

不要：

重新AI生成一个不同长相的角色。

---

但是也不要：

12页每页都出现她。

建议：

### Cover

使用1次。

### Hero Products / Growth

使用1～2次。

### Q4 Campaigns

使用1次。

### Closing

可选再次出现。

整套最多：

**3～4个页面出现人物主形象。**

其余页面以：

数据、

Typography、

品牌紫、

抽象香氛元素

为主。

---

# 二十三、图片不应该被放成“插图卡片”

不要：

左边一张方图，

右边三行字。

这太像普通PPT。

更推荐：

* Full-bleed局部大图；
* 图片裁切进入页面边缘；
* 大面积人物局部；
* 文字叠加；
* 渐变Mask；
* 大数字压在图片留白区域；
* 图像与数据形成Editorial构图。

---

# 二十四、08｜What Didn't Work

根据Word展示三个问题。

---

## 问题1｜CAC上涨

### 39元

动态变成：

# 46元

然后：

**+17.9%**

出现。

下面只需要一句：

**获客正在变贵。**

---

## 问题2｜新客增速低于营收

用两条动态Bar：

### Revenue

24.6%

### New Customers

12.0%

两根Bar从0增长。

让人一眼看到：

**收入长得比新客快得多。**

---

## 问题3｜集中度

前四款产品：

# 55.1%

小红书渠道：

# 34%

结论：

**增长仍然较依赖少数产品和单一平台。**

---

# 二十五、09｜Q3 ACTUAL / Q4 TARGET

这一页必须有真正可以点击的交互。

页面顶部：

### Q3 ACTUAL

### Q4 TARGET

默认：

Q3 ACTUAL。

---

# 二十六、重点动画③：点击Q4以后所有数字自己变化

用户点击：

# Q4 TARGET

以后：

不要换整张页面。

不要刷新。

不要直接把一组HTML隐藏然后显示另一组。

希望主要数字通过：

**真正Tween**

从当前状态变化到目标状态。

---

### Revenue

1268

→

# 1650万元

### Orders

7.34

→

# 9.1万单

### AOV

172.8

→

# ≥181元

### New Customers

4.9

→

# 5.5万人

### Repeat Purchase

31.8

→

# 36%

### CAC

46

→

# ≤42元

### Gross Margin

62.5

→

# ≥63.5%

---

对于：

≤

≥

这些符号：

符号固定。

只Tween数值。

---

# 二十七、Q3 / Q4切换还要有视觉反馈

从Q3切到Q4时：

除了数字变化，

可以同时出现：

* 进度条变化；
* 环形指标变化；
* 辅助线变化；
* Q3标签淡出；
* TARGET标签出现；
* 强调色轻微改变。

CAC需要特别处理。

46 → 42

虽然数字下降，

但这是：

**正向改善。**

因此最终42元状态可以显示：

改善色。

---

再次点击：

Q3 ACTUAL

所有数字应顺滑返回Q3值。

---

# 二十八、10｜Q4 Action Timeline

Word里Q4三个重点时间点：

### OCT

秋冬新品

秋冬香氛

身体乳

护手霜

旅行香氛

组合礼盒

---

### NOV

双十一

会员组合

老客补货

爆款带新品

限量礼盒

---

### DEC

礼物季

主题：

# 送给重要的人，也送给自己。

---

# 二十九、重点动画④：时间轴自己推进

进入页面：

时间线从左向右：

OCT

→

NOV

→

DEC

绘制出来。

节点依次点亮。

点击任意月份：

展开该月核心动作。

---

## 这一页使用附件图片

请优先考虑：

10月：

产品 / 香氛生活场景图。

11月：

产品组合图。

12月：

附件中的礼盒视觉。

尤其12月：

可以明显使用礼盒图片，

让：

“送给重要的人，也送给自己”

更有品牌感。

---

# 三十、11｜Q4 Priorities & Risks

根据Word，

Q4最重要的三件事：

### 01

CAC

**≤42元**

减少低效率付费投放。

---

### 02

Repeat Purchase

**36%**

继续加强会员和私域。

---

### 03

Build New Growth

降低：

爆款依赖

*

单一平台依赖。

让：

新品、

私域、

自然搜索

承担更多增长。

---

# 三十一、风险模块

Word里四个主要风险：

### 高风险

获客成本继续上涨。

当前：

CAC 39 → 46。

---

### 中风险

新品库存判断失误。

---

### 中风险

小红书依赖偏高。

当前收入占比：

34%。

---

### 中风险

Cloud Bag退货率偏高。

当前：

12.8%。

---

点击风险：

展开：

**Current Situation**

和：

**Q4 Response**

不要在主页面直接堆长文字。

---

# 三十二、12｜Closing

先出现：

# Q3证明了我们可以增长。

停顿：

约400～600ms。

然后出现：

# Q4要证明的是：

再停顿。

最终大字：

# 我们可以更健康地增长。

---

## 最后一页视觉

可以再次使用附件中的：

品牌人物 + 香氛场景

形成与Cover的首尾呼应。

但最后视觉重点必须仍然是：

# 更健康地增长

而不是人物本身。

---

# 三十三、整体设计风格

这是一套：

# 香氛品牌经营报告

不是：

互联网科技公司Dashboard。

需要有：

* 高级品牌感；
* 女性生活方式感；
* 紫色香氛氛围；
* 编辑杂志感；
* 大留白；
* 大Typography；
* 精致数据可视化；
* 图像与数字混排；
* 克制动画；
* 柔和但不幼稚。

---

# 三十四、字体和版式

标题可以：

非常大。

允许标题占到：

页面30%～50%。

经营会议内容不要每一页塞满。

一页只突出：

**一个结论。**

正文：

尽量保持：

2～4行。

详细说明通过：

Hover

或者：

点击展开。

---

# 三十五、技术要求

优先：

# 单文件HTML

CSS、JavaScript尽量内联。

不调用第三方API。

尽量不依赖外部CDN。

图表优先：

SVG

Canvas

CSS

Vanilla JavaScript。

数字Tween自己实现轻量函数。

不要为了一个折线图引入大型前端框架。

---

# 三十六、附件图片技术要求

Word内嵌图片需要正确提取或使用。

确保发布以后：

图片不会因为本地绝对路径而失效。

如果单文件HTML技术上允许：

优先将必要图片：

转为Data URI / Base64内嵌，

或者通过WorkBuddy最终发布机制可靠打包。

不要留下：

`C:\Users\...`

`/Users/...`

等只能在本机打开的路径。

---

# 三十七、响应式

主要场景：

1920×1080

16:9演示。

同时检查：

1366×768。

另外需要适配：

390px手机。

---

## 手机端

不需要强行保持：

16:9幻灯片。

可以自动转为：

纵向连续阅读模式。

但是必须：

* 图片正常；
* 数据正常；
* Tooltip可以点击；
* Q3 / Q4可以切换；
* 不横向溢出；
* 字体不能小到看不清。

---

# 三十八、Accessibility

支持：

`prefers-reduced-motion`

当用户开启减少动画：

* Count-up可以直接显示最终值；
* 折线可以快速出现；
* 时间轴减少动画；
* 页面仍然完整可用。

---

# 三十九、最终QA

完成第一版以后：

**不要直接结束。**

请自行测试并修复。

---

## 数据检查

确认：

1. Q3营收1268万元；
2. Q2营收1018万元；
3. 7月372万元；
4. 8月421万元；
5. 9月475万元；
6. 三个月合计1268万元；
7. 渠道收入合计1268万元；
8. 产品数据与Word一致；
9. Q4目标与Word一致；
10. 不存在自行补造的数据。

---

## 动画检查

确认：

11. Count-up最终数字准确；
12. 小数位准确；
13. 单位没有一起跳动；
14. 增长比例延迟出现；
15. 折线从左向右正确绘制；
16. Tooltip准确；
17. Q3 → Q4数字正确Tween；
18. Q4 → Q3可以恢复；
19. 不会出现重复进入页面导致数字累计；
20. Timeline正常。

---

## 图片检查

确认：

21. 正确使用Word附件品牌图片；
22. 没有拉伸；
23. 没有变形；
24. 没有使用其他陌生品牌人物；
25. 人物没有被过度重复；
26. 产品图与页面内容匹配；
27. 发布以后图片仍然可以正常加载。

---

## 功能检查

确认：

28. 键盘方向键正常；
29. 上一页/下一页正常；
30. Touch滑动正常；
31. 页码正常；
32. 进度条同步；
33. Fullscreen正常；
34. Hover正常；
35. Touch Tooltip正常；
36. Q3/Q4按钮正常；
37. 风险展开正常。

---

## 响应式检查

确认：

38. 1920×1080正常；
39. 1366×768没有裁切；
40. 390px没有横向溢出；
41. 手机按钮足够大；
42. 图片没有异常裁切。

---

## 技术检查

确认：

43. Console无错误；
44. 没有无效外部资源；
45. 没有本地绝对图片路径；
46. reduced-motion正常；
47. 不调用第三方API。

发现问题以后：

请直接修复。

---

# 四十、最终交付

完成以后：

直接打开最终HTML给我预览。

同时告诉我：

### 文件

最终HTML文件名。

### 页面

最终总页数。

### 动画

具体实现了哪些动态效果。

### 交互

具体实现了哪些交互。

### 图片

使用了Word中的哪些品牌图片。

分别放在哪些页面。

### QA

发现了哪些问题。

修复了哪些问题。

### 人工检查

还有哪些地方建议我人工确认。

---

请先在内部完成：

**内容结构规划 + 图片选择 + 视觉方向 + 交互规划**

然后直接开始制作最终可运行HTML。

**不要先停下来给我方案。**

**不要只回复文字说明。**

我要直接看到：

# 完整可运行的HTML演示文稿。

PART 04 / 实操一 · 打磨

第一版是起点，不是最终成品

先从头到尾看一遍，再分别检查内容、数据、视觉和交互。如果问题只在视觉，就明确要求保留数据与功能；如果只有一页不好，就限定只修那一页。

第一版快速检查

封面是否具有品牌感
Executive Summary 是否一眼看到核心结论
KPI、月度营收和渠道收入是否正确
四款核心产品和三项主要风险是否清楚
Q4 目标、战役时间轴和策略是否准确
键盘、按钮、图表 Hover、风险展开与全屏是否正常
手机宽度下文字、图表和按钮是否溢出

可复制提示词 02

只重新设计视觉

请保留当前演示中的所有内容、数据、页面顺序、图表逻辑、翻页功能和交互功能。

这一次只重新设计视觉，不要修改任何业务数字。

当前版本仍然过于像SaaS后台和AI默认模板。请完成以下调整：

1. 减少至少30%的圆角卡片；
2. 增加留白；
3. 放大核心标题和关键数字；
4. 不要每页都使用相同的网格布局；
5. 让不同页面拥有不同的信息构图；
6. 强化编辑杂志感和女性生活方式品牌感；
7. 奶油白作为主要背景，深咖啡作为主要文字颜色；
8. 鼠尾草绿和低饱和粉只作为重点色；
9. 图表更加克制和高级；
10. 动画更自然，不要让所有元素同时飞入；
11. 封面更像品牌经营报告，而不是商业模板；
12. Closing页面要有强烈的视觉记忆点；
13. 保持1920×1080、1366×768和390px适配；
14. 修改后重新检查所有页面。

只修改视觉与动画表现，不要改动数据和核心文案。

可复制提示词 03

发布前最终 QA

现在请进入最终QA，不要继续增加新功能，也不要重新设计整套页面。

请逐项检查并修复：

1. 所有业务数字与参考材料是否一致；
2. 月度营收与渠道营收是否都正确合计为1268万元；
3. 所有页面在1920×1080下是否完整；
4. 所有页面在1366×768下是否存在底部裁切；
5. 390px手机宽度下是否存在横向溢出；
6. 键盘左右键是否可以正常翻页；
7. 上一页、下一页按钮是否正常；
8. 页码和进度条是否同步；
9. 图表Hover是否正常；
10. 动画是否存在重复触发异常；
11. 是否存在控制台报错；
12. 是否存在外部资源加载失败；
13. 中文字体是否正常；
14. 页面切换时是否出现闪烁或空白；
15. 所有按钮是否具有清晰的点击反馈。

只修复发现的问题。

完成后告诉我：
- 最终文件名；
- 总页数；
- 已通过的检查项；
- 仍然存在但无法自动解决的问题。

最后重新打开最终HTML预览。

PART 05 / 实操二 · 互动网站

做一个真正可以玩的《我们这桌》

这一次不是给老板和同事看的汇报，而是适合 2–8 位朋友聚会时使用的移动端工具箱。网页要接收名字、保存本地数据、执行随机逻辑，并根据点击显示不同结果。

01 / 谁买单

会自然减速的幸运转盘

读取当前参与者，旋转后随机停在一人，显示结果并播放纸屑动画。

02 / 随机抽人

从所有人中选出一位

名字快速滚动后停在一人，可用于拿奶茶、先讲真心话或负责拍照。

03 / 今晚说点真的

按分类抽取真心话卡片

题库保存在本地，卡片翻转后显示新题，并避免短时间内重复。

04 / 谁最可能

网站出题，大家现场指人

不做复杂投票系统，只负责随机显示适合聚会的问题。

05 / 今晚吃什么

按餐饮分类随机决定

用户先选择参与随机的分类，再用老虎机、转盘或卡片效果得出结果。

本集实操

《我们这桌》姐妹聚会工具箱

输入: 2–8 位参与者名字，以及内置在 HTML 中的真心话、“谁最可能”和餐饮题库。
执行: 使用本地 JavaScript 实现名单管理、随机抽取、转盘、卡片翻转与动画，使用 localStorage 保存当前设备的名单和设置。
产物: 移动端优先的单文件 HTML 互动网站，发布以后可通过链接在手机上打开。
核验: 逐项测试参与者管理、五项主要功能、刷新恢复、375/390/430px 宽度、安全区、控制台报错和动画性能。

可复制提示词 04

制作《我们这桌》互动网站

请帮我设计并开发一个可以直接发布分享的高质量HTML互动网站。

网站名字：《我们这桌》

网站定位：一个适合2到8名朋友，尤其是20到30岁女性朋友聚会时使用的轻量聚会工具箱。这不是演示稿，而是一个真正可以操作的移动端互动网站。

一、使用原则

不需要注册或登录，不调用AI接口，不需要API Key，不使用服务器数据库，不收集用户隐私。所有核心逻辑在浏览器前端完成，主要通过手机链接打开。

二、参与者管理

首页允许添加2到8名参与者。支持新增、删除、修改、清空、恢复默认示例，并用localStorage保存当前名单。名字为空、重复或人数不合要求时，给出清晰提示。

三、核心功能

功能一《谁买单》：制作包含当前所有参与者名字的幸运转盘。点击开始后快速旋转、自然减速、随机停在一个名字，显示结果并出现Confetti纸屑动画。同一次旋转中锁定按钮，避免重复触发。

功能二《随机抽人》：所有名字快速滚动，最后随机停在一名参与者，并提供结果动画和再次抽取按钮。

功能三《今晚说点真的》：内置至少120道本地真心话题目，分为友情、恋爱、搞笑、深夜、轻度刺激和成长。题目不要低俗，不要包含危险挑战，不要把娱乐题目包装成心理诊断。使用有质感的3D卡片Flip动画，支持分类、下一题、换一题、避免连续重复和重置题库记录。

功能四《谁最可能》：内置至少120道本地问题，每次随机显示一道，支持下一题并避免短时间重复。

功能五《今晚吃什么》：内置至少40种聚餐选择，至少分为正餐、小吃、甜品、夜宵、清淡和重口味。用户可以勾选参与随机的分类，使用老虎机、转盘或卡片滚动效果决定结果。

四、视觉方向

整体需要漂亮、有趣、年轻、有设计感、适合聚会，看起来像真正的生活方式产品。可以融合编辑杂志感、少量Y2K元素、现代生活方式品牌和有节奏感的排版。颜色建议使用奶油白、黑色、酒红、低饱和粉，少量荧光绿或亮银强调。

避免满屏粉色、幼稚卡通风、廉价渐变、过度霓虹、所有内容都放在相同圆角卡片中和模板化AI网页设计。

五、动画与移动端

加入页面切换、按钮按压反馈、卡片Flip、转盘旋转、名字滚动、结果弹出、Confetti、轻微背景动态和Hover/Touch反馈。动画要流畅但不能影响使用，在用户开启减少动态效果时降低动画强度。

移动端优先，重点适配375px、390px和430px宽度。按钮点击区域不得过小，底部功能不得被手机安全区遮挡。

六、技术要求

优先生成单文件HTML，CSS和JavaScript尽量内联，不调用第三方API，尽量不使用外部CDN。转盘、卡片、纸屑和图标优先使用原生CSS、SVG、Canvas和JavaScript实现。题库写在本地数据中。

使用localStorage保存参与者名单、用户选择的题目分类、最近抽过的题目和基础设置。localStorage只保存在当前浏览器和当前设备中，不实现多人实时同步。

七、验收要求

完成后主动测试：参与者新增、删除和修改；2人和8人布局；空名字和重复名字；转盘与连续点击；随机抽人；真心话分类与卡片翻转；谁最可能题库；餐饮分类与随机结果；localStorage刷新恢复；375px、390px和430px宽度；手机安全区；控制台报错；外部资源加载失败；动画性能。

修复所有明显Bug以后，直接在WorkBuddy中打开最终网站预览。

PART 06 / 测试与发布

本地能玩，还不等于别人能打开

电脑上以 file:// 开头的地址只对当前电脑有效。要让朋友在自己的手机上使用，需要把最终 HTML 发布成在线网站，再用真实手机完整测试一次。

01
管理参与者
输入森虫虫、小A、小B、小C、小D，再测试删除、重新添加和刷新恢复。
02
逐项玩一遍
测试谁买单、随机抽人、真心话卡片、谁最可能和今晚吃什么。
03
切换手机宽度
检查375px、390px和430px宽度，确认文字不溢出、按钮不重叠、底部不被安全区挡住。
04
发布为网站
如当前 WorkBuddy 版本支持轻量发布，在最终产物的分享或发布入口开启“发布为网站”。
05
用真实手机验收
复制在线链接，使用手机浏览器打开，完整执行一次所有主要操作。

情况	实际含义	你应该怎么做
本地 HTML	文件只存在自己电脑中，file:// 地址别人无法打开	适合本机预览和内部演示
发布链接	页面已经上线，可以通过互联网访问	在手机上重新检查布局和交互
localStorage	名单和设置只保存在当前设备和当前浏览器	不宣称已经实现多人或跨设备同步
公开发布	拿到链接的人可能看到页面内容	发布前删除商业机密、客户数据、员工信息和其他敏感内容

PART 07 / 本期收口

代码可以交给 WorkBuddy，判断不能交出去

从这一期开始，你已经不只是“让 AI 写一段内容”，而是在学习“让 AI 做出一个东西”。

能力 01

想清楚要做什么

是演示文稿还是网站？是给管理层看，还是给朋友玩？是展示数据，还是解决实际问题？

能力 02

把需求说清楚

使用场景、目标用户、内容结构、视觉方向、交互功能、设备适配和验收标准都要具体。

能力 03

看得出第一版哪里不好

检查数据、模板感、手机适配、按钮、动画和报错，再用限定范围的要求继续修改。

用一份真实内容，做出第一个 HTML 作品

先决定它是用来演示，还是用来操作
写清用户、内容、视觉、交互和验收
使用 Frontend Design Skill 生成第一版
只修改真正不合格的部分
在真实屏幕与真实操作中完成验收

一个链接打开

观众可以真的操作

更适合动态表达

统一调整，不用逐页重做

打开 Skill

提供真实内容

说清使用场景

写下验收标准

森虫虫女性生活方式品牌—2026 Q3 业务复盘与 Q4 增长计划

生成 Q3 业务复盘 HTML 演示

第一版快速检查

只重新设计视觉

发布前最终 QA

会自然减速的幸运转盘

从所有人中选出一位

按分类抽取真心话卡片

网站出题，大家现场指人

按餐饮分类随机决定

《我们这桌》姐妹聚会工具箱

制作《我们这桌》互动网站

管理参与者

逐项玩一遍

切换手机宽度

发布为网站

用真实手机验收

想清楚要做什么

把需求说清楚

看得出第一版哪里不好

用一份真实内容，做出第一个 HTML 作品