slide-creator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Slide Creator — HTML → PDF Presentations

幻灯片制作工具 — HTML → PDF 演示文稿

Build slide decks as HTML, export to pixel-perfect 16:9 PDF via headless Chromium.

Output format: PDF — not Microsoft PowerPoint (.pptx). The PDF preserves exact layout, fonts, and colors across all devices.

以HTML格式制作幻灯片，通过无头Chromium导出像素级精准的16:9比例PDF。

输出格式：PDF — 非Microsoft PowerPoint（.pptx）格式。该PDF可在所有设备上保留精确的布局、字体和颜色。

Why HTML → PDF

为何选择HTML转PDF

CSS layout (Grid/Flexbox) is far more flexible than any PPT editor
Full web typography, gradients, SVG, animations (print degrades gracefully)
Git-friendly, reproducible, scriptable
One command → PDF with exact 16:9 page dimensions

CSS布局（Grid/Flexbox）比任何PPT编辑器都灵活得多
支持完整的Web排版、渐变、SVG、动画（打印时会自动优雅降级）
兼容Git、可重复生成、可脚本化
一键生成符合16:9精确页面尺寸的PDF

Workflow

工作流程

1. Plan the Deck

1. 规划幻灯片结构

Define slide count and content per slide. Each slide = one

<section class="slide">

确定幻灯片数量及单页内容。每一页幻灯片对应一个

<section class="slide">

标签。

2. Choose a Theme

2. 选择主题

Ask the user what visual style they want. If not specified, pick one that fits the content.

Style	Background	Accent	Font	Mood
Dark tech	`#000` / `#0a0a0a`	bright orange/blue/green	Inter, Space Grotesk	Bold, modern
Light clean	`#fff` / `#f8f8f8`	navy, teal, coral	Inter, DM Sans	Professional, minimal
Gradient	dark gradient	vibrant accent	Any sans-serif	Creative, energetic
Corporate	`#1a1a2e` / white	brand color	system fonts	Trustworthy, formal
Playful	soft pastels	warm pop colors	Nunito, Poppins	Friendly, casual

询问用户偏好的视觉风格。若未指定，则选择与内容匹配的主题。

风格	背景	强调色	字体	氛围
深色科技风	`#000` / `#0a0a0a`	亮橙/亮蓝/亮绿	Inter, Space Grotesk	醒目、现代
浅色简约风	`#fff` / `#f8f8f8`	藏青、水鸭绿、珊瑚色	Inter, DM Sans	专业、极简
渐变风	深色渐变	鲜艳强调色	任意无衬线字体	创意、活力
企业风	`#1a1a2e` / 白色	品牌色	系统字体	可靠、正式
活泼风	柔和马卡龙色	暖色调跳色	Nunito, Poppins	友好、休闲

3. Build HTML + CSS

3. 构建HTML + CSS

Create a project directory with

index.html

styles.css

Start from
assets/base.css
— structural skeleton (slide dimensions, print rules, layout helpers) with NO colors or fonts. Layer your theme on top:

css

