image-to-pages
Skill10 starsChanged 3 months agoMITView on GitHub
将图片拼接成 HTML 和 PDF 页面,竖版拼成3:4容器、横版每页一张,自动判定页面方向与比例,支持打印PDF和下载容器截图。当用户说"拼成3:4"、"拼成3比4"、"做成打印页面"、"横版拼成PDF"、"图片拼成PDF"、"图片排版"、"做成PDF"、"按顺序拼图"、"整理图片"等时需要使用此技能。
In this repository9 other files it gives its agents.
- blue-posterSkill
- doubao-ttsSkill
- mac-cleanupSkill
- memory-fragment-postersSkill
- ppt-component-atlasSkill
- prompt-creatorSkill
- prompt-optimizerSkill
- skill-optimizerSkill
- wise-image-flowSkill
The file
Files
图片布局打印机
将图片自动拼接成白色容器,生成可直接双击打开的独立 HTML 页面和 PDF 文件(图片默认 WebP 压缩后 base64 嵌入,自包含、无需服务器)。
支持三种模式,并自动判定页面方向(横版/竖版):
模式对比
| 模式 | 适用场景 | 效果 |
auto(竖版默认) | 任意比例竖版图片 → 拼成统一3:4容器 | 每容器放1-2张图,各占50%高度 |
full(竖版) | 图片本身已是3:4比例 → 直接排列 | 每张图独占一个完整容器 |
landscape(横版,自动) | 横版图片(宽>高)→ 横版 PDF | 每页一张,比例自动匹配 4:3 或 16:9 |
方向自动判定:脚本读取每张图实际宽高,横版图占比大 → 整篇横版 PDF;否则竖版(主方向统一)。横版时一律每页一张。
输入
用户可提供:
- 文件夹路径 - 包含图片的文件夹(脚本按文件名自然排序)
- 图片文件列表 - 用
--files指定,按给定顺序排版(文件名无序号时由你排好顺序传入)
支持的图片格式:jpg, jpeg, png, gif, webp
工作流程
步骤 1: 收集图片并确定顺序
排序策略(关键):
- 文件名带序号(
1.png 2.png ... 10.png):直接传文件夹,脚本按自然排序(数值序,不会变成 1, 10, 2)。 - 文件名无序号(
封面.png 目录.png 第二章.png或随机文件名):脚本无法判断语义,由当前 Agent 评估顺序:- 先看文件名语义——章节词、步骤词、时间词、"一二三"等中文序词
- 文件名也无语义时,用当前 Agent 的图片查看能力逐张看图,按内容逻辑排序(漫画分镜、操作步骤、故事时间线、目录页码)
- 排好后用
--files <有序列表>传给脚本,脚本严格按给定顺序、不重排 - 顺序不确定时,简要说明排序依据并询问用户确认
步骤 2: 生成 HTML 与 PDF
SCRIPT="<skill-root>/scripts/generate_html.py"
# 竖版图集(默认):自动拼成3:4容器
python3 $SCRIPT <图片文件夹> [输出名]
# 横版图集:自动检测,横版 PDF 每页一张(4:3 或 16:9 自动判定)
python3 $SCRIPT <横版图片文件夹>
# 文件名无序号:你评估好顺序后用 --files(--files 会吞掉后续位置参数,输出名用 --output)
python3 $SCRIPT --output <输出名> --files 封面.png 01.png 02.png 结尾.png
# 强制页面方向
python3 $SCRIPT <文件夹> --orientation landscape # 强制横版
python3 $SCRIPT <文件夹> --orientation portrait # 强制竖版
# 已有3:4图片,每张独占完整容器
python3 $SCRIPT <文件夹> --mode full
# 仅生成 HTML,不生成 PDF
python3 $SCRIPT <文件夹> --no-pdf执行前把 <skill-root> 替换为当前加载的 image-to-pages Skill 绝对目录,不要假设它固定安装在 Claude、Codex 或其他 Agent 的某个家目录下。
自动模式检测:竖版图集若超 70% 接近 3:4,自动从 auto 升级到 full(每张独占一页)。
横版比例自动 snap:取横版图 宽/高 中位数,< 1.5 → 4:3(200mm×150mm),≥ 1.5 → 16:9(267mm×150mm)。竖版固定 3:4(150mm×200mm)。
输出文件名规则:不传输出名时自动用 <文件夹名>_layout;显式传 输出名 或 --output 时用原名(不加 _layout 后缀)。
输出的 HTML 文件可直接双击打开,打印和下载功能完全正常,无需启动任何服务器。
参数说明
| 参数 | 说明 |
folder(位置) | 图片文件夹路径,与 --files 二选一 |
output(位置) | 输出文件名,--files 模式下改用 --output |
--output | 输出文件名,--files 模式下使用(避免与多值参数冲突) |
--files | 显式图片路径列表,按给定顺序排版,跳过文件名排序 |
--mode | 竖版布局:auto(拼2张)/ full(每张独占),横版时不生效 |
--orientation | auto(默认,按主方向)/ landscape(强制横版)/ portrait(强制竖版) |
--no-pdf | 跳过 PDF 生成,仅输出 HTML |
--no-compress | 关闭压缩,按原图 base64 嵌入(旧行为,体积约原图 1.33 倍) |
--img-format | 压缩格式:webp(默认,最小且文字锐利)/ jpeg |
--quality | 压缩质量 1-100(默认 80) |
--max-width | 图片最大宽度,超过则等比缩小(默认 1920,0=不缩放) |
--pdf-quality | PDF 二次压缩档位(Ghostscript):ebook(默认,150dpi,缩约5倍)/ screen(72dpi,最小)/ printer(300dpi)/ none(不压缩) |
模式说明
auto(竖版默认):每容器最多2张各占50%高度,单张时占满整个容器高度,object-fit: contain。
full(竖版):每张图独占一个完整容器;接近3:4用 contain,偏离较大用 cover 避免白边。
landscape(横版,自动):每张图独占一页(一页一张),object-fit: contain 不裁切;页面比例按横版图中位数自动 snap 到 4:3 或 16:9。竖版图集里少数横版图会 contain 放入竖版页(左右留白),反之同理。
输出文件
| 文件 | 说明 | 条件 |
<name>.html | 独立 HTML,图片默认 WebP 压缩后 base64 嵌入,双击即可用 | 始终生成 |
<name>.pdf | PDF 文件,页面方向/比例与 HTML 一致,默认经 Ghostscript 压缩 | 需安装 Chrome/Chromium(可选) |
PDF 生成需要系统安装 Chrome、Chromium、Edge 或 Arc 之一。脚本用 headless 模式渲染,会读取 HTML 里的
@page尺寸,所以横版 HTML 自动产出横版 PDF。如未安装浏览器,仍可通过 HTML 的「打印/导出PDF」按钮手动生成。
注意事项
- 文件体积: 图片默认压成 WebP 后再 base64 嵌入,HTML 体积约为原图总和的 1/5~1/7(需 Pillow,无则自动退回原图);
--no-compress可关压缩回到原图 1.33 倍 - 排序: 文件夹模式按自然排序(1,2,3...10);
--files模式严格按传入顺序,不重排 - 横版一页一张: 横版图固定每张独占一页(横版拼2张无意义);竖版才支持 auto 拼2张
- 混合方向: 一个 PDF 内只能统一一个方向(Chrome headless 的
@page是文档级约束)。脚本按主方向统一,少数派图用 contain 放入(会留白) - PDF 生成: 自动调用 Chrome headless,无需手动操作。Chrome 出图后默认用 Ghostscript(若已安装)二次压缩到约 1/5;源图的 WebP 压缩只缩 HTML 不缩 PDF(Chrome 会按原像素重栅格化),故 PDF 体积由
--pdf-quality控制,与--quality无关
示例
示例 1: 竖版图集拼成 3:4
用户:"/path/to/images 帮我做成打印页面"
python3 $SCRIPT /path/to/images
# → /path/to/images_layout.html + .pdf示例 2: 横版图集(PPT 截图、宽屏图)
用户:"/path/to/slides 这些横版图拼成 PDF"
python3 $SCRIPT /path/to/slides
# 自动检测横版,按主比例出 16:9 横版 PDF,每页一张示例 3: 文件名无序号,自己排顺序
用户:"/path/to/comic 这套漫画文件名没序号,按剧情顺序拼"
- Read 逐张看图,排出剧情顺序:
[封面, 第1话, 第2话, 结尾] - 用
--files按顺序传入:
python3 $SCRIPT --output comic --files \
/path/to/comic/封面.png \
/path/to/comic/第1话.png \
/path/to/comic/第2话.png \
/path/to/comic/结尾.png
# → /path/to/comic/comic.html + .pdfDoes it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

