beauty-json

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Beauty-Json Skill

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

Convert HTML slide sample files to JSON+HTML format to achieve separation of data and presentation.

📋 核心功能

📋 Core Features

主要任务：

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

适用场景：

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

Main Tasks:

Read HTML sample files (from the
```
beauty-html/assets/
```
directory)
Extract HTML framework structure (remove specific content)
Generate JSON data structure (contains all content)
Create JSON-driven HTML templates

Applicable Scenarios:

Generate JSON data for the
```
beauty-normal
```
command
Convert existing HTML examples to JSON+HTML format
Create new JSON-driven slide templates

🎯 JSON数据结构规范

🎯 JSON Data Structure Specification

1. 根结构

1. Root Structure

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": { ... }
      }
    ]
  }
}

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. Slide Types and Content Structure

2.1 封面页 (cover)

2.1 Cover Page

json

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

json

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

2.2 双列对比页 (two-column)

2.2 Two-column Comparison Page

json

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

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)

2.3 Three-column Layout Page

json

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

json

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

2.4 图表+文本页 (chart-text)

2.4 Chart + Text Page

json

{
  "id": 4,
  "type": "content",
  "template": "05-chart-text",
  "title": "六大平台收入增长对比",
  "content": {
    "chart": {
      "type": "bar",
      "title": "2024年收入对比",
      "data": {
        "labels": ["GrowthBi", "Finder", "Foundy", "Clarity", "Panda", "Omega"],
        "datasets": [{
          "label": "年收入（百万美元）",
          "data": [120, 95, 88, 45, 35, 28],
          "backgroundColor": [
            "rgba(248, 93, 66, 0.8)",
            "rgba(85, 110, 230, 0.8)",
            "rgba(80, 165, 241, 0.8)",
            "rgba(52, 195, 143, 0.8)",
            "rgba(241, 180, 76, 0.8)",
            "rgba(116, 120, 141, 0.8)"
          ]
        }]
      },
      "options": {
        "responsive": true,
        "maintainAspectRatio": false
      }
    },
    "insights": [
      "GrowthBi引领增长，年增长率达120%",
      "Finder和Foundy保持稳健增长（80-90%）",
      "传统平台增长乏力，增速低于50%",
      "会员订阅模式是增长核心驱动力",
      "高客单价服务贡献主要利润"
    ],
    "highlight": "启示：会员订阅（稳定现金流）+ 高客单价服务（利润来源）是最佳商业模式"
  }
}

json

{
  "id": 4,
  "type": "content",
  "template": "05-chart-text",
  "title": "六大平台收入增长对比",
  "content": {
    "chart": {
      "type": "bar",
      "title": "2024年收入对比",
      "data": {
        "labels": ["GrowthBi", "Finder", "Foundy", "Clarity", "Panda", "Omega"],
        "datasets": [{
          "label": "年收入（百万美元）",
          "data": [120, 95, 88, 45, 35, 28],
          "backgroundColor": [
            "rgba(248, 93, 66, 0.8)",
            "rgba(85, 110, 230, 0.8)",
            "rgba(80, 165, 241, 0.8)",
            "rgba(52, 195, 143, 0.8)",
            "rgba(241, 180, 76, 0.8)",
            "rgba(116, 120, 141, 0.8)"
          ]
        }]
      },
      "options": {
        "responsive": true,
        "maintainAspectRatio": false
      }
    },
    "insights": [
      "GrowthBi引领增长，年增长率达120%",
      "Finder和Foundy保持稳健增长（80-90%）",
      "传统平台增长乏力，增速低于50%",
      "会员订阅模式是增长核心驱动力",
      "高客单价服务贡献主要利润"
    ],
    "highlight": "启示：会员订阅（稳定现金流）+ 高客单价服务（利润来源）是最佳商业模式"
  }
}

2.5 目录页 (toc)

2.5 Table of Contents Page

json

{
  "id": 5,
  "type": "toc",
  "template": "08-table-of-contents",
  "title": "目录",
  "content": {
    "items": [
      { "number": "01", "title": "市场分析", "page": 3 },
      { "number": "02", "title": "竞争格局", "page": 8 },
      { "number": "03", "title": "战略建议", "page": 15 },
      { "number": "04", "title": "实施路径", "page": 22 }
    ]
  }
}