/* Example theme layer — customize freely */
body {
  font-family: 'Inter', sans-serif;
  color: #fff;
  background: #000;
}
.slide { background: #0a0a0a; }
.slide-tag { background: rgba(0,120,255,0.15); color: #0078ff; }
.card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }

Mandatory structural rules (in base.css — don't remove):

css

.slide { width: 1280px; height: 720px; page-break-after: always; overflow: hidden; }
@page { size: 1280px 720px; margin: 0; }

Key rules:

Use
```
px
```
units — never
```
vh/vw/rem/%
```
for slide dimensions
Google Fonts: use
```
<link>
```
in
```
<head>
```
, export script waits for network idle

Viewport meta:

<meta name="viewport" content="width=1280">

Content must fit within 720px height — overflow is clipped

创建包含

index.html

和

styles.css

的项目目录。

从
assets/base.css
开始 —— 这是结构骨架（幻灯片尺寸、打印规则、布局辅助类），不含颜色或字体设置。在此基础上叠加主题样式：

css

/* 示例主题层 —— 可自由自定义 */
body {
  font-family: 'Inter', sans-serif;
  color: #fff;
  background: #000;
}
.slide { background: #0a0a0a; }
.slide-tag { background: rgba(0,120,255,0.15); color: #0078ff; }
.card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }

必填结构规则（位于base.css中——请勿删除）：

css

.slide { width: 1280px; height: 720px; page-break-after: always; overflow: hidden; }
@page { size: 1280px 720px; margin: 0; }

关键规则：

使用
```
px
```
单位——幻灯片尺寸绝不能用
```
vh/vw/rem/%
```
Google Fonts：在
```
<head>
```
中使用
```
<link>
```
引入，导出脚本会等待网络空闲

视口元标签：

<meta name="viewport" content="width=1280">

内容必须适配720px高度——超出部分会被裁剪

4. Preview (Optional)

4. 预览（可选）

Use

preview_serve

to preview in browser before exporting.

使用

preview_serve

在浏览器中预览后再导出。

5. Export to PDF

5. 导出为PDF

bash

python3 skills/slide-creator/scripts/export_pdf.py --dir <project-dir> --output output/<name>.pdf

Options:

```
--dir
```
— directory containing
```
index.html
```
(required)
```
--output
```
/
```
-o
```
— output PDF path (default:
```
<dir>/deck.pdf
```
)
```
--width
```
— slide width in px (default: 1280)
```
--height
```
— slide height in px (default: 720)

bash

python3 skills/slide-creator/scripts/export_pdf.py --dir <project-dir> --output output/<name>.pdf

可选参数：

```
--dir
```
—— 包含
```
index.html
```
的目录（必填）
```
--output
```
/
```
-o
```
—— 输出PDF路径（默认：
```
<dir>/deck.pdf
```
）
```
--width
```
—— 幻灯片宽度（单位：px，默认：1280）
```
--height
```
—— 幻灯片高度（单位：px，默认：720）

6. Verify

6. 验证

The script prints slide count and confirms output path. Extra check:

python

import fitz
doc = fitz.open("output/deck.pdf")
print(f"Pages: {doc.page_count}")
for p in doc:
    r = p.rect
    print(f"  {r.width*96/72:.0f}x{r.height*96/72:.0f}px")

脚本会打印幻灯片数量并确认输出路径。额外检查方式：

python

import fitz
doc = fitz.open("output/deck.pdf")
print(f"Pages: {doc.page_count}")
for p in doc:
    r = p.rect
    print(f"  {r.width*96/72:.0f}x{r.height*96/72:.0f}px")

Style Guidelines

风格指南

No default brand — every deck gets a theme tailored to its content
Ask the user for preference: dark/light, accent color, font, mood
Each slide should have clear visual hierarchy: tag → title → content
Keep text concise — slides are visual, not documents
Use
```
.bg-glow
```
with theme-colored radial gradients for depth

无默认品牌样式 —— 每个幻灯片都配有适配内容的主题
询问用户偏好：深色/浅色、强调色、字体、氛围
每页幻灯片需有清晰的视觉层级：标签 → 标题 → 内容
文字简洁——幻灯片是视觉载体，而非文档
使用
```
.bg-glow
```
搭配主题色径向渐变增加层次感

Gotchas

注意事项

Chromium deps: first run needs

python3 -m playwright install chromium && python3 -m playwright install-deps chromium

Fonts: Google Fonts need HTTP — the export script starts a local server automatically
Emoji rendering: headless Chromium may lack emoji fonts — use SVG icons instead
Large images: embed as base64 or use relative paths (local server serves the project dir)
Slide overflow: content exceeding 720px height is clipped — design within bounds

Chromium依赖：首次运行需执行

python3 -m playwright install chromium && python3 -m playwright install-deps chromium

字体：Google Fonts需要HTTP连接——导出脚本会自动启动本地服务器
表情符号渲染：无头Chromium可能缺少表情符号字体——改用SVG图标替代
大尺寸图片：以base64嵌入或使用相对路径（本地服务器会提供项目目录文件服务）
幻灯片溢出：超出720px高度的内容会被裁剪——需在限定范围内设计