---
name: pdf-beautifier
description: 将文档（PDF/文本）转换为精美的 HTML 排版。保持原文内容完全不变，只优化视觉呈现。适用于服务方案、报价单、规划书等文档的美化。用户可直接通过浏览器打印为 PDF。
---

# PDF 美化技能

本技能用于将文档转换为精美的 A4 排版 HTML，用户可直接在浏览器中打印为 PDF。

## 核心原则

**⚠️ 最重要的原则：原文内容不可改变**

1. **原文完整保留**：用户提供的所有文字内容必须 100% 保留，不增加、不删除、不修改任何文字
2. **只做排版优化**：仅通过 HTML/CSS 结构化和美化呈现
3. **智能结构识别**：自动识别标题、段落、列表等结构
4. **灵活内容排版**：主内容区域的 HTML/CSS 可自由发挥，根据具体内容优化设计

## 使用场景

- 服务方案/报价单
- 个性化规划书
- 续约服务说明
- 沟通函/通知函

## 目录结构

```
pdf-beautifier/
├── SKILL.md              # 技能定义（本文件）
├── assets/               # 模板和静态资源
│   ├── template.html     # HTML 页面框架模板
│   └── line.png          # 几何装饰线条图片
└── references/           # 参考文档（可选）
```

## 模板说明

模板文件 `assets/template.html` 仅提供**页面框架**，包含：

### 固定元素（必须保留）
- **页面容器** `.page`：A4 尺寸、背景色
- **几何装饰背景**：右上角和左下角的折线装饰（使用 `assets/line.png`）
- **内边框** `.inner-frame`：页面内侧边框
- **Header 区域**：Logo + 机构名称 + 标语
- **Header 分隔线**
- **主标题区域** `.main-title`：文档主标题 + 副标题
- **Footer 区域**：机构名称 + 服务类型（不显示页码）

### 自由发挥区域
- **主内容区域** `.main-content`（主标题之后的内容）：**完全由模型根据原文内容自由设计**

## 设计变量

模板定义了以下 CSS 变量，可在内容排版中使用：

```css
/* 字体大小 */
--font-logo: 34px;
--font-tagline: 18px;
--font-h1: 26px;
--font-subtitle: 16px;
--font-section-number: 15px;
--font-section-title: 18px;
--font-section-content: 14.5px;
--font-list-item: 14.5px;
--font-footer: 12px;

/* 颜色 */
--color-primary: #5A7A5E;        /* 主色：墨绿 */
--color-primary-dark: #3D5A40;   /* 深绿 */
--color-primary-light: #6B8B6E;  /* 浅绿 */
--color-secondary: #8B7355;      /* 棕色 */
--color-accent: #C4A45A;         /* 金色 */
--color-bg: #F5F2E8;             /* 背景：米白 */
--color-border: #B8AE9C;         /* 边框色 */
--color-text: #4A5A4A;           /* 正文色 */
--color-text-light: #6B7B6E;     /* 浅正文色 */
```

## 排版规范

### 标记符号
**只使用基础的 Markdown 风格标记，避免使用装饰性符号**：

✅ 推荐使用：
- 无序列表：`•`（实心圆点）或 CSS `list-style-type: disc`
- 短横线：`-` 或 `–`
- 数字编号：`1.` `2.` `3.`
- 强调：加粗、颜色变化

❌ 避免使用：
- 装饰性符号：`◆` `✦` `★` `→` `✓` 等
- Emoji 表情符号
- 特殊 Unicode 字符

### 中英文排版间距
中文与英文、数字之间前后必须加一个半角空格。例如：`Johnson 3月做应用题`、`购买 Dolch Sight Words 220 词`、`完成 4 幅图的描述`。

### 设计原则
1. **语义化结构**：根据内容含义选择合适的 HTML 标签
2. **视觉层次**：通过字号、颜色、间距区分内容层级
3. **重点突出**：关键数字、金额、次数等使用加粗或主题色强调
4. **充足留白**：保持页面呼吸感，宁可多分一页也不要内容拥挤
5. **简洁克制**：使用基础标记，避免过度装饰

