PDF 美化技能

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

核心原则

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

原文完整保留：用户提供的所有文字内容必须 100% 保留，不增加、不删除、不修改任何文字
只做排版优化：仅通过 HTML/CSS 结构化和美化呈现
智能结构识别：自动识别标题、段落、列表等结构
灵活内容排版：主内容区域的 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 字符

设计原则

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

常用排版手法

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

遇到有： 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 个段落或列表组合

内容识别指南

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

机构信息：机构名称、标语
文档标题：主标题、副标题
服务区块：编号、标题、描述、列表项
费用信息：价格、有效期、备注
特殊标记：【新增】、【专属礼遇】等

输出格式

输出完整的 HTML 文件，用户可以：

保存为 .html 文件
在浏览器中打开
使用 Ctrl+P / Cmd+P 打印为 PDF
打印设置选择"A4"、"无边距"

示例

输入

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

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

处理思路

识别机构名称：ABC 公司
识别文档标题：服务方案
识别 2 个服务区块，每个包含列表项
识别费用信息：时间段 + 金额
自由设计内容区域的 HTML/CSS
使用基础标记（• - 数字编号），避免装饰性符号

输出要点

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