Beauty-Json Skill

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

📋 Core Features

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

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

2. Slide Types and Content Structure

2.1 Cover Page

json

{
  "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

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

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": "启示：会员订阅（稳定现金流）+ 高客单价服务（利润来源）是最佳商业模式"
  }
}

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 }
    ]
  }
}

2.6 Section Home Page

json

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

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": "头部企业占比"
      }
    ]
  }
}

🎨 HTML Framework Template Specification

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>

2. Template Rendering Function

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>
    `;
}

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>
    `;
}

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>
    `;
}

🔄 Conversion Process

Step 1: Read HTML Sample File

javascript

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

Step 2: Extract HTML Framework

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)

Step 3: Generate JSON Data

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)

Step 4: Create JSON-driven HTML

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

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

Example 1: Convert Cover Page

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>

Example 2: Convert Chart + Text Page

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

🔑 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. Data Integrity

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

2. Design Specifications

✅ 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. Chart Configuration

✅ Force set
```
responsive: true
```
✅ Force set
```
maintainAspectRatio: false
```
✅ Force set
```
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 terminals
✅ Maintain McKinsey design standards

5. Code Quality

✅ 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

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 Data File

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

2. HTML Framework File

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

3. Complete HTML File

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

🎯 Success Criteria

Conversion Success Signs

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

beauty-json

NPX Install

Tags

SKILL.md Content (Chinese)

Beauty-Json Skill

📋 Core Features

🎯 JSON Data Structure Specification

1. Root Structure

2. Slide Types and Content Structure

2.1 Cover Page

2.2 Two-column Comparison Page

2.3 Three-column Layout Page

2.4 Chart + Text Page

2.5 Table of Contents Page

2.6 Section Home Page

2.7 Data Emphasis Page

🎨 HTML Framework Template Specification

1. General HTML Structure

2. Template Rendering Function

2.1 Cover Page Rendering

2.2 Two-column Comparison Page Rendering

2.3 Chart + Text Page Rendering

🔄 Conversion Process

Step 1: Read HTML Sample File

Step 2: Extract HTML Framework

Step 3: Generate JSON Data

Step 4: Create JSON-driven HTML

📊 Supported Template Types

🎯 Usage Examples

Example 1: Convert Cover Page

Example 2: Convert Chart + Text Page

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

⚠️ Notes

1. Data Integrity

2. Design Specifications

3. Chart Configuration

4. Responsive Design

5. Code Quality

🚀 Execution Process

Automated Conversion Process

📝 Output Products

1. JSON Data File

2. HTML Framework File

3. Complete HTML File

🎯 Success Criteria

Conversion Success Signs