beauty-json

Beauty-Json Skill

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

📋 核心功能

主要任务：

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

适用场景：

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

🎯 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.1 封面页 (cover)

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

2.2 双列对比页 (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)

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

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

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

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

2.7 数据强调页 (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框架模板规范

通用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>

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

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

    // 初始化
    document.addEventListener('DOMContentLoaded', function() {
        renderPresentation(presentationData);
    });
&#x3C;/script>

</body> </html>

模板渲染函数

2.1 封面页渲染

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 双列对比页渲染

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 图表+文本页渲染

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

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

}

🔄 转换流程

步骤1：读取HTML示例文件

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

步骤2：提取HTML框架

提取规则：

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

步骤3：生成JSON数据

数据提取规则：

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

步骤4：创建JSON驱动的HTML

整合规则：

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

📊 支持的模板类型

模板文件模板类型 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

🎯 使用示例

示例1：转换封面页

输入HTML：01-cover-page.html

输出JSON：

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

输出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>

&#x3C;script>
    const presentationData = { /* JSON数据 */ };

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

</body> </html>

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

输入HTML：05-chart-text.html

输出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过长，则自动使用'继续'进行'分段'加载数据，绝对不能精简、偷工减料的节省token,严禁为了省token而跳过内容或使用摘要

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

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

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

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

分段加载原则：

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

关键规则：

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

⚠️ 注意事项

数据完整性

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

设计规范

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

图表配置

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

响应式设计

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

代码质量

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

🚀 执行流程

自动化转换流程

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

📝 输出产物

JSON数据文件

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

HTML框架文件

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

完整HTML文件

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

🎯 成功标准

转换成功标志

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

数据完整性：

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

代码完整性：

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

功能验证：

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

设计规范：

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

Safety Notice

Copy this and send it to your AI assistant to learn

Source Transparency

Related Skills

feishu-integration

html-presentation-beautifier

skill best practices

skills-docx