ai-proj-helper/skills-biz/biz-plan-plugin/skills/references/details.md

skills 详细内容

PPT 设计能力

本技能支持生成商业计划书 PPT，输出为 HTML 格式的演示文稿，可直接在浏览器中全屏演示，也可转换为 PDF 或截图使用。

PPT 输出方式

当用户要求生成 PPT 时，使用以下方式：

1. HTML 演示文稿（推荐）

   • 生成单个 HTML 文件
   • 支持全屏演示（按 F 键）
   • 支持键盘翻页（← →）
   • 可直接打印为 PDF
   • 响应式设计，适配各种屏幕

2. Markdown 演示脚本

   • 输出每页内容的文字稿
   • 用户可自行复制到 PPT 软件

HTML PPT 模板

生成 PPT 时使用以下 HTML 模板结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商业计划书 - [公司名称]</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            background: #1a1a2e;
            color: #fff;
            overflow: hidden;
        }

        .slide {
            display: none;
            width: 100vw;
            height: 100vh;
            padding: 60px 80px;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            position: relative;
        }

        .slide.active {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* 封面样式 */
        .slide.cover {
            text-align: center;
            justify-content: center;
            align-items: center;
        }

        .slide.cover h1 {
            font-size: 72px;
            font-weight: 700;
            margin-bottom: 20px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .slide.cover .slogan {
            font-size: 28px;
            color: #a0aec0;
            margin-bottom: 60px;
        }

        .slide.cover .info {
            font-size: 18px;
            color: #718096;
        }

        /* 内容页样式 */
        .slide h2 {
            font-size: 48px;
            font-weight: 600;
            margin-bottom: 40px;
            color: #667eea;
        }

        .slide h3 {
            font-size: 32px;
            font-weight: 500;
            margin-bottom: 24px;
            color: #a0aec0;
        }

        .slide p, .slide li {
            font-size: 24px;
            line-height: 1.8;
            color: #e2e8f0;
        }

        .slide ul {
            list-style: none;
            padding-left: 0;
        }

        .slide ul li {
            padding: 12px 0;
            padding-left: 40px;
            position: relative;
        }

        .slide ul li::before {
            content: "▸";
            position: absolute;
            left: 0;
            color: #667eea;
        }

        /* 数据卡片 */
        .metrics {
            display: flex;
            gap: 40px;
            margin-top: 40px;
        }

        .metric-card {
            flex: 1;
            background: rgba(102, 126, 234, 0.1);
            border: 1px solid rgba(102, 126, 234, 0.3);
            border-radius: 16px;
            padding: 32px;
            text-align: center;
        }

        .metric-card .value {
            font-size: 48px;
            font-weight: 700;
            color: #667eea;
        }

        .metric-card .label {
            font-size: 18px;
            color: #a0aec0;
            margin-top: 8px;
        }

        /* 两栏布局 */
        .two-columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            margin-top: 40px;
        }

        /* 流程图 */
        .flow {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-top: 40px;
        }

        .flow-item {
            background: rgba(102, 126, 234, 0.15);
            border-radius: 12px;
            padding: 24px 32px;
            text-align: center;
        }

        .flow-arrow {
            color: #667eea;
            font-size: 32px;
        }

        /* 页码 */
        .page-number {
            position: absolute;
            bottom: 30px;
            right: 40px;
            font-size: 16px;
            color: #4a5568;
        }

        /* 进度条 */
        .progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            transition: width 0.3s;
            z-index: 100;
        }

        /* 导航提示 */
        .nav-hint {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 14px;
            color: #4a5568;
        }
    </style>
