johnQ
237631147a
- 11 个超 20KB 的 SKILL.md 拆分，大章节移入 references/details.md - 7 处非标准字段（arguments/user_invocable）移入 metadata - 修 req-dev 4 条相对链接；validate 跳过行内代码避免  误报 - validate-skills.py: 23 warns -> 0 warns，0 errors
361 lines
9.9 KiB
Markdown
361 lines
9.9 KiB
Markdown
# skills 详细内容
|
||
|
||
## PPT 设计能力
|
||
|
||
本技能支持生成商业计划书 PPT，输出为 HTML 格式的演示文稿，可直接在浏览器中全屏演示，也可转换为 PDF 或截图使用。
|
||
|
||
### PPT 输出方式
|
||
|
||
当用户要求生成 PPT 时，使用以下方式：
|
||
|
||
1. **HTML 演示文稿**（推荐）
|
||
- 生成单个 HTML 文件
|
||
- 支持全屏演示（按 F 键）
|
||
- 支持键盘翻页（← →）
|
||
- 可直接打印为 PDF
|
||
- 响应式设计，适配各种屏幕
|
||
|
||
2. **Markdown 演示脚本**
|
||
- 输出每页内容的文字稿
|
||
- 用户可自行复制到 PPT 软件
|
||
|
||
### HTML PPT 模板
|
||
|
||
生成 PPT 时使用以下 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>商业计划书 - [公司名称]</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. 用户用浏览器打开即可演示
|
||
|
||
```bash
|
||
# 打开 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 文件完全离线可用，无需网络
|