beauty-normal-step3

# Beauty-Normal 步骤3：JSON数据生成与HTML渲染 / Beauty-Normal Step 3: JSON Data Generation and HTML Rendering

## 目标 / Goal

将步骤2生成的幻灯片页面清单转换为JSON数据结构，并使用JSON+HTML方式生成完整的、可运行的McKinsey风格HTML文件。

Convert the slide page list generated in Step 2 into JSON data structure, and use JSON+HTML method to generate a complete, runnable McKinsey-style HTML file.

## ⚠️ 核心原则

**🔑 必须读取并参考skill资源：**
- **必须读** `beauty-html/references/best-practices.md`
- **必须读** `beauty-html/references/mckinsey-design-system.md`
- **必须读** `beauty-html/assets/presentation-template.html`
- **必须读** `beauty-html/assets/TEMPLATE_USAGE_GUIDE.md`
- **必须读** `beauty-html/assets/INDEX.md`
- **必须读** `beauty-json/SKILL.md`（⚠️ 新增：JSON数据结构规范）

**⚠️ Token限制处理原则：**

**🔑 最核心规则（必须严格遵守）：如果数据内容过大，或者token过长，则自动使用'继续'进行'分段'加载数据，绝对不能精简、偷工减料的节省token,严禁为了省token而跳过内容或使用摘要**

**当遇到 token 限制或上下文长度问题时，必须使用"继续"分页方式，绝对禁止：**
- ❌ 压缩或省略资源读取
- ❌ 跳过必读资源
- ❌ 简化执行步骤
- ❌ 减少生成内容
- ❌ 使用摘要代替完整内容
- ❌ 精简数据内容
- ❌ 偷工减料节省token

**正确处理方式：使用"继续"机制**
```
1. 在完成当前可执行的部分后
2. 明确说明："由于 token 限制，任务未完成，请输入'继续'以获取剩余部分"
3. 等待用户输入"继续"后
4. 继续执行剩余步骤
5. 重复直到任务完全完成
```

**分段加载原则：**
- ✅ **完整保留**：每段数据都必须100%保留，无遗漏、无压缩
- ✅ **分段清晰**：明确标注当前是第几段，共几段
- ✅ **连续执行**：每段完成后自动提示"继续"，等待用户确认
- ✅ **质量优先**：宁可多轮对话，不可降低质量
- ❌ **禁止精简**：绝对不能为了省token而精简数据内容
- ❌ **禁止偷工**：绝对不能为了省token而偷工减料

**关键规则：**
- ✅ **质量 > 速度**：宁可多轮对话，不可降低质量
- ✅ **完整 > 简化**：宁可分多次执行，不可压缩内容
- ✅ **标准 > 妥协**：宁可触发继续，不可偷工减料

## 📋 执行流程（4个子步骤）

```
步骤3.1：读取必读资源
  ↓
步骤3.2：设计JSON数据结构
  ↓
步骤3.3：生成完整HTML文件（4个阶段）
  ├─ 阶段1：生成HTML框架和完整CSS样式
  ├─ 阶段2：生成JSON数据（包含所有幻灯片内容）
  ├─ 阶段3：生成HTML容器和JavaScript渲染逻辑
  └─ 阶段4：生成结束标签
  ↓
步骤3.4：验证代码质量
```

---

## 步骤 3.1：读取必读资源

### 目标

完整读取所有必读资源，为后续JSON数据设计和HTML生成提供参考。

### 必读资源清单

```
1. beauty-html/references/best-practices.md
   - HTML最佳实践
   - 语义化标签使用
   - 可访问性要求

2. beauty-html/references/mckinsey-design-system.md
   - McKinsey配色方案
   - 字体规范
   - 间距标准
   - 布局原则

3. beauty-html/assets/presentation-template.html
   - HTML结构模板
   - 导航功能
   - 响应式设计

4. beauty-html/assets/TEMPLATE_USAGE_GUIDE.md
   -