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 变量，可在内容排版中使用：

/* 字体大小 */
--font-logo: 34px;
--font-tagline: 18px;
--font-h1: 26px;
--font-subtitle: 15px;
--font-greeting-title: 15px;
--font-greeting-text: 13px;
--font-section-number: 13px;
--font-section-title: 16px;
--font-section-content: 12.5px;
--font-list-item: 12.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 字符

设计原则

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

常用排版手法

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

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

分页策略

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

A4 页面内容容量估算

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

根据字体大小和行高，每页大约可容纳：

• 正文内容：约 35-40 行（12.5px 字号，1.6 行高）
• 服务区块：约 3-4 个中等大小的服务区块（每个区块含标题 + 3-5 个列表项）
• 混合内容：约 6-8 个段落或列表组合

内容识别指南

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

1. 机构信息：机构名称、标语
2. 文档标题：主标题、副标题
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. 识别机构名称：ABC 公司
2. 识别文档标题：服务方案
3. 识别 2 个服务区块，每个包含列表项
4. 识别费用信息：时间段 + 金额
5. 自由设计内容区域的 HTML/CSS
6. 使用基础标记（• – 数字编号），避免装饰性符号

输出要点

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