196 lines
7.3 KiB
Markdown
196 lines
7.3 KiB
Markdown
---
|
||
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 样式
|