beauty-step3

# Beauty 步骤3：HTML样式布局代码生成

## 目标

将步骤2生成的幻灯片页面清单转换为完整的、可运行的HTML文件。

采用**内容→组件→布局→代码**的优化流程。

## 核心原则 [CRITICAL]

**幻灯片格式 [强制 - 新增]**：
- 每个页面必须是独立的幻灯片，使用 `.slide` 类
- 幻灯片必须使用 `position: absolute` 定位，实现全屏切换
- 必须使用 `.active` 类控制当前显示的幻灯片
- 必须实现页面导航功能（点击按钮、键盘方向键、触摸滑动）
- 禁止使用网页形式（上下滚动查看所有内容）
- 禁止将所有内容放在一个长页面中

**图表使用 [强制 - 新增]**：
- 数据相关内容必须使用图表组件可视化
- 数值对比数据必须使用柱状图
- 趋势变化数据必须使用折线图
- 占比/比例数据必须使用饼图或环形图
- 多维评估数据必须使用雷达图
- 流程转化数据必须使用漏斗图
- 每个图表必须配合洞察面板（图表概述、数据解读、洞察分析）
- 禁止只有数据文本而没有图表可视化
- 禁止用简单列表代替图表

**颜色规范 [强制]**：
- 必须使用 beauty-html-reference.md 中定义的配色方案
- 禁止使用其他颜色系统
- 主背景色：#FFFFFF
- 标题栏背景：#000000
- 主要强调色：#F85d42

**必读资源**：
- [beauty-html-reference.md](./beauty-html-reference.md) - 简化版CSS样式库和HTML模板（包含颜色规范）
- [beauty-component-guide.md](./beauty-component-guide.md) - 简化版组件选择指南

**重要：布局选择必须严格遵循beauty-html skill规则**：
- 必须读取 `beauty-html/LAYOUTS_INDEX.md` 获取完整布局索引
- 必须读取 `beauty-html/COMPONENTS_INDEX.md` 获取组件索引
- 必须参考 `beauty-html/assets/layouts/*.html` 布局示例文件
- 必须参考 `beauty-html/assets/components/*.html` 组件示例文件

**项目特定资源优先级**（如果存在）：
- `.ppt_assets/INDEX.md` - 项目特定的布局和图表示例（优先级最高）

**Token限制处理**：
- 遇到token限制时使用"继续"机制
- 禁止压缩或省略资源读取
- 禁止跳过必读资源

## 执行流程

```
步骤3.1：读取必读资源 → 步骤3.2：识别内容元素 → 步骤3.3：匹配组件 → 步骤3.4：选择布局 → 步骤3.5：生成HTML
```

---

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

### 目标

完整读取所有必读资源，为后续代码生成提供参考。

### 必读资源清单

#### 核心资源（必须按顺序读取）

```
阶段1：读取 beauty-html/LAYOUTS_INDEX.md
├─ 布局类型索引（L1-L17）
├─ 布局结构示例
├─ 布局配置参数
└─ 布局选择决策树

阶段2：读取 beauty-html/COMPONENTS_INDEX.md
├─ 图表组件索引（C1-C3）
├─ 图示组件索引（D1-D3）
├─ 表格组件索引（T1）
├─ 组件CSS类名和配置
└─ 组件选择决策树

阶段3：读取 beauty-html-reference.md
├─ 配色方案（必须严格遵循）
├─ CSS变量定义
├─ 布局结构
└─ 组件模板

阶段4：读取 beauty-component-guide.md
├─ 图表组件选择决策树
├─ 图示组件说明
└─ 表格组件配置
```

#### 项目特定资源（如果存在）

```
阶段5：检查并读取 .ppt_assets/INDEX.md（如果存在）
├─ 项目特定的布局示例
├─ 项目特定的图表示例
├─ 项目特定的样式和组件
└─ ⚠️ 优先级规则：如果某个布局、图表或图文展示在 beauty-html 和 .ppt_assets 中都存在，
   必须优先使用 .ppt_assets/INDEX.md 中的版本
```

### 资源读取优先级规则 [CRITICAL]

```
优先级顺序（从高到低）：
1. .ppt_assets/INDEX.md（如果存在）
2. beauty-html/INDEX.md
3. beauty-html/LAYOUTS_INDEX.md