json

{
  "id": 5,
  "type": "toc",
  "template": "08-table-of-contents",
  "title": "目录",
  "content": {
    "items": [
      { "number": "01", "title": "市场分析", "page": 3 },
      { "number": "02", "title": "竞争格局", "page": 8 },
      { "number": "03", "title": "战略建议", "page": 15 },
      { "number": "04", "title": "实施路径", "page": 22 }
    ]
  }
}

2.6 章节首页 (section)

2.6 Section Home Page

json

{
  "id": 6,
  "type": "section",
  "template": "11-chapter-overview",
  "title": "第一章 市场分析",
  "content": {
    "subtitle": "市场规模与增长趋势",
    "description": "深入分析当前市场状况，识别关键增长机会"
  }
}

json

{
  "id": 6,
  "type": "section",
  "template": "11-chapter-overview",
  "title": "第一章 市场分析",
  "content": {
    "subtitle": "市场规模与增长趋势",
    "description": "深入分析当前市场状况，识别关键增长机会"
  }
}

2.7 数据强调页 (data-emphasis)

2.7 Data Emphasis Page

json

{
  "id": 7,
  "type": "content",
  "template": "06-data-emphasis",
  "title": "关键数据",
  "content": {
    "metrics": [
      {
        "value": "120%",
        "label": "年增长率",
        "description": "市场高速增长"
      },
      {
        "value": "$5.2B",
        "label": "市场规模",
        "description": "2024年市场规模"
      },
      {
        "value": "85%",
        "label": "市场份额",
        "description": "头部企业占比"
      }
    ]
  }
}

json

{
  "id": 7,
  "type": "content",
  "template": "06-data-emphasis",
  "title": "关键数据",
  "content": {
    "metrics": [
      {
        "value": "120%",
        "label": "年增长率",
        "description": "市场高速增长"
      },
      {
        "value": "$5.2B",
        "label": "市场规模",
        "description": "2024年市场规模"
      },
      {
        "value": "85%",
        "label": "市场份额",
        "description": "头部企业占比"
      }
    ]
  }
}

🎨 HTML框架模板规范

🎨 HTML Framework Template Specification

1. 通用HTML结构

1. General HTML Structure

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>McKinsey风格演示文稿</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <style>
        /* CSS样式 - McKinsey规范 */
    </style>
</head>
<body>
    <div id="presentation-container"></div>

    <script>
        // JSON数据
        const presentationData = {
            "presentation": {
                "meta": { ... },
                "slides": [ ... ]
            }
        };

        // 渲染函数
        function renderPresentation(data) {
            const container = document.getElementById('presentation-container');
            // 渲染逻辑
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            renderPresentation(presentationData);
        });
    </script>
</body>
</html>

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>McKinsey风格演示文稿</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <style>
        /* CSS样式 - McKinsey规范 */
    </style>
</head>
<body>
    <div id="presentation-container"></div>

    <script>
        // JSON数据
        const presentationData = {
            "presentation": {
                "meta": { ... },
                "slides": [ ... ]
            }
        };

        // 渲染函数
        function renderPresentation(data) {
            const container = document.getElementById('presentation-container');
            // 渲染逻辑
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            renderPresentation(presentationData);
        });
    </script>
</body>
</html>

2. 模板渲染函数

2. Template Rendering Function

2.1 封面页渲染

2.1 Cover Page Rendering

javascript

function renderCoverPage(content) {
    return `
        <div class="slide cover-page">
            <div class="cover-content">
                <h1>${content.mainTitle}</h1>
                <div class="divider"></div>
                <p class="subtitle">${content.subtitle}</p>
                <div class="meta-info">
                    <p>报告日期：${content.meta.date}</p>
                    <p>作者：${content.meta.author}</p>
                </div>
            </div>
        </div>
    `;
}

javascript

function renderCoverPage(content) {
    return `
        <div class="slide cover-page">
            <div class="cover-content">
                <h1>${content.mainTitle}</h1>
                <div class="divider"></div>
                <p class="subtitle">${content.subtitle}</p>
                <div class="meta-info">
                    <p>报告日期：${content.meta.date}</p>
                    <p>作者：${content.meta.author}</p>
                </div>
            </div>
        </div>
    `;
}

