Beauty 步骤4：代码内容审核检验 / Beauty Step 4: Code Content Audit and Inspection

⚠️ 最关键步骤！必须严格执行！/ MOST CRITICAL STEP! Must be strictly executed!

目标 / Goal

全面检查生成的 HTML 演示文稿，确保质量和完整性。

Comprehensively check the generated HTML presentation to ensure quality and integrity.

⚠️ 核心原则 / Core Principles

实行一票否决制 / Implement One-Vote Veto System:

• 内容完整性检验 / Content Integrity Check：必须100%保留原文所有章节、数据、结论，零遗漏
  MUST preserve 100% of all original chapters, data, conclusions, zero omissions

• 代码质量检验 / Code Quality Check：必须符合HTML最佳实践，可访问可运行
  MUST follow HTML best practices, be accessible and runnable

• 资源使用检验 / Resource Usage Check：必须验证步骤2和步骤3是否正确读取并使用了skill资源
  MUST verify Steps 2 & 3 correctly read and used skill resources

• 发现问题立即回退 / Rollback Immediately on Issues：返回对应步骤重新执行，绝不将就
  Return to corresponding step and re-execute, never compromise

---

📋 执行流程（5个子步骤）/ Execution Workflow (5 Sub-steps)

步骤4.1：资源使用验证 / Step 4.1: Resource usage verification
  ↓
步骤4.2：内容完整性检查 / Step 4.2: Content integrity check
  ↓
步骤4.3：代码质量检查 / Step 4.3: Code quality check
  ↓
步骤4.4：功能验证 / Step 4.4: Functionality verification
  ↓
步骤4.5：生成最终报告 / Step 4.5: Generate final report

---

步骤 4.1：资源使用验证 / Step 4.1: Resource Usage Verification

目标 / Goal

验证步骤2和步骤3是否正确读取并使用了skill资源。

Verify that Steps 2 & 3 correctly read and used skill resources.

步骤2资源使用验证

验证方法1：检查图表选择是否基于chart-selection-guide.md

□ 是否读取了 chart-selection-guide.md？
□ 是否识别了内容结构类型（9种类型之一）？
□ 是否根据决策树选择了对应的图表？
□ 是否记录了选择理由（关键词匹配）？

如果否 → 返回步骤2重新执行

验证方法2：检查是否参考了图表示例文件

□ 是否读取了 CHART_EXAMPLES_INDEX.md？
□ 每个选择的图表是否都有对应的示例文件？
□ 是否从示例文件中复制了代码？
□ 图表类型与内容是否匹配？

如果否 → 返回步骤2重新执行

验证方法3：检查是否阅读了观点可视化指南

□ 是否读取了 INSIGHT_VISUALIZATION_GUIDE.md？
□ 是否根据观点类型选择了可视化方式？
□ 是否避免了纯文本项目符号列表？

如果否 → 返回步骤2重新执行

步骤3资源使用验证

验证方法1：检查是否基于最佳实践生成

□ 是否读取了 best-practices.md？
□ HTML结构是否符合语义化要求？
□ CSS是否遵循了设计原则？
□ 是否保持了内容完整性（不总结、不篡改）？

如果否 → 返回步骤3重新执行

验证方法2：检查是否遵循了McKinsey设计系统

□ 是否读取了 mckinsey-design-system.md？
□ 是否使用了定义的配色方案？
□ 字体大小是否符合规范？
□ 间距是否符合标准？

如果否 → 返回步骤3重新执行

验证方法3：检查是否使用了模板

□ 是否读取了 presentation-template.html？
□ HTML结构是否基于模板？
□ 导航功能是否完整？
□ 是否包含了模板中的所有必要组件？

如果否 → 返回步骤3重新执行

验证方法4：检查图表代码来源

□ 每个图表的代码是否来自assets/示例文件？
□ 是否完整复制了CSS、HTML、JavaScript？
□ 是否根据实际数据进行了定制？
□ McKinsey配色是否保持一致？

如果否 → 返回步骤3重新执行

资源使用检查清单

步骤2 - 幻灯片设计阶段：
□ 已读取：references/chart-selection-guide.md
□ 已读取：assets/CHART_EXAMPLES_INDEX.md
□ 已读取：assets/INSIGHT_VISUALIZATION_GUIDE.md
□ 已制作：图表选择决策表（内容类型 → 关键词 → 推荐图表 → 示例文件）
□ 已记录：每个图表的选择理由
□ 已复制：对应示例文件的代码

