# Pbl Style Guide

> Parcoach 教案统一输出规范 —— 锁死品牌主题、版式 token 与内容→版式映射。保证所有生成的 PBL 教案（文档/PPT/HTML）视觉与模板统一。被 pbl-lesson-builder（生成内容）与 pbl-workflow-orchestrator（导出阶段）共同引用。Use whenever producing or exporting any Parcoach lesson plan / 教案 deliverable — enforce the fixed brand theme, tokens, and layout mapping. Triggers: "统一", "模板统一", "UI 统一", "按规范输出", "brand", "style guide".

- Skill: `excellence-wh/pbl-style-guide` (Agent Skill)
- Install (CLI): `npx skillmds@latest add excellence-wh/pbl-style-guide`
- Raw SKILL.md: https://api.skillmd.com/api/skills/excellence-wh/pbl-style-guide/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: excellence-wh (https://skillmd.com/u/excellence-wh)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/excellence-wh/pbl-style-guide

---


# Parcoach 教案统一输出规范（Style Guide）

**目标**：让每一份生成的 PBL 教案，无论谁生成、无论导出成文档还是 PPT，都长成同一套视觉风格。**这是铁律：所有教案输出必须遵守本规范，禁止自由发挥视觉。**

内容标准由 `pbl-lesson-builder` 负责（8 模块 + 每节课三问）；**视觉标准由本规范负责**。两者正交，本规范只管"长什么样"。

## 一、品牌 token（唯一允许的取值）

任何颜色、字体、圆角、阴影都必须来自下列 token，**不得自定义**。

| Token | 值 | 用途 |
|---|---|---|
| 主色 accent | `#3E7C59` 森林绿 | 标题强调、按钮、主色块 |
| 辅色 accent-2 | `#E8A13C` 暖橙 | 驱动问题、高亮、要点 |
| 三级 accent-3 | `#7FA88C` 浅绿 | 功能块、辅助信息 |
| 文字主 text-1 | `#2E3A32` | 正文 |
| 文字次 text-2 | `#5E6B62` | 次级说明 |
| 背景 bg | `#FFFFFF` | 页面底 |
| 衬底 bg-soft | `#F7F4EF` 米白 | 区块衬底、卡片底 |
| 分隔线 border | `rgba(88,105,90,.14)` | 细线 |
| 标题字体 | `Noto Serif SC`（衬线） | 大标题 |
| 正文字体 | `Noto Sans SC`/`PingFang SC`（无衬线） | 正文 |
| 圆角 radius | `16px`（卡片）/ `10px`（小件） | — |
| 渐变 grad | 绿→浅绿→暖橙 135° | 封面/强调块背景 |

HTML 演示（html-ppt）使用时：**引入 `styles/parcoach-theme.css` 覆盖 token，且禁止套用 html-ppt 目录下其它 36 个主题**。该主题文件就是这个规范的 CSS 落地版。

## 二、固定页面版式（文首/演示的开篇结构）

任何教案交付物，开篇页都按固定顺序：
1. **封面**：项目名称（衬线大标题）+ 一句副题 + 三枚标签（课时/面向对象/场景），accent-2 或 brand 渐变作点缀
2. **学习目标页**：知识 / 能力 / 情感 三块
3. **（有则）目录/项目概览页**：项目名 + 驱动问题 + 里程碑概览
4. 之后按「每节课」逐个呈现

## 三、每节课区块的固定呈现

教案的核心单元是"每节课"，无论文档还是 PPT，每节课都用**统一卡片布局**：

```
┌──────────────────────────────────────────┐
│ [课前启发]  2-4 个问题（accent 前缀）        │
│ [课中引导]  2-4 个问题（accent-2/橙提示）    │
│ [课后小结]  2-4 个问题（accent-3/浅绿块）    │
│ 阶段目标 · 活动 · 材料 · 阶段产出（次级文字）  │
└──────────────────────────────────────────┘
```

- 每节课一个卡片/一页，卡片用 `bg-soft` 衬底 + `radius:16px`
- 三问用**固定图标前缀**：课前 `▶` / 课中 `?` / 课后 `✓`（或等价 emoji：🎯 / 💡 / ✅），保持跨文件一致
- 三问标题行用对应强调色，正文用 text-2 次级灰

## 四、内容 → 版式映射

`pbl-lesson-builder` 的 8 模块如何落到版式：

| 内容模块 | 落成 | 视觉处理 |
|---|---|---|
| 1 项目概述+驱动问题 | 封面 + 概览页 | 驱动问题用 accent-2 暖橙醒目 |
| 2 学习目标 | 目标页 | 三块卡片，accent 图标 |
| 3 里程碑（每节课） | 每节课卡片/页 | 用「每节课区块」布局 |
| 4 引导策略 | 附页/补充页 | 次级文字列表 |
| 5 最终产出展示 | 展示页 | accent-3 浅绿块 |
| 6 评价 Rubric | 表格页 | 统一表格样式，表头 bg-soft |
| 7 家庭/课堂适配 | 附页 | 两栏卡片（家庭/课堂） |
| 8 扩展 | 结尾页 | 列表 + 结尾符号 |

## 五、格式细节（统一）

- **语言**：中文；专业术语可英文括号（如 PBL（项目式学习））
- **标题层级**：一级=项目名（衬线），二级=课程/模块（无衬线加粗），三级=三问等
- **列表**：用项目符号，不用编号过长嵌套
- **一致用词**：统一叫「每节课」「驱动问题」「课前启发/课中引导/课后小结」，不换叫法
- **导出风格**：同一份教案如果同时导出 html-ppt 和 pptx，视觉 token 保持一致（主色都是森林绿+暖橙）

## 六、强约束（铁律）

1. **只用本规范的 token，禁止自定义色/字体** —— 这是"统一"的根本。
2. **页面结构固定**：封面→目标→概览→每节课→Rubric→适配→扩展，不擅自增删大板块。
3. **每节课三问固定格式**：课前/课中/课后，图标+强调色，不得省略其中任何一类。
4. html-ppt 导出**必须用 `styles/parcoach-theme.css`**，且不得换其它主题。
5. 违反本规范的输出视为不合格，需重做至符合。

## 相关文件

- `styles/parcoach-theme.css` —— 本规范的 CSS 落地（html-ppt 用，覆盖 token）
- 内容结构标准见 `pbl-lesson-builder`
- 导出路由见 `pbl-workflow-orchestrator`（阶段3）