2.2 双列对比页渲染

2.2 Two-column Comparison Page Rendering

javascript

function renderTwoColumnPage(content) {
    return `
        <div class="slide two-column-page">
            <div class="slide-header">
                <h2>${content.title}</h2>
            </div>
            <div class="comparison-container">
                <div class="column left">
                    <div class="column-header">${content.leftColumn.title}</div>
                    <ul class="column-content">
                        ${content.leftColumn.items.map(item => `<li>${item}</li>`).join('')}
                    </ul>
                    <div class="highlight-box">
                        💡 ${content.leftColumn.highlight}
                    </div>
                </div>
                <div class="column right">
                    <div class="column-header">${content.rightColumn.title}</div>
                    <ul class="column-content">
                        ${content.rightColumn.items.map(item => `<li>${item}</li>`).join('')}
                    </ul>
                    <div class="highlight-box">
                        💡 ${content.rightColumn.highlight}
                    </div>
                </div>
            </div>
        </div>
    `;
}

javascript

function renderTwoColumnPage(content) {
    return `
        <div class="slide two-column-page">
            <div class="slide-header">
                <h2>${content.title}</h2>
            </div>
            <div class="comparison-container">
                <div class="column left">
                    <div class="column-header">${content.leftColumn.title}</div>
                    <ul class="column-content">
                        ${content.leftColumn.items.map(item => `<li>${item}</li>`).join('')}
                    </ul>
                    <div class="highlight-box">
                        💡 ${content.leftColumn.highlight}
                    </div>
                </div>
                <div class="column right">
                    <div class="column-header">${content.rightColumn.title}</div>
                    <ul class="column-content">
                        ${content.rightColumn.items.map(item => `<li>${item}</li>`).join('')}
                    </ul>
                    <div class="highlight-box">
                        💡 ${content.rightColumn.highlight}
                    </div>
                </div>
            </div>
        </div>
    `;
}

2.3 图表+文本页渲染

2.3 Chart + Text Page Rendering

javascript

function renderChartTextPage(content, slideId) {
    const canvasId = `chart-${slideId}`;

    return `
        <div class="slide chart-text-page">
            <div class="slide-header">
                <h2>${content.title}</h2>
            </div>
            <div class="chart-text-container">
                <div class="chart-section">
                    <div class="chart-container">
                        <canvas id="${canvasId}"></canvas>
                    </div>
                </div>
                <div class="text-section">
                    <div class="insight-title">关键洞察</div>
                    <ul class="insight-list">
                        ${content.insights.map(insight => `<li>${insight}</li>`).join('')}
                    </ul>
                    <div class="highlight-box">
                        <p>💡 ${content.highlight}</p>
                    </div>
                </div>
            </div>
        </div>
    `;
}

javascript

function renderChartTextPage(content, slideId) {
    const canvasId = `chart-${slideId}`;

    return `
        <div class="slide chart-text-page">
            <div class="slide-header">
                <h2>${content.title}</h2>
            </div>
            <div class="chart-text-container">
                <div class="chart-section">
                    <div class="chart-container">
                        <canvas id="${canvasId}"></canvas>
                    </div>
                </div>
                <div class="text-section">
                    <div class="insight-title">关键洞察</div>
                    <ul class="insight-list">
                        ${content.insights.map(insight => `<li>${insight}</li>`).join('')}
                    </ul>
                    <div class="highlight-box">
                        <p>💡 ${content.highlight}</p>
                    </div>
                </div>
            </div>
        </div>
    `;
}

🔄 转换流程

🔄 Conversion Process

步骤1：读取HTML示例文件

Step 1: Read HTML Sample File

javascript

function readHTMLTemplate(templateName) {
    const templatePath = `beauty-html/assets/${templateName}.html`;
    // 读取HTML文件内容
}

javascript

function readHTMLTemplate(templateName) {
    const templatePath = `beauty-html/assets/${templateName}.html`;
    // 读取HTML文件内容
}

步骤2：提取HTML框架

Step 2: Extract HTML Framework

提取规则：