步骤3 - HTML生成阶段：
□ 已读取：references/best-practices.md
□ 已读取：references/mckinsey-design-system.md
□ 已读取：references/template-guide.md
□ 已读取：assets/presentation-template.html
□ 已读取：assets/TEMPLATE_USAGE_GUIDE.md
□ 已复制：所有选中图表的示例代码
□ 已应用：McKinsey配色和排版规范
□ 已保持：内容完整性（零篡改、零遗漏）

❌ 发现任何资源未读取或未使用 → 立即返回对应步骤重新执行

⚠️ 回退触发条件

以下任一情况发生，必须回退：

1. 步骤2未读chart-selection-guide.md
   → 返回步骤2，读取资源后重新选择图表

2. 步骤2选择的图表与chart-selection-guide.md不符
   → 返回步骤2，根据指南重新选择

3. 步骤2未从assets/示例文件复制代码
   → 返回步骤2，读取示例文件后复制代码

4. 步骤3未读best-practices.md
   → 返回步骤3，读取资源后重新生成HTML

5. 步骤3生成的HTML不符合mckinsey-design-system.md规范
   → 返回步骤3，根据规范重新生成

6. 步骤3未基于presentation-template.html
   → 返回步骤3，使用模板重新生成

输出产物

• 资源使用验证报告
• 回退建议（如有）

验证标准

• 所有必读资源都已读取
• 所有资源都已正确使用
• 无资源被跳过或省略
• 符合设计规范

---

步骤 4.2：内容完整性检查

目标

确保所有原文内容都已正确包含在HTML文件中，无遗漏、无错误。

⚠️ 严格检验方法 - 逐章对照原文档

第一步：提取原文档的所有章节结构

使用工具提取文档的所有标题
推荐使用 Read 工具完整阅读文档，记录所有标题层级

第二步：制作章节对照清单

创建一个对照表，逐项检查：

章节对照清单：

原文档章节                    HTML幻灯片页面           状态
─────────────────────────────────────────────────────────
H1: [主标题]                页面1: 封面页             ✓
H2: [第一章标题]            页面3: 第一章章节首页     ✓
  H3: [子章节1.1]           页面4: 内容页             ✓
  H3: [子章节1.2]           页面5: 内容页             ✓
  H3: [子章节1.3]           页面6: 内容页             ✓
H2: [第二章标题]            页面7: 第二章章节首页     ✓
  H3: [子章节2.1]           页面8: 内容页             ✓
  H3: [子章节2.2]           页面9: 内容页             ✓
  H3: [子章节2.3]           页面10: 内容页            ✓
...

第三步：逐项验证内容完整性

验证项目1：章节标题完整性

□ 所有H1标题是否包含？
□ 所有H2章节是否都有对应的页面？
□ 所有H3子章节是否都有对应的页面？
□ 章节顺序是否与原文一致？
□ 章节编号是否正确？

验证项目2：要点内容完整性

□ 所有要点是否都已包含？
□ 要点文字是否完整（未删减）？
□ 要点顺序是否与原文一致？
□ 子要点是否都已包含？
□ 是否有重复内容？

验证项目3：数据完整性

□ 所有数据点是否都已包含？
□ 数值是否准确（无错误）？
□ 单位是否正确？
□ 百分比是否正确？
□ 货币符号是否正确？

验证项目4：表格完整性

□ 所有表格是否都已包含？
□ 表格行数是否正确？
□ 表格列数是否正确？
□ 表格数据是否准确？
□ 表格标题是否正确？

验证项目5：结论完整性

□ 所有结论是否都已包含？
□ 结论文字是否完整？
□ 结论位置是否合理？
□ 是否有遗漏的结论？

验证项目6：图表完整性

□ 所有需要的图表是否都已生成？
□ 图表类型是否合适？
□ 图表数据是否准确？
□ 图表标题是否正确？
□ 图表标签是否清晰？

⚠️ 常见问题检查

问题1：内容被压缩或省略

错误示例：
原文：平台A估值14-21亿美元，平台B估值150-200万美元，估值差距10-20倍
HTML：平台A估值14-21亿美元，平台B估值150-200万美元（省略了估值差距）

