AgentSkillsCN

pdf-beautifier

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

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

PDF 美化技能

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

核心原则

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

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

使用场景

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

目录结构

code
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: 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"、"无边距"

示例

输入

code
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 样式