SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsbeauty-json

beauty-json

Office & productivity

View repository

Updated 10-16 08:08

About this skill

Beauty-Json Skill

Convert HTML slide example files to JSON+HTML format, achieving separation of data and presentation.

📋 Core Features

Main Tasks：

  1. Read HTML example files (from the beauty-html/assets/ directory)
  2. Extract the HTML framework structure (remove specific content)
  3. Generate JSON data structure (containing all content)
  4. Create a JSON-driven HTML template

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 Data Structure Specification

1. Root Structure

{
  "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. Slide Types and Content Structures

2.1 Cover Page (cover)

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

2.2 Two-Column Comparison Page (two-column)

{
  "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 Layout Page (three-column)

{
  "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 Page (chart-text)

{
  "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 Table of Contents Page (toc)

{
  "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 Cover Page (section)

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

2.7 Data Emphasis Page (data-emphasis)

{
  "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 Framework Template Specification

1. General HTML Structure

<!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. Template Rendering Functions

2.1 Cover Page Rendering

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 Two-Column Comparison Page Rendering

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 Chart + Text Page Rendering

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

Step 1: Read HTML Example Files

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

Step 2: Extract HTML Framework

Extraction Rules：

  1. Keep the complete HTML structure (DOCTYPE, html, head, body)
  2. Keep CSS styles (complete tags)
  3. Keep the JavaScript framework (complete tag structure)
  4. Remove specific content data (replace with placeholders or data bindings)
  5. Keep the chart configuration framework (remove specific data)

Step 3: Generate JSON Data

Data Extraction Rules：

  1. Extract all text content from the HTML
  2. Identify data structures (lists, tables, chart data)
  3. Organize data according to the JSON structure specification
  4. Ensure data integrity (100% preserved)

Step 4: Create JSON-Driven HTML

Integration Rules：

  1. Use the extracted HTML framework
  2. Embed JSON data (in tags)
  3. Implement rendering functions (dynamically generate HTML based on JSON data)
  4. Ensure charts render correctly (Chart.js configuration)

📊 Supported Template Types

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 Page toc
11-chapter-overview.html Section Cover Page section
12-traffic-analysis.html Traffic Analysis chart-text
13-user-positioning.html User Targeting chart-text
14-user-demand-rating.html User Demand Scoring chart-text

🎯 Usage Examples

Example 1: Convert a Cover Page

Input HTML：01-cover-page.html

Output 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：

<!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>

Example 2: Convert a Chart + Text Page

Input HTML：05-chart-text.html

Output 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 Limit Handling Principles (strictly enforced, no cutting corners)

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

When encountering token limits or context length issues, the "continue" pagination method must be used. Absolutely forbidden:

  • ❌ Compressing or omitting resource reading
  • ❌ Skipping required resources
  • ❌ Simplifying execution steps
  • ❌ Reducing generated content
  • ❌ Using summaries instead of complete content
  • ❌ Streamlining data content
  • ❌ Cutting corners to save tokens

Correct handling method: use the "continue" mechanism

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

Segmented loading principles:

  • ✅ Complete retention: Each segment of data must be 100% retained, with no omissions and no compression
  • ✅ Clear segmentation: Clearly indicate which segment this is and how many segments there are in total
  • ✅ Continuous execution: After each segment is completed, automatically prompt "continue" and wait for user confirmation
  • ✅ Quality first: Better to have multiple rounds of dialogue than to lower quality
  • ❌ No streamlining: Absolutely must not streamline data content in order to save tokens
  • ❌ No cutting corners: Absolutely must not cut corners in order to save tokens

Key rules:

  • ✅ Quality > Speed: Better to have multiple rounds of dialogue than to lower quality
  • ✅ Complete > Simplified: Better to execute in multiple passes than to compress content
  • ✅ Standards > Compromise: Better to trigger continue than to cut corners

⚠️ Notes

1. Data integrity

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

2. Design specifications

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

3. Chart configuration

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

4. Responsive design

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

5. Code quality

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

🚀 Execution flow

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文件

📝 Output artifacts

1. JSON data file

  • File name:[模板名称]_data.json
  • Format: standard JSON format
  • Content: includes all slide content data

2. HTML framework file

  • File name:[模板名称]_template.html
  • Format: Standard HTML5 format
  • Content: HTML framework + CSS styles + JavaScript rendering logic

3. Complete HTML file

  • File name:[模板名称]_complete.html
  • Format: Standard HTML5 format
  • Content: HTML framework + JSON data + rendering logic

🎯 Success criteria

Conversion success indicators

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

Data integrity：

  • ✅ All original HTML content has been extracted into JSON
  • ✅ No content omissions or losses
  • ✅ The data structure conforms to the specification
  • ✅ The JSON format is correct

Code integrity：

  • ✅ The HTML structure is complete and correct
  • ✅ The CSS styles are complete and conform to the specification
  • ✅ The JavaScript code is complete and error-free
  • ✅ The rendering function is correctly implemented

Functional 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 properly

Design specifications：

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