# 使用 HTML/CSS 创建演示文稿将演示文稿构建为 HTML/CSS 并导出为 PDF。 Tailwind CSS 用于样式设计，Google Fonts 用于排版，没有设计上限。同样的方法适用于幻灯片、传单、小册子和海报。 ## 它是如何工作的每张幻灯片都是单个 HTML 文件中固定大小的“

”。浏览器将其呈现，Playwright 将其转换为矢量 PDF（清晰文本、可选择、任何缩放级别）。这就是整个管道。 HTML 文件是独立的 - Tailwind 通过 CDN，Google Fonts 通过 ``，所有样式都是内联的。没有构建步骤。对于图像，使用 base64 数据 URI 或本地文件路径（Playwright 解析相对于 HTML 文件的路径）。这是 16:9 幻灯片的骨架： <头> <元字符集=“UTF-8”> <风格> @页面{大小：1280px 720px;保证金：0； } 主体{边距：0; } * { -webkit-print-color-调整：精确；打印颜色调整：精确； } .幻灯片{ 宽度：1280px；高度：720 像素；分页后：总是；溢出：隐藏；位置：相对；框大小：边框框； } .slide:last-child { page-break-after: auto; } <正文>

对于其他格式，调整“@page”大小和容器尺寸：格式| @页面大小|集装箱尺寸 ---|---|--- 幻灯片 16:9 | `1280 像素 720 像素` | `1280 像素 × 720 像素` 幻灯片 4:3 | `1024 像素 768 像素` | `1024 像素 × 768 像素` A4 肖像 | `A4 肖像` | `210毫米×297毫米` A4风景| 《A4风景》 | `297毫米×210毫米` 美国信| `字母肖像` | `216毫米×279毫米` A3海报| `A3肖像` | `297毫米×420毫米` ## 取得好成绩的秘诀 **内容优先。** 在编写 HTML 之前起草幻灯片大纲。每个幻灯片标题应该是一个断言（“收入同比增长 34%”），而不是主题标签（“收入更新”）。仅按顺序阅读标题就可以了解整个故事。 **预先建立一个设计系统。** 在编写任何幻灯片之前，使用 `tailwind.config` 定义您的调色板、字体系列和间距比例。这可以保持牌组的一致性——相同的标题大小、相同的卡片填充、相同的间隙。改变幻灯片的布局，但保持系统统一。致力于一种视觉主题（圆形框架、彩色圆圈、粗边框）并重复它。 **使用 Lucide 作为图标。** 不要使用表情符号 - 它们在 PDF 中呈现不一致。相反，通过 CDN 使用 [Lucide]()：在 `` 中添加 ``，在标记中使用 ``，并将 `` 放在 `` 的末尾。 **保持系统内幻灯片的多样性。**一致的设计系统并不意味着每张幻灯片看起来都一样。混合布局类型——一个大的统计标注，然后是两列文本/图像分割，然后是三卡网格，然后是全出血引用。使用不同的背景色调（深色标题幻灯片、浅色内容幻灯片、彩色强调幻灯片）。设计系统给你护栏；这些护栏的多样性让甲板给人一种精雕细琢的感觉，而不是模板化的。 **避免 AI 告诉。** 白色上的紫色渐变、标题下的重音线、每张幻灯片上相同的布局、默认系统字体 - 这些尖叫着“人工智能生成”。一定要刻意。 ## PDF 转换使用“scripts/html_to_pdf.py”中的脚本进行转换（相对于该技能的目录）： uv run /scripts/html_to_pdf.py input.html --format幻灯片--output output.pdf “--format”标志设置页面大小（“slides”、“slides-4x3”、“a4”、“a4-landscape”、“letter”、“letter-landscape”、“a3”、“tabloid”）。省略“custom”，它从 CSS 读取“@page”。省略 `--output` 以另存为 `input.pdf`。首次运行会自动安装 Chromium。 ## 打印渲染陷阱将 HTML 转换为 PDF 时，以下问题可能会困扰您： * **缺少背景** — Chromium 默认情况下不打印背景。脚本中的“print-color-调整：exact”规则和“print_background=True”可以处理此问题，但请确保它们存在。 * **`backdrop-filter` 已损坏** — 玻璃态、模糊效果、任何使用 `backdrop-filter` 的内容都不会在 PDF 中呈现。请改用纯色或半透明背景。 * **`vw`/`vh` 单位不可靠** — 使用 `px` 或 `mm` 来调整所有尺寸。视口单位在打印上下文中的行为不一致。 * **字体可能无法加载** — 转换脚本等待“document.fonts.ready”，但如果字体加载失败，您将获得系统回退。检查输出。 * **SVG 使用`currentColor`** — 这在打印中继承了错误。设置明确的“填充”和“描边”颜色。 * **内容溢出** - 幻灯片使用“overflow:hidden”，因此任何不适合的内容都会消失。注意文本长度。 * **表情符号渲染** — 表情符号在 PDF 查看器中的渲染不一致。通过 CDN 使用 Lucide 图标（请参阅上面的提示）。 ## 质量保证 **假设存在问题。你的工作就是找到他们。** 转换为 PDF 后，**目视检查每一页**。打开 PDF 并查看实际渲染效果。为此使用子代理 - 您一直在盯着代码，并且会看到您期望的内容，而不是那里的内容。检查： * 渲染错误：文本溢出、背景缺失、字体回退、内容被切断 * 设计一致性：所有幻灯片的字体大小、标题层次结构、间距和卡片样式是否统一？ * 整体质量：对比度低、设计一般、视觉层次感差如果您无法直观地阅读 PDF，请先将页面转换为图像：`pdftoppm -jpeg -r 150 output.pdf slip` 修复问题、重新转换、重新验证。在至少一个修复和验证周期之前不要宣布成功。 ## 依赖关系 * **Playwright + Chromium** — 通过 PEP 723 首次运行时自动安装

幻灯片

包含技能