✅ 正确做法：
HTML：平台A估值14-21亿美元，平台B估值150-200万美元，估值差距10-20倍

问题2：要点被合并

错误示例：
原文：
1. 商业模式分析
2. 用户定位分析
3. 定价策略分析
HTML：商业模式、用户定位、定价策略分析（3个要点合并为1个）

✅ 正确做法：
HTML：
1. 商业模式分析
2. 用户定位分析
3. 定价策略分析

问题3：数据被简化

错误示例：
原文：市场份额从2022年的35%增长到2024年的65%，增长率30个百分点
HTML：市场份额增长到65%（省略了起始数据和增长率）

✅ 正确做法：
HTML：市场份额从2022年的35%增长到2024年的65%，增长率30个百分点

输出产物

• 章节对照清单
• 内容完整性验证报告
• 问题清单（如有）

验证标准

• 所有章节都已包含
• 所有要点都已包含
• 所有数据都已包含
• 所有表格都已包含
• 所有结论都已包含
• 无内容被压缩或省略
• 无内容被篡改或简化

---

步骤 4.3：代码质量检查

目标

确保生成的HTML文件符合最佳实践，代码质量高，可访问可运行。

验证项目1：HTML结构验证

基础结构检查

□ DOCTYPE声明正确（<!DOCTYPE html>）？
□ HTML标签正确闭合？
□ head标签包含所有必要元素？
□ body标签正确闭合？
□ 所有HTML标签都正确闭合？

语义化标签检查

□ 使用了语义化标签（nav, section, article等）？
□ 标题层级正确（h1 → h2 → h3）？
□ 列表使用正确（ul, ol, li）？
□ 表格使用正确（table, thead, tbody, tr, td）？
□ 表单元素使用正确（如有）？

ID和Class检查

□ 所有ID都是唯一的？
□ Class命名合理且一致？
□ ID和Class命名遵循命名规范？
□ 没有使用内联样式（除了特殊情况）？

验证项目2：CSS样式验证

CSS结构检查

□ CSS在style标签内？
□ CSS语法正确？
□ 没有语法错误？
□ CSS选择器正确？
□ CSS属性值正确？

McKinsey设计系统检查

□ 使用了定义的CSS变量？
□ 配色方案符合McKinsey标准？
□ 字体大小符合规范？
□ 间距符合标准？
□ 布局符合原则？

响应式设计检查

□ 包含媒体查询？
□ 媒体查询断点合理？
□ 平板端显示正常？
□ 手机端显示正常？
□ 横竖屏切换正常？

验证项目3：JavaScript代码验证

JavaScript结构检查

□ JavaScript在script标签内？
□ JavaScript语法正确？
□ 没有语法错误？
□ 变量命名合理？
□ 函数命名合理？

功能完整性检查

□ 导航功能正常？
□ 上一页/下一页按钮正常？
□ 键盘导航正常？
□ 全屏切换正常？
□ 图表初始化正常？

Chart.js配置检查

□ Chart.js CDN引用正确？
□ 所有图表都有对应的canvas元素？
□ Canvas ID唯一？
□ 图表配置正确？
□ 图表数据准确？
□ 图表选项合理？

验证项目4：可访问性检查

□ 图片有alt属性（如有）？
□ 颜色对比度符合标准？
□ 字体大小合理？
□ 链接文本清晰？
□ 表单有标签（如有）？

验证项目5：性能优化检查

□ CSS和JavaScript内联（减少HTTP请求）？
□ 没有冗余代码？
□ 没有未使用的CSS？
□ 没有未使用的JavaScript？
□ 图表配置优化？

输出产物

• 代码质量验证报告
• 问题清单（如有）
• 修正建议（如有）

验证标准

• HTML结构正确
• CSS样式正确
• JavaScript代码正确
• 可访问性符合标准
• 性能优化合理
• 无语法错误
• 无冗余代码

---

步骤 4.4：功能验证

目标

实际运行HTML文件，验证所有功能是否正常工作。

验证项目1：基本功能验证

打开文件验证

□ HTML文件可以在浏览器中打开？
□ 文件加载速度正常？
□ 没有控制台错误？
□ 页面显示正常？

导航功能验证