### 间距规范
- **section 区块间距**：`margin-bottom: 7mm`
- **卡片/服务项间距**：`margin-bottom: 3.5mm`
- **section 标题与内容间距**：`margin-bottom: 4mm`
- **主标题下方间距**：`margin-bottom: 8mm`
- **正文行高**：`line-height: 1.75 ~ 1.8`
- **卡片内边距**：`padding: 10px 14px`

### 常用排版手法
- **卡片式布局**：使用背景色、圆角、边框分隔不同区块
- **编号+标题**：用圆形编号 + 标题的形式呈现服务项
- **高亮文本**：价格、数量等用主题色 + 加粗强调
- **标签标记**：特殊标记如【新增】使用背景色标签样式
- **表格布局**：适合费用明细、服务对比等结构化数据
- **费用区块**：金额信息使用特殊样式突出显示

遇到有： border-left: 3px solid var(--color-accent); 不要使用 border-radius

### 分页策略

**⚠️ 重要：必须正确处理分页，避免内容溢出**

#### A4 页面内容容量估算

考虑到固定元素（Header、主标题、Footer）占用的空间，`.main-content` 区域的实际可用高度约为 **180mm**（A4 高度 297mm - Header 约 40mm - 主标题约 25mm - Footer 约 20mm - 内边距约 32mm）。

根据字体大小和行高，每页大约可容纳：
- **正文内容**：约 28-32 行（14.5px 字号，1.75 行高）
- **服务区块**：约 2-3 个中等大小的服务区块（每个区块含标题 + 3-5 个列表项）
- **混合内容**：约 5-6 个段落或列表组合

#### 多主题/多科目分页规则

当文档包含多个并列主题（如多个科目、多个服务类别）时，必须遵循以下规则：

1. **主题隔离**：每个主题必须从新页开始，不同主题的内容不得共享同一页面。即使上一个主题的页面还有剩余空间，下一个主题也必须另起新页。
2. **续页不重复标题**：同一主题跨页时，续页直接从上页未完成的内容接续，不得重复主题标题（如"英文（续）"）。续页只保留页面框架（Header、Footer、装饰），`.main-content` 中直接放剩余内容的下一个 section。
3. **主题标题仅出现一次**：每个主题的编号+标题（如 `① 英文`、`② 数学`）只在该主题首页出现。

## 默认机构标识

机构名称默认为 **EduVista**，Header 和 Footer 直接使用该名称，用户无需额外指定。

## 内容识别指南

从用户提供的原文中识别：

1. **文档标题**：主标题、副标题
3. **服务区块**：编号、标题、描述、列表项
4. **费用信息**：价格、有效期、备注
5. **特殊标记**：【新增】、【专属礼遇】等

## 输出格式

输出完整的 HTML 文件，用户可以：
1. 保存为 `.html` 文件
2. 在浏览器中打开
3. 使用 `Ctrl+P` / `Cmd+P` 打印为 PDF
4. 打印设置选择"A4"、"无边距"

## 示例

### 输入
```
ABC 公司服务方案
1) 咨询服务
- 一对一深度顾问面谈12次
- 个性化规划12次
2) 活动支持
- 会议陪同5次

费用
2026年1月10日起-2027年1月10日
40000元整
```

### 处理思路
1. 机构名称使用默认值 EduVista
2. 识别文档标题：服务方案
3. 识别 2 个服务区块，每个包含列表项
4. 识别费用信息：时间段 + 金额
5. **自由设计**内容区域的 HTML/CSS
6. 使用基础标记（• - 数字编号），避免装饰性符号

### 输出要点
- 使用 `assets/template.html` 的页面框架
- 在 `.main-content` 中自由设计服务区块和费用区块的排版
- 关键数字（12次、5次、40000元）使用加粗+主题色突出
- 列表使用标准圆点 `•` 或 CSS disc 样式