beauty-json

# Beauty-Json Skill

将HTML幻灯片示例文件转换为JSON+HTML格式，实现数据与展示分离。

## 📋 核心功能

**主要任务**：
1. 读取HTML示例文件（从 `beauty-html/assets/` 目录）
2. 提取HTML框架结构（去除具体内容）
3. 生成JSON数据结构（包含所有内容）
4. 创建JSON驱动的HTML模板

**适用场景**：
- 为 `beauty-normal` 命令生成JSON数据
- 将现有HTML示例转换为JSON+HTML格式
- 创建新的JSON驱动的幻灯片模板

---

## 🎯 JSON数据结构规范

### 1. 根结构

```json
{
  "presentation": {
    "meta": {
      "title": "演示文稿标题",
      "subtitle": "副标题",
      "author": "作者",
      "date": "日期"
    },
    "slides": [
      {
        "id": 1,
        "type": "cover|toc|section|content|end",
        "template": "01-cover-page|02-two-column|03-three-column|05-chart-text|...",
        "title": "幻灯片标题",
        "content": { ... }
      }
    ]
  }
}
```

### 2. 幻灯片类型与内容结构

#### 2.1 封面页 (cover)

```json
{
  "id": 1,
  "type": "cover",
  "template": "01-cover-page",
  "title": "封面页",
  "content": {
    "mainTitle": "跨境垂直平台战略报告",
    "subtitle": "平台模式 vs 个人IP模式深度分析",
    "meta": {
      "date": "2026年1月",
      "author": "战略分析团队"
    }
  }
}
```

#### 2.2 双列对比页 (two-column)

```json
{
  "id": 2,
  "type": "content",
  "template": "02-two-column-comparison",
  "title": "平台模式 vs 个人IP模式",
  "content": {
    "leftColumn": {
      "title": "平台模式",
      "items": [
        "可复制性强，易于规模化",
        "网络效应明显，壁垒高",
        "生态闭环，数据价值高",
        "资本吸引力强，估值高",
        "运营复杂度高，投入大",
        "冷启动困难，需要临界规模"
      ],
      "highlight": "适合：有资本、有资源、追求规模"
    },
    "rightColumn": {
      "title": "个人IP模式",
      "items": [
        "启动快，成本低",
        "个人影响力强，粘性高",
        "灵活性强，转型容易",
        "现金流稳定，风险低",
        "规模化困难，天花板低",
        "个人依赖强，不易复制"
      ],
      "highlight": "适合：个人创业者、内容创作者"
    }
  }
}
```

#### 2.3 三列布局页 (three-column)

```json
{
  "id": 3,
  "type": "content",
  "template": "03-three-column",
  "title": "三大核心策略",
  "content": {
    "columns": [
      {
        "title": "策略一",
        "items": ["要点1", "要点2", "要点3"],
        "icon": "📊"
      },
      {
        "title": "策略二",
        "items": ["要点1", "要点2", "要点3"],
        "ico