□ 上一页按钮正常工作？
□ 下一页按钮正常工作？
□ 页面计数器正确显示？
□ 第一页时上一页按钮禁用？
□ 最后一页时下一页按钮禁用？

键盘导航验证

□ 左箭头键可以上一页？
□ 右箭头键可以下一页？
□ 上箭头键可以上一页？
□ 下箭头键可以下一页？
□ 空格键可以下一页？

全屏功能验证

□ 全屏按钮正常工作？
□ 进入全屏正常？
□ 退出全屏正常？
□ 全屏下导航正常？

验证项目2：图表显示验证

图表可见性验证

□ 所有图表都可见？
□ 图表宽度正常（不为0）？
□ 图表高度合理（400-500px）？
□ 图表位置正确？

图表数据验证

□ 图表数据正确显示？
□ 图表标签清晰？
□ 图表图例正确？
□ 图表标题正确？

图表交互验证

□ 鼠标悬停显示数据？
□ 图表动画正常？
□ 图表响应式缩放？
□ 多个图表都正常？

验证项目3：响应式设计验证

桌面端验证

□ 1920x1080分辨率显示正常？
□ 1366x768分辨率显示正常？
□ 导航栏显示正常？
□ 内容布局正常？

平板端验证

□ 1024x768分辨率显示正常？
□ 768x1024分辨率显示正常？
□ 布局自动调整？
□ 字体大小合适？

手机端验证

□ 375x667分辨率显示正常？
□ 414x896分辨率显示正常？
□ 布局自动调整？
□ 字体大小合适？
□ 触摸操作正常？

验证项目4：浏览器兼容性验证

□ Chrome浏览器正常？
□ Safari浏览器正常？
□ Firefox浏览器正常？
□ Edge浏览器正常？
□ 不同浏览器显示一致？

输出产物

• 功能验证报告
• 问题清单（如有）
• 修正建议（如有）

验证标准

• 所有基本功能正常
• 所有图表正常显示
• 响应式设计正常
• 浏览器兼容性良好
• 无功能性问题

---

步骤 4.5：生成最终报告

目标

汇总所有验证结果，生成完整的验收报告。

报告结构

# Beauty 命令执行完成报告

## 执行摘要

- 文档名称：[文档标题]
- 执行时间：[时间戳]
- 总耗时：[X分钟]
- 执行状态：[成功/失败]

## 步骤执行情况

### 步骤1：文档内容分析合并
- 执行状态：✅ 完成
- 文档类型：[报告/分析/方案/研究]
- 章节数量：[N个H2章节]
- 数据点数量：[N个]
- 关键结论：[N个]

### 步骤2：幻灯片内容转换与拆分
- 执行状态：✅ 完成
- 幻灯片总页数：[N]页
- 页面类型分布：
  ├─ 封面页：1页
  ├─ 目录页：[X]页
  ├─ 章节首页：[N]页
  ├─ 内容页：[M]页
  └─ 结束页：1页
- 内容完整性：100%
- 分页合理性：每页≤8个要点

### 步骤3：HTML样式布局代码规划与生成
- 执行状态：✅ 完成
- 资源读取：4个必读资源100%读取完成
- 代码规划：N页全部规划完成
- 布局选择：平均匹配度92%（85%-100%）
- HTML生成：1200行代码，4个阶段100%完成
- 图表数量：X个Chart.js图表
- 验证结果：6项验证100%通过
- 文件大小：约60KB
- 质量评分：A+（完全符合McKinsey标准）

### 步骤4：代码内容审核检验
- 执行状态：✅ 完成
- 资源使用验证：✅ 通过
- 内容完整性检查：✅ 通过
- 代码质量检查：✅ 通过
- 功能验证：✅ 通过
- 总体验收：✅ 通过

## 验证结果详情

### 资源使用验证
- 步骤2资源：✅ 3个资源全部读取并正确使用
- 步骤3资源：✅ 4个资源全部读取并正确使用
- 回退触发：❌ 无

### 内容完整性检查
- 章节完整性：✅ 100%（N个H2章节全部包含）
- 要点完整性：✅ 100%（M个要点全部包含）
- 数据完整性：✅ 100%（K个数据点全部包含）
- 表格完整性：✅ 100%（L个表格全部包含）
- 结论完整性：✅ 100%（J个结论全部包含）
- 内容压缩：❌ 无
- 内容篡改：❌ 无

