# Qoder Ppt V2

> [project] 根据文字稿生成 Qoder 品牌风格的 HTML 演示文稿。支持浏览器直接演示（键盘翻页、自动缩放）。

- Skill: `lexburner/qoder-ppt-v2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add lexburner/qoder-ppt-v2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lexburner/qoder-ppt-v2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: lexburner (https://skillmd.com/u/lexburner)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lexburner/qoder-ppt-v2

---


# Qoder PPT 生成器 v2

将文稿转化为 Qoder 品牌风格的 HTML 演示文稿。

**模板文件**：`template.html`（同目录下）

---

## 核心布局

### 封面页：完全居中

```css
.slide.cover {
  justify-content: center;
  align-items: center;
  padding: 60px 120px;
}
```

### 内容页：标题顶部 + 内容居中

```css
.slide { padding: 120px 120px 80px 120px; }
.content-center { flex: 1; }
.content-center > *:not(h2) { margin: auto 0; }
```

---

## 页面结构

### 封面页

```html
<section class="slide cover active">
  <div class="brand"><span class="logo">QODER</span></div>
  <div class="content">
    <h1><span class="highlight">关键词</span> 主标题</h1>
    <p class="subtitle">副标题</p>
  </div>
  <span class="page-number">01</span>
</section>
```

### 内容页（通用结构）

```html
<section class="slide {type}">
  <div class="brand"><span class="logo">QODER</span></div>
  <div class="content-center">
    <h2 class="section-title">标题</h2>
    <!-- 内容区域 -->
  </div>
  <span class="page-number">02</span>
</section>
```

---

## 内容区域类型

### 要点列表 (points)

```html
<ul class="point-list">
  <li><span class="bullet"></span><span class="text">要点内容</span></li>
</ul>
```

### 卡片网格 (cards)

```html
<div class="card-grid">
  <div class="card">
    <h3 class="card-title"><span class="highlight">标题</span></h3>
    <p class="card-content">内容</p>
  </div>
</div>
```

### 对比布局 (compare)

```html
<div class="compare-grid">
  <div class="compare-item">
    <h3><span class="highlight">左侧</span>标题</h3>
    <ul><li>对比点</li></ul>
  </div>
  <div class="compare-divider">VS</div>
  <div class="compare-item">
    <h3><span class="highlight">右侧</span>标题</h3>
    <ul><li>对比点</li></ul>
  </div>
</div>
```

### 流程图 (flow)

```html
<div class="flow-container">
  <div class="flow-step">
    <div class="step-number">1</div>
    <div class="step-content">步骤说明</div>
  </div>
  <div class="flow-arrow">→</div>
  <!-- 更多步骤 -->
</div>
```

### 数据展示 (data)

```html
<div class="data-grid">
  <div class="data-item">
    <span class="data-value">99%</span>
    <span class="data-label">指标说明</span>
  </div>
</div>
```

### 表格 (table)

```html
<table class="data-table">
  <thead><tr><th>维度</th><th>A</th><th>B</th></tr></thead>
  <tbody><tr><td>特征</td><td>值A</td><td><span class="highlight">值B</span></td></tr></tbody>
</table>
```

### 总结 (summary)

```html
<div class="summary-content">
  <p class="key-point"><span class="highlight">核心要点</span> 补充说明</p>
</div>
```

---

## 设计规范

### 颜色

| 用途 | 值 |
|------|-----|
| 背景 | #000000 |
| 高亮 | #2ADB5C |
| 标题 | #FFFFFF |
| 正文 | #96989A |
| 次级 | #68696B |
| 边框 | #343434 |

### 字体

- 中文：Alibaba PuHuiTi 2.0 / PingFang SC
- 英文/数字：Montserrat

### 字号

| 元素 | 大小 |
|------|------|
| 大标题 h1 | 66px |
| 章节标题 h2 | 36px |
| 卡片标题 h3 | 28-30px |
| 正文 | 24px |

---

## 演示功能

| 操作 | 效果 |
|------|------|
| `→` / `Space` | 下一页 |
| `←` / `Backspace` | 上一页 |
| `Home` / `End` | 首页/末页 |
| 点击右 2/3 | 下一页 |
| 点击左 1/3 | 上一页 |

---

## 检查清单

- [ ] 第一个 slide 有 `active` 类
- [ ] 所有 slide 在 `slides-container` 内
- [ ] h2 标题在 `content-center` 内部
- [ ] 封面页使用 `.slide.cover`
- [ ] 关键词使用 `<span class="highlight">`
- [ ] 页码递增正确

---

## 禁止事项

- 禁止 h2 放在 content-center 外部
- 禁止遗漏第一个 slide 的 active 类
- 禁止使用非规定颜色
- 禁止单页内容过多