保留完整的HTML结构（DOCTYPE, html, head, body）
保留CSS样式（完整的<style>标签）
保留JavaScript框架（完整的<script>标签结构）
移除具体内容数据（替换为占位符或数据绑定）
保留图表配置框架（移除具体数据）

Extraction Rules:

Retain the complete HTML structure (DOCTYPE, html, head, body)
Retain CSS styles (complete <style> tag)
Retain JavaScript framework (complete <script> tag structure)
Remove specific content data (replace with placeholders or data bindings)
Retain chart configuration framework (remove specific data)

步骤3：生成JSON数据

Step 3: Generate JSON Data

数据提取规则：

从HTML中提取所有文本内容
识别数据结构（列表、表格、图表数据）
按照JSON结构规范组织数据
确保数据完整性（100%保留）

Data Extraction Rules:

Extract all text content from HTML
Identify data structures (lists, tables, chart data)
Organize data according to JSON structure specifications
Ensure data integrity (100% retention)

步骤4：创建JSON驱动的HTML

Step 4: Create JSON-driven HTML

整合规则：

使用提取的HTML框架
嵌入JSON数据（在<script>标签中）
实现渲染函数（根据JSON数据动态生成HTML）
确保图表正确渲染（Chart.js配置）

Integration Rules:

Use the extracted HTML framework
Embed JSON data (in <script> tag)
Implement rendering functions (dynamically generate HTML based on JSON data)
Ensure correct chart rendering (Chart.js configuration)

📊 支持的模板类型

📊 Supported Template Types

模板文件	模板类型	JSON结构
01-cover-page.html	封面页	cover
02-two-column-comparison.html	双列对比	two-column
03-three-column.html	三列布局	three-column
04-card-grid.html	卡片网格	card-grid
05-chart-text.html	图表+文本	chart-text
06-data-emphasis.html	数据强调	data-emphasis
08-table-of-contents.html	目录页	toc
11-chapter-overview.html	章节首页	section
12-traffic-analysis.html	流量分析	chart-text
13-user-positioning.html	用户定位	chart-text
14-user-demand-rating.html	用户需求评分	chart-text

Template File	Template Type	JSON Structure
01-cover-page.html	Cover Page	cover
02-two-column-comparison.html	Two-column Comparison	two-column
03-three-column.html	Three-column Layout	three-column
04-card-grid.html	Card Grid	card-grid
05-chart-text.html	Chart + Text	chart-text
06-data-emphasis.html	Data Emphasis	data-emphasis
08-table-of-contents.html	Table of Contents	toc
11-chapter-overview.html	Section Home Page	section
12-traffic-analysis.html	Traffic Analysis	chart-text
13-user-positioning.html	User Positioning	chart-text
14-user-demand-rating.html	User Demand Rating	chart-text

🎯 使用示例

🎯 Usage Examples

示例1：转换封面页

Example 1: Convert Cover Page

输入HTML：

01-cover-page.html

输出JSON：

json

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

输出HTML框架：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>McKinsey风格演示文稿</title>
    <style>
        /* 完整的CSS样式（从原HTML提取） */
    </style>