### 代码质量检查
- HTML结构：✅ 正确
- CSS样式：✅ 正确
- JavaScript代码：✅ 正确
- 可访问性：✅ 符合标准
- 性能优化：✅ 合理
- 语法错误：❌ 无
- 冗余代码：❌ 无

### 功能验证
- 基本功能：✅ 正常
- 图表显示：✅ 正常
- 响应式设计：✅ 正常
- 浏览器兼容性：✅ 良好
- 功能性问题：❌ 无

## 输出产物

1. 内容结构大纲（步骤1）
2. 幻灯片页面清单（步骤2）
3. 代码规划方案（步骤3）
4. 完整HTML文件（步骤3）
5. 验证报告（步骤4）

## 文件信息

- 文件名：[文档标题]_McKinsey风格演示文稿.html
- 文件大小：约60KB
- 总代码行数：约1200行
- 加载时间：<1秒（本地）
- 依赖项：Chart.js CDN（唯一外部依赖）

## 质量评分

- 内容完整性：A+（100%保留）
- 代码质量：A+（符合最佳实践）
- 设计质量：A+（完全符合McKinsey标准）
- 功能完整性：A+（所有功能正常）
- 总体评分：A+（优秀）

## 建议

- ✅ 可以直接使用
- ✅ 无需修改
- ✅ 符合McKinsey标准

## 下一步

1. 在浏览器中打开HTML文件查看效果
2. 使用键盘方向键或按钮进行导航
3. 点击全屏按钮进入演示模式
4. 如需修改，请返回对应步骤重新执行

---

报告生成时间：[时间戳]
执行状态：✅ 成功完成

输出产物

• 完整的验收报告
• 质量评分
• 使用建议

验证标准

• 所有验证结果都已汇总
• 报告结构完整
• 质量评分准确
• 建议合理可行

---

⚠️ 回退机制

回退触发条件

以下任一情况发生，必须回退到对应步骤重新执行：

回退到步骤1

□ 文档分析不完整
□ 章节结构识别错误
□ 数据点遗漏
□ 结论遗漏

回退到步骤2

□ 资源未读取（chart-selection-guide.md等）
□ 图表选择错误
□ 内容被压缩或省略
□ 分页不合理
□ 页面遗漏

回退到步骤3

□ 资源未读取（best-practices.md等）
□ HTML结构错误
□ CSS样式错误
□ JavaScript代码错误
□ 图表配置错误
□ 响应式设计问题

回退执行流程

发现问题
  ↓
确定回退目标步骤
  ↓
记录问题详情
  ↓
输出回退建议
  ↓
等待用户确认
  ↓
返回对应步骤重新执行
  ↓
重新验证
  ↓
通过后继续

---

完成后输出

✅ 步骤4：代码内容审核检验 - 100%完成

🎉 全部4步流程执行完成！

验证摘要：
├─ 资源使用验证：✅ 通过（X/Y项）
├─ 内容完整性检查：✅ 通过（X/Y项）
├─ 代码质量检查：✅ 通过（X/Y项）
├─ 功能验证：✅ 通过（X/Y项）
└─ 总体验收：✅ 通过（X/Y项）

质量评分：A+（优秀/良好/合格/不合格）

执行状态跟踪：
├─ 步骤1：✅ 完成（文档内容分析合并）
├─ 步骤2：✅ 完成（幻灯片内容转换与拆分）
├─ 步骤3：✅ 完成（HTML样式布局代码规划与生成）
└─ 步骤4：✅ 完成（代码内容审核检验）

输出产物：
1. 资源使用验证报告
2. 内容完整性验证报告
3. 代码质量验证报告
4. 功能验证报告
5. 最终验收报告

文件信息：
- 文件名：[文档标题]_McKinsey风格演示文稿.html
- 文件路径：[完整路径]
- 文件大小：约XXKB
- 总代码行数：约XXXX行
- 幻灯片页数：N页
- 图表数量：M个

建议：
✅ 可以直接使用
✅ 无需修改
✅ 符合McKinsey标准

🎯 下一步操作：
1. 在浏览器中打开HTML文件查看效果
2. 使用键盘方向键或按钮进行导航
3. 点击全屏按钮进入演示模式
4. 如需修改，请返回对应步骤重新执行

Beauty命令执行完成！