</head>
<body>
    <div class="progress" id="progress"></div>

    <!-- Slide 1: 封面 -->
    <div class="slide cover active">
        <h1>[公司名称]</h1>
        <p class="slogan">[一句话 Slogan]</p>
        <p class="info">[日期] · 商业计划书</p>
        <span class="page-number">1 / N</span>
    </div>

    <!-- Slide 2: 公司定位 -->
    <div class="slide">
        <h2>公司定位</h2>
        <h3>[一句话定位]</h3>
        <div class="metrics">
            <div class="metric-card">
                <div class="value">[X]年</div>
                <div class="label">深耕行业</div>
            </div>
            <div class="metric-card">
                <div class="value">[X]家</div>
                <div class="label">头部客户</div>
            </div>
            <div class="metric-card">
                <div class="value">[X]轮</div>
                <div class="label">完成融资</div>
            </div>
        </div>
        <span class="page-number">2 / N</span>
    </div>

    <!-- 更多 slides... -->

    <p class="nav-hint">← → 翻页 · F 全屏 · ESC 退出</p>

    <script>
        const slides = document.querySelectorAll('.slide');
        const progress = document.getElementById('progress');
        let current = 0;

        function showSlide(n) {
            slides[current].classList.remove('active');
            current = (n + slides.length) % slides.length;
            slides[current].classList.add('active');
            progress.style.width = ((current + 1) / slides.length * 100) + '%';
        }

        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight' || e.key === ' ') showSlide(current + 1);
            if (e.key === 'ArrowLeft') showSlide(current - 1);
            if (e.key === 'f' || e.key === 'F') {
                document.documentElement.requestFullscreen?.();
            }
        });

        // 触摸滑动支持
        let touchStartX = 0;
        document.addEventListener('touchstart', e => touchStartX = e.touches[0].clientX);
        document.addEventListener('touchend', e => {
            const diff = e.changedTouches[0].clientX - touchStartX;
            if (Math.abs(diff) > 50) showSlide(current + (diff > 0 ? -1 : 1));
        });
    </script>
</body>
</html>

BP PPT 标准页面结构

生成商业计划书 PPT 时，按以下结构组织：

页码	页面类型	内容要点	设计建议
1	封面	公司名、Slogan、日期	居中大标题，渐变背景
2	公司定位	一句话定位 + 核心数据	3-4 个数据卡片
3	行业痛点	3-4 个核心痛点	图标 + 简短描述
4	解决方案	产品价值主张	流程图或产品矩阵
5	商业模式	收入来源、盈利方式	模式图 + 收入占比
6	市场规模	TAM/SAM/SOM	同心圆图 + 数字
7	竞争分析	竞争矩阵、差异化	2x2 矩阵图
8	运营数据	核心指标、增长趋势	4 个大数字卡片
9	客户案例	标杆客户、成果	Logo + 数据对比
10	团队介绍	核心成员背景	头像 + 简介
11	里程碑	发展历程	时间线
12	财务预测	3 年收入预测	柱状图示意
13	战略规划	未来规划	阶段性目标
14	融资计划	金额、用途、联系方式	饼图 + 联系信息

PPT 设计原则

1. 一页一重点：每页只传达一个核心信息
2. 大字少字：标题 48px+，正文 24px+，每页文字不超过 50 字
3. 数据可视化：用数字卡片、图表代替文字描述
4. 留白充足：内容不要铺满，保持呼吸感
5. 配色统一：使用 2-3 种主色，保持一致性
6. 高对比度：深色背景 + 浅色文字，或浅色背景 + 深色文字

配色方案

深色科技风（推荐）：

• 背景：#1a1a2e → #16213e（渐变）
• 主色：#667eea（蓝紫色）
• 辅助：#764ba2（紫色）
• 文字：#e2e8f0（浅灰）
• 次要文字：#a0aec0（中灰）

浅色商务风：

• 背景：#ffffff
• 主色：#2196F3（蓝色）
• 辅助：#1976D2（深蓝）
• 文字：#212121（深灰）
• 次要文字：#616161（中灰）

使用示例

用户请求：

帮我生成商业计划书 PPT

输出方式：

1. 生成完整的 HTML 文件
2. 保存到用户指定位置（如桌面、项目目录）
3. 用户用浏览器打开即可演示

# 打开 PPT
open ~/Desktop/bp-presentation.html

# 或在浏览器中打开后按 F 进入全屏模式

导出为 PDF

HTML PPT 可通过浏览器打印功能导出为 PDF：

1. 在浏览器中打开 HTML 文件
2. 按 Cmd+P (Mac) 或 Ctrl+P (Windows)
3. 选择"另存为 PDF"
4. 设置页面大小为横向 A4 或 16:9

注意事项

1. 内容优先：先确定 BP 内容，再生成 PPT
2. 数据占位：敏感数据可用 [X] 占位
3. 迭代优化：可分页生成，逐步完善
4. 本地演示：HTML 文件完全离线可用，无需网络