</head>
<body>
    <div id="presentation-container"></div>

    <script>
        const presentationData = { /* JSON数据 */ };

        function renderCoverPage(content) {
            return `
                <div class="slide cover-page">
                    <div class="cover-content">
                        <h1>${content.mainTitle}</h1>
                        <div class="divider"></div>
                        <p class="subtitle">${content.subtitle}</p>
                        <div class="meta-info">
                            <p>报告日期：${content.meta.date}</p>
                            <p>作者：${content.meta.author}</p>
                        </div>
                    </div>
                </div>
            `;
        }

        function renderPresentation(data) {
            const container = document.getElementById('presentation-container');
            data.presentation.slides.forEach(slide => {
                if (slide.type === 'cover') {
                    container.innerHTML += renderCoverPage(slide.content);
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            renderPresentation(presentationData);
        });
    </script>
</body>
</html>

Input HTML:

01-cover-page.html

Output JSON:

json

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

Output HTML Framework:

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>McKinsey风格演示文稿</title>
    <style>
        /* 完整的CSS样式（从原HTML提取） */
    </style>
</head>
<body>
    <div id="presentation-container"></div>

    <script>
        const presentationData = { /* JSON数据 */ };

        function renderCoverPage(content) {
            return `
                <div class="slide cover-page">
                    <div class="cover-content">
                        <h1>${content.mainTitle}</h1>
                        <div class="divider"></div>
                        <p class="subtitle">${content.subtitle}</p>
                        <div class="meta-info">
                            <p>报告日期：${content.meta.date}</p>
                            <p>作者：${content.meta.author}</p>
                        </div>
                    </div>
                </div>
            `;
        }

        function renderPresentation(data) {
            const container = document.getElementById('presentation-container');
            data.presentation.slides.forEach(slide => {
                if (slide.type === 'cover') {
                    container.innerHTML += renderCoverPage(slide.content);
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            renderPresentation(presentationData);
        });
    </script>
</body>
</html>

示例2：转换图表+文本页

Example 2: Convert Chart + Text Page

输入HTML：

05-chart-text.html

输出JSON：

json

{
  "presentation": {
    "slides": [{
      "id": 4,
      "type": "content",
      "template": "05-chart-text",
      "title": "六大平台收入增长对比",
      "content": {
        "chart": {
          "type": "bar",
          "title": "2024年收入对比",
          "data": {
            "labels": ["GrowthBi", "Finder", "Foundy", "Clarity", "Panda", "Omega"],
            "datasets": [{
              "label": "年收入（百万美元）",
              "data": [120, 95, 88, 45, 35, 28],
              "backgroundColor": [
                "rgba(248, 93, 66, 0.8)",
                "rgba(85, 110, 230, 0.8)",
                "rgba(80, 165, 241, 0.8)",
                "rgba(52, 195, 143, 0.8)",
                "rgba(241, 180, 76, 0.8)",
                "rgba(116, 120, 141, 0.8)"
              ]
            }]
          },
          "options": {
            "responsive": true,
            "maintainAspectRatio": false
          }
        },
        "insights": [
          "GrowthBi引领增长，年增长率达120%",
          "Finder和Foundy保持稳健增长（80-90%）",
          "传统平台增长乏力，增速低于50%",
          "会员订阅模式是增长核心驱动力",
          "高客单价服务贡献主要利润"
        ],
        "highlight": "启示：会员订阅（稳定现金流）+ 高客单价服务（利润来源）是最佳商业模式"
      }
    }]
  }
}

Input HTML:

05-chart-text.html

Output JSON:

json

{
  "presentation": {
    "slides": [{
      "id": 4,
      "type": "content",
      "template": "05-chart-text",
      "title": "六大平台收入增长对比",
      "content": {
        "chart": {
          "type": "bar",
          "title": "2024年收入对比",
          "data": {
            "labels": ["GrowthBi", "Finder", "Foundy", "Clarity", "Panda", "Omega"],
            "datasets": [{
              "label": "年收入（百万美元）",
              "data": [120, 95, 88, 45, 35, 28],
              "backgroundColor": [
                "rgba(248, 93, 66, 0.8)",
                "rgba(85, 110, 230, 0.8)",
                "rgba(80, 165, 241, 0.8)",
                "rgba(52, 195, 143, 0.8)",
                "rgba(241, 180, 76, 0.8)",
                "rgba(116, 120, 141, 0.8)"
              ]
            }]
          },
          "options": {
            "responsive": true,
            "maintainAspectRatio": false
          }
        },
        "insights": [
          "GrowthBi引领增长，年增长率达120%",
          "Finder和Foundy保持稳健增长（80-90%）",
          "传统平台增长乏力，增速低于50%",
          "会员订阅模式是增长核心驱动力",
          "高客单价服务贡献主要利润"
        ],
        "highlight": "启示：会员订阅（稳定现金流）+ 高客单价服务（利润来源）是最佳商业模式"
      }
    }]
  }
}

⚠️ Token限制处理原则（严格执行，不得偷工减料）

⚠️ Token Limit Handling Principles (Strictly enforced, no cutting corners)

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

当遇到 token 限制或上下文长度问题时，必须使用"继续"分页方式，绝对禁止：

❌ 压缩或省略资源读取
❌ 跳过必读资源
❌ 简化执行步骤
❌ 减少生成内容
❌ 使用摘要代替完整内容
❌ 精简数据内容
❌ 偷工减料节省token

正确处理方式：使用"继续"机制

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

分段加载原则：

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

关键规则：

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

🔑 Core Rule (must be strictly followed): If the data content is too large or the token is too long, automatically use 'continue' to load data in segments. Never simplify or cut corners to save tokens. It is strictly forbidden to skip content or use summaries to save tokens.

When encountering token limits or context length issues, you must use the "continue" pagination method. The following are strictly prohibited:

❌ Compress or omit resource reading
❌ Skip required resources
❌ Simplify execution steps
❌ Reduce generated content
❌ Use summaries instead of full content
❌ Simplify data content
❌ Cut corners to save tokens

Correct handling method: Use the "continue" mechanism

1. After completing the currently executable part
2. Clearly state: "Due to token limits, the task is not completed, please enter 'continue' to get the remaining part"
3. Wait for the user to enter "continue"
4. Continue to execute the remaining steps
5. Repeat until the task is fully completed

Segmented loading principles:

✅ Full retention: Each segment of data must be 100% retained, no omissions, no compression
✅ Clear segmentation: Clearly mark which segment it is, total number of segments
✅ Continuous execution: Automatically prompt "continue" after each segment is completed, wait for user confirmation
✅ Quality first: Multiple rounds of dialogue are better than reducing quality
❌ Prohibit simplification: Never simplify data content to save tokens
❌ Prohibit cutting corners: Never cut corners to save tokens

Key rules:

✅ Quality > Speed: Multiple rounds of dialogue are better than reducing quality
✅ Completeness > Simplification: Multiple executions are better than compressing content
✅ Standard > Compromise: Triggering continue is better than cutting corners

⚠️ 注意事项

⚠️ Notes

1. 数据完整性

1. Data Integrity

✅ 必须100%保留原HTML中的所有内容
✅ 不得遗漏任何文本、数据、图表信息
✅ 确保JSON数据结构完整

✅ Must 100% retain all content in the original HTML
✅ Must not omit any text, data, chart information
✅ Ensure complete JSON data structure

2. 设计规范

2. Design Specifications

✅ 严格遵循McKinsey设计规范
✅ 使用标准色板（#FFFFFF, #000000, #F85d42, #74788d, #556EE6, #34c38f, #50a5f1, #f1b44c）
✅ 使用系统字体（-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC"等）
✅ 禁止使用非McKinsey风格元素（紫色渐变、圆角卡片、通用模板等）

✅ Strictly follow McKinsey design specifications
✅ Use standard color palette (#FFFFFF, #000000, #F85d42, #74788d, #556EE6, #34c38f, #50a5f1, #f1b44c)
✅ Use system fonts (-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", etc.)
✅ Prohibit the use of non-McKinsey style elements (purple gradients, rounded cards, general templates, etc.)

3. 图表配置

3. Chart Configuration

✅ 强制设置
```
responsive: true
```
✅ 强制设置
```
maintainAspectRatio: false
```
✅ 强制设置
```
width: 100% !important
```
✅ 确保图表容器最小高度为400px

✅ Force set
```
responsive: true
```
✅ Force set
```
maintainAspectRatio: false
```
✅ Force set
```
width: 100% !important
```
✅ Ensure the minimum height of the chart container is 400px

4. 响应式设计

4. Responsive Design

✅ 保留所有响应式CSS规则
✅ 确保移动端显示正常
✅ 保持McKinsey设计标准

✅ Retain all responsive CSS rules
✅ Ensure normal display on mobile terminals
✅ Maintain McKinsey design standards

5. 代码质量

5. Code Quality

✅ HTML结构完整且正确
✅ CSS样式完整且符合规范
✅ JavaScript代码完整且无错误
✅ 无语法错误
✅ 无冗余代码

✅ HTML structure is complete and correct
✅ CSS styles are complete and meet specifications
✅ JavaScript code is complete and error-free
✅ No syntax errors
✅ No redundant code

🚀 执行流程

🚀 Execution Process

自动化转换流程

Automated Conversion Process

开始
  ↓
步骤1：读取HTML示例文件
  ├─ 从beauty-html/assets/读取HTML文件
  ├─ 解析HTML结构
  └─ 提取CSS和JavaScript框架
  ↓
步骤2：提取HTML框架
  ├─ 保留HTML结构
  ├─ 保留CSS样式
  ├─ 保留JavaScript框架
  └─ 移除具体内容数据
  ↓
步骤3：生成JSON数据
  ├─ 提取所有文本内容
  ├─ 识别数据结构
  ├─ 组织JSON数据
  └─ 验证数据完整性
  ↓
步骤4：创建JSON驱动的HTML
  ├─ 整合HTML框架
  ├─ 嵌入JSON数据
  ├─ 实现渲染函数
  └─ 验证渲染效果
  ↓
完成！输出JSON数据和HTML文件

Start
  ↓
Step 1: Read HTML sample file
  ├─ Read HTML file from beauty-html/assets/
  ├─ Parse HTML structure
  └─ Extract CSS and JavaScript framework
  ↓
Step 2: Extract HTML framework
  ├─ Retain HTML structure
  ├─ Retain CSS styles
  ├─ Retain JavaScript framework
  └─ Remove specific content data
  ↓
Step 3: Generate JSON data
  ├─ Extract all text content
  ├─ Identify data structure
  ├─ Organize JSON data
  └─ Verify data integrity
  ↓
Step 4: Create JSON-driven HTML
  ├─ Integrate HTML framework
  ├─ Embed JSON data
  ├─ Implement rendering function
  └─ Verify rendering effect
  ↓
Completed! Output JSON data and HTML files

📝 输出产物

📝 Output Products

1. JSON数据文件

1. JSON Data File

文件名：
```
[模板名称]_data.json
```
格式：标准JSON格式
内容：包含所有幻灯片内容数据

File name:
```
[template name]_data.json
```
Format: Standard JSON format
Content: Contains all slide content data

2. HTML框架文件

2. HTML Framework File

文件名：
```
[模板名称]_template.html
```
格式：标准HTML5格式
内容：HTML框架 + CSS样式 + JavaScript渲染逻辑

File name:
```
[template name]_template.html
```
Format: Standard HTML5 format
Content: HTML framework + CSS styles + JavaScript rendering logic

3. 完整HTML文件

3. Complete HTML File

文件名：
```
[模板名称]_complete.html
```
格式：标准HTML5格式
内容：HTML框架 + JSON数据 + 渲染逻辑

File name:
```
[template name]_complete.html
```
Format: Standard HTML5 format
Content: HTML framework + JSON data + rendering logic

🎯 成功标准

🎯 Success Criteria

转换成功标志

Conversion Success Signs

当以下所有条件都满足时，转换成功：

数据完整性：

✅ 所有原HTML内容都已提取到JSON
✅ 无内容遗漏或丢失
✅ 数据结构符合规范
✅ JSON格式正确

代码完整性：

✅ HTML结构完整且正确
✅ CSS样式完整且符合规范
✅ JavaScript代码完整且无错误
✅ 渲染函数正确实现

功能验证：

✅ HTML可以正确加载JSON数据
✅ JavaScript可以正确解析JSON
✅ JavaScript可以正确渲染HTML
✅ 所有内容正确显示
✅ 所有图表正确显示
✅ 响应式设计正常

设计规范：

✅ 严格遵循McKinsey设计规范
✅ 使用标准色板
✅ 使用系统字体
✅ 未使用非McKinsey风格元素

The conversion is successful when all of the following conditions are met:

Data Integrity:

✅ All original HTML content has been extracted to JSON
✅ No content omission or loss
✅ Data structure meets specifications
✅ JSON format is correct

Code Integrity:

✅ HTML structure is complete and correct
✅ CSS styles are complete and meet specifications
✅ JavaScript code is complete and error-free
✅ Rendering function is correctly implemented

Function Verification:

✅ HTML can correctly load JSON data
✅ JavaScript can correctly parse JSON
✅ JavaScript can correctly render HTML
✅ All content is displayed correctly
✅ All charts are displayed correctly
✅ Responsive design works normally

Design Specifications:

✅ Strictly follow McKinsey design specifications
✅ Use standard color palette
✅ Use system fonts
✅ No non-McKinsey style elements are used