Slide Deck 生成器(HTML)落地文档:NanoBanana Pro + Image 1.5(图像)/ Gemini 3 Pro + Claude Opus 4.5 + GPT-5.2 Thinking(推理)
AI 导读
Slide Deck 生成器(HTML)落地文档 图像模型 NanoBanana Pro、Image 1.5 推理模型 Gemini 3 Pro、Claude Opus 4.5、GPT-5.2 Thinking 目标:在仅使用上述模型的前提下,复现“可适配任意风格 + 排版稳定出色”的工程逻辑,输出 HTML(可导出 PDF / 可选导出 PPTX)。 核心:风格 tokens 与 排版引擎...
Slide Deck 生成器(HTML)落地文档
图像模型 NanoBanana Pro、Image 1.5
推理模型 Gemini 3 Pro、Claude Opus 4.5、GPT-5.2 Thinking
目标:在仅使用上述模型的前提下,复现“可适配任意风格 + 排版稳定出色”的工程逻辑,输出 HTML(可导出 PDF / 可选导出 PPTX)。
核心:风格 tokens 与 排版引擎 解耦;LLM 只负责结构化规划与修复建议;像素级布局由确定性引擎完成。
1) 目标与约束
- 任意风格适配:通过 Theme Tokens +(可选)brandbook/样例 deck 抽取实现换肤
- 排版稳定:不溢出、不重叠、对齐/留白一致;Presenter/Detailed 两种密度
- 可解释/可修复:每次失败输出 issues,进入自动修复回路
- 模型约束:仅使用指定 5 个模型(3 个推理 + 2 个图像)
- 不依赖“模型直接给像素坐标”的自由生成(不可控)
- 不把关键文字生成到图片里(不可检索/不可编辑/跨语言更差)
- 不引入额外第三方生成模型(严格遵守模型白名单)
设计原则(强制)
- P1 LLM 输出必须是 结构化 JSON,通过 schema 校验后才能进入下一阶段
- P2 布局由 确定性排版引擎 完成,支持文字测量与溢出回退
- P3 图像只做“背景/插画/装饰/图标”,不承载正文信息
- P4 Repair loop:规则优先,LLM 仅负责“改写/拆页/重组要点”
2) 总体架构与数据流
Inputs (sources + user prompt + optional brandbook/sample deck)
|
v
[1] Planner (LLM) ---------> Slide Outline IR (v0)
|
v
[2] Style Builder (LLM+rules) -> Theme Tokens
|
v
[3] Composer (rules+LLM opt) -> Component Tree IR (v1)
|
v
[4] Layout Engine (deterministic) -> Layout IR (bboxes + line breaks)
|
v
[5] Renderer (HTML) -> deck.html
|
v
[6] Validators (rules) -> issues
|
v
Repair Loop:
- rule fixes (fast) OR
- LLM rewrite/split/template swap
|
v
Re-layout -> Re-validate -> Done / Fallback
3) 模型分工与路由策略
3.1 推理模型职责
| 模型 | 推荐负责 | 输出特征 | 失败回退 |
|---|---|---|---|
| GPT-5.2 Thinking | 复杂规划/拆页策略/修复决策仲裁 | 高质量结构化推理、较强约束遵循 | Claude 做写作改写;Gemini 做快速补全 |
| Claude Opus 4.5 | 表达优化、语气控制、摘要与 bullet 精炼 | 语言自然、风格稳定 | GPT-5.2 做硬约束修复/结构重排 |
| Gemini 3 Pro | 轻量规划、信息抽取、模板候选打分(可并行) | 速度/性价比路线(按你们预算配置) | GPT-5.2 做最终仲裁 |
3.2 图像模型职责
| 模型 | 推荐负责 | 提示词输入 | 输出要求 |
|---|---|---|---|
| NanoBanana Pro | 风格化插画/背景纹理/图标套件 | tokens + slide intent + imagery style | 不要生成正文文字;输出 16:9 与透明/非透明版本(按需) |
| Image 1.5 | 写实/素材图补齐、通用配图、背景图变体 | tokens + scene + composition hints | 同样禁止正文文字;优先“留白足”的构图便于叠字 |
3.3 路由策略(可落地的最小规则)
- Planner:GPT-5.2 Thinking
- Rewrite:Claude Opus 4.5
- 抽取/打分:Gemini 3 Pro(可选)
- Planner 同时跑 GPT-5.2 与 Gemini,取 schema 更完整者
- Rewrite 同时跑 Claude 与 GPT-5.2,取更短且不丢信息者
- 仲裁:GPT-5.2 只做“选哪个 + 是否拆页/换模板”
// Router 伪代码(思路)
task = {type:"planner"|"rewrite"|"extract"|"arbiter", difficulty, latency_budget}
if task.type=="planner" and task.difficulty=="high": use GPT_5_2
else if task.type=="rewrite": use Claude_Opus
else if task.type=="extract": use Gemini_3
else: use GPT_5_2
// 可选:并行 + 仲裁
candidates = run_parallel([primary, secondary])
best = pick_by(schema_valid && fewer_issues && shorter_text && preserves_keys)
4) 统一输出契约(Schema/JSON)
4.1 Slide IR(v1)最小字段
{
"deck": {
"meta": {
"title": "string",
"language": "zh-CN",
"mode": "presenter|detailed",
"aspect": "16:9",
"pageSize": { "w": 1920, "h": 1080 }
},
"themeRef": "theme.default",
"slides": [
{
"id": "s1",
"intent": "cover|section|concept|comparison|process|timeline|data|quote|summary",
"title": "string",
"subtitle": "string?",
"bullets": ["string"],
"callouts": ["string?"],
"notes": "string?",
"assets": [
{ "role":"bg|illustration|icon|chart", "ref":"assetId?", "styleHint":"string?" }
],
"constraints": { "maxBullets": 5, "maxWordsPerBullet": 14 }
}
]
}
}
4.2 Layout IR(输出给 Renderer)
{
"page": { "w":1920, "h":1080, "safe":48, "grid":8 },
"slides": [
{
"id":"s1",
"nodes":[
{
"nodeId":"title",
"type":"text|list|image|shape|chart",
"bbox":{ "x":96, "y":96, "w":1200, "h":140 },
"styleRole":"h1|h2|body|caption",
"text":"...",
"font":{ "family":"Inter", "size":44, "weight":700, "lineHeight":1.15 },
"lines":["..."] // 可选:已换行结果
}
]
}
]
}
4.3 Issues(Validators 输出)
{
"issues":[
{"type":"overflow","slideId":"s2","nodeId":"bullets","excessPx":72,"severity":"high"},
{"type":"overlap","slideId":"s3","nodeA":"title","nodeB":"visual","severity":"high"},
{"type":"contrast","slideId":"s1","nodeId":"title","ratio":2.3,"severity":"med"}
]
}
5) Prompt 规范与模板
5.1 Planner Prompt(给 GPT-5.2 / Gemini)
{
"task":"planner",
"input":{
"mode":"presenter|detailed",
"language":"zh-CN",
"audience":"string",
"goal":"string",
"sources":[{"id":"p1","text":"..."}],
"constraints":{
"slidesMin":8,
"slidesMax":12,
"maxBulletsPresenter":4,
"maxBulletsDetailed":6,
"maxWordsPerBulletPresenter":12,
"maxWordsPerBulletDetailed":18
}
},
"output_format":"ONLY_JSON_MATCHING_SCHEMA(deck_ir_v1)"
}
5.2 Rewrite Prompt(给 Claude)
{
"task":"rewrite",
"input":{
"target":"shorter|clearer|more_formal|more_playful",
"text":"原 bullet/段落",
"must_keep":["关键词A","数字B","结论C"],
"limits":{"maxWords":12}
},
"output_format":"ONLY_JSON {\"text\":\"...\"}"
}
5.3 Repair Prompt(给 GPT-5.2 仲裁)
{
"task":"repair",
"input":{
"deck_ir":"...",
"issues":"...",
"allowed_actions":[
"rewrite(nodeId,target)",
"trim_bullets(nodeId,keepTopK)",
"swap_template(slideId,templateId)",
"split_slide(slideId,intoN)"
],
"hard_limits":{
"minFontBody":14,
"maxIterations":4
}
},
"output_format":"ONLY_JSON {\"actions\":[...]}"
6) 风格系统(Tokens)
6.1 Tokens 必备字段
{
"themeId":"theme.brandA",
"palette":{"bg":"#0B1220","text":"#E6EDF3","primary":"#7AA2FF","surface":"#101826","line":"#22324A"},
"typography":{"titleFont":"Inter","bodyFont":"Inter","scale":{"h1":44,"h2":32,"body":18,"small":14}},
"spacing":{"grid":8,"safeMargin":48,"gap":16,"lineHeight":1.25},
"shape":{"radius":16,"stroke":1,"shadow":"soft"},
"imagery":{"style":"flat|handdrawn|realistic|chalk|manga","bgPattern":"none|grain|dots"},
"charts":{"axis":"minimal|full","labels":"compact|full"}
}
6.2 “任意风格”的工程做法
- 先做 预置主题库(10~30 套 tokens),把常见风格映射到 tokens(极简/科技/复古/手绘/黑板等)
- 再做 brandbook 抽取(可用推理模型解析文本规则)→ tokens 覆盖
- 风格只改变 tokens,不改变模板与布局逻辑(保证稳定)
7) 模板库与组件树
7.1 Template DSL(结构+约束)
{
"templateId":"concept.2col.imageRight",
"intent":"concept",
"grid":{"cols":12,"rows":12,"safe":48},
"slots":[
{"name":"title","type":"text","area":[1,1,7,2],"styleRole":"h2"},
{"name":"bullets","type":"list","area":[1,3,7,8],"styleRole":"body","maxLines":10},
{"name":"visual","type":"media","area":[8,2,11,10],"fit":"cover","minVisible":0.6}
],
"constraints":{"align":"baselineGrid","minGap":16,"noOverlap":true}
}
7.2 组件树组装规则
- 按 intent 先选模板候选(3~5 个),再根据内容密度与媒体可用性打分
- slot 填充时标记优先级:标题(最高)> 关键结论 > bullets > 装饰
- 为 Repair 留后门:bullets 支持 trim,visual 支持缩放/替换,必要时 split
8) 确定性排版引擎(关键)
8.1 必做能力
- 文字测量:给定字体/字号/宽度,计算换行与高度
- 基线网格:元素吸附 grid(8px),保证齐整
- 溢出回退:rewrite → downscale → trim → swap template → split
- 下限约束:正文字号不低于 minFontBody(例如 14)
8.2 回退策略(建议顺序)
1) Rewrite(Claude 或 GPT-5.2):更短更清晰,不丢 must_keep
2) Downscale(规则):降字号到下限
3) Trim(规则):bullets 保留 top-k,其余拆页
4) Swap template(规则):换更“文字友好”模板
5) Split slide(GPT-5.2 仲裁 + 规则执行):拆成两页或更多
6) Fallback:summary/section 兜底模板
9) 图像生成管线(NanoBanana Pro / Image 1.5)
9.1 使用边界
- 允许:背景纹理、插画、图标、抽象装饰、无字素材图
- 不建议:把标题/正文写进图片(除非你们明确接受不可编辑)
- 推荐构图:为叠字预留留白区;背景不过度花(避免对比度问题)
9.2 图像提示词输入(统一格式)
{
"task":"image_generate",
"model":"nanobanana_pro|image_1_5",
"input":{
"slideId":"s3",
"intent":"concept",
"imagery":{
"style":"flat|handdrawn|realistic|chalk|manga",
"mood":"calm|bold|playful|serious",
"composition":"leave whitespace on left for text",
"avoid":"no text, no watermark, no logos"
},
"palette":{"primary":"#7AA2FF","bg":"#0B1220","accent":"#34D399"},
"size":{"w":1920,"h":1080},
"transparent": false
},
"output_format":"image_binary_or_url"
}
9.3 选型建议(工程规则)
- 需要强风格化一致性(一整套 deck 插画风一致):优先 NanoBanana Pro
- 需要通用写实素材/背景变体:优先 Image 1.5
- 图像失败/不合规:降级为纯色/渐变/几何纹理(规则生成,无需模型)
10) Validators + Repair Loop
10.1 Validators(规则)
| 规则 | 判定 | 修复动作 |
|---|---|---|
| Overflow | bbox 超出 safe area | downscale/trim/swap/split/LLM rewrite |
| Overlap | 关键元素相交 | 挪位/缩图/换模板 |
| Contrast | 对比度低 | 改色/加底板/调背景 |
| Alignment | 未吸附网格 | snap-to-grid |
| Density | 文字密度超阈值 | trim/split/rewrite |
| Consistency | 违反 tokens 白名单 | 回滚到 tokens/role 样式 |
10.2 Repair Loop(收敛机制)
- 最多迭代 3~5 次;每次都必须重新 Layout + Validate
- 规则修复优先;LLM 只做文本改写/拆页建议/模板仲裁
- 若不收敛:强制 split 或 fallback(summary)保证输出稳定
{
"actions":[
{"type":"trim_bullets","slideId":"s2","nodeId":"bullets","keepTopK":4},
{"type":"llm_rewrite","model":"claude_opus_4_5","slideId":"s2","nodeId":"bullets","target":"shorter"},
{"type":"swap_template","slideId":"s3","templateId":"concept.singleCol.textHeavy"}
]
}
11) HTML 渲染与导出
11.1 HTML 渲染建议
- 每页一个
<section class="slide">,固定尺寸(推荐 1920x1080) - tokens → CSS variables;styleRole → class;bbox → inline style(left/top/width/height)
- 导出友好:确保字体加载完成再截图/打印
<section class="slide" style="width:1920px;height:1080px">
<div class="node title h1" style="left:96px;top:96px;width:1200px;height:140px">...</div>
<ul class="node bullets body" style="left:96px;top:260px;width:920px;height:700px">...</ul>
<img class="node visual" style="left:1100px;top:200px;width:720px;height:760px;object-fit:cover" />
</section>
11.2 导出 PDF(推荐)
- Playwright/Puppeteer:加载 HTML →
document.fonts.ready→ pdf/逐页截图 - 打印背景:
printBackground:true
12) 工程化:服务拆分、缓存、日志、评测
12.1 服务拆分(建议)
/api/plan (LLM: GPT-5.2 or Gemini) -> deck_ir_v1
/api/style (rules + LLM optional) -> tokens
/api/compose (rules + LLM optional) -> deck_ir_v1 (slots filled)
/api/layout (deterministic) -> layout_ir
/api/validate (rules) -> issues
/api/repair (LLM arbiter + rules) -> actions
/api/image (NanoBanana/Image1.5) -> asset
/api/render/html (deterministic) -> html
12.2 缓存键(强烈建议)
- LLM:
hash(prompt + schemaVersion + model + temperature) - 文字测量:
hash(fontFamily + size + width + text) - 图片:
hash(tokens + intent + prompt + size + model)
12.3 评测与回归(必须做)
- golden cases:长标题、超多 bullets、无图、全图、CJK、RTL
- 属性测试:随机文本长度/密度,断言“不溢出/不重叠”
- 视觉回归:截图 diff(阈值)
13) MVP 交付清单(按最短路径)
- IR + tokens + 20 模板
- Layout:文字测量 + 回退策略
- HTML renderer + PDF 导出
- Validators:overflow/overlap/alignment
- Planner:GPT-5.2(主)+ Gemini(可选并行)
- Rewrite:Claude(主)
- Repair 仲裁:GPT-5.2
- NanoBanana:插画/背景风格化
- Image 1.5:通用素材/背景变体
- 对比度与留白自动校验
- Layout IR → pptx 坐标映射
- 正文保持为 text box(可编辑)
附录:示例 Schema/接口
A) Model Router 请求体(统一)
{
"model":"gpt_5_2_thinking|claude_opus_4_5|gemini_3_pro|nanobanana_pro|image_1_5",
"task":"planner|rewrite|repair|extract|image_generate",
"schema":"deck_ir_v1|repair_actions_v1|rewrite_v1|...",
"input":{ "...": "..." },
"settings":{
"temperature": 0.2,
"maxTokens": 4000,
"timeoutMs": 45000
}
}
B) Repair Actions Schema(简化)
{
"actions":[
{"type":"llm_rewrite","model":"claude_opus_4_5","slideId":"s2","nodeId":"bullets","target":"shorter"},
{"type":"trim_bullets","slideId":"s2","nodeId":"bullets","keepTopK":4},
{"type":"swap_template","slideId":"s3","templateId":"process.vertical.clean"},
{"type":"split_slide","slideId":"s4","intoN":2}
]
}
深度加工(NotebookLM 生成)
基于本文内容生成的 PPT 大纲、博客摘要、短视频脚本与 Deep Dive 播客,用于多场景复用
PPT 大纲(5-8 张幻灯片) 点击展开
Slide Deck 生成器(HTML)落地文档:NanoBanana Pro + Image 1.5(图像)/ Gemini 3 Pro + Claude Opus 4.5 + GPT-5.2 Thinking(推理) — ppt
基于您提供的文档,我为您整理了一份包含 6 张幻灯片的 PPT 大纲。该大纲使用 Markdown 格式,详细梳理了 Slide Deck 生成器的核心架构、模型分工与落地步骤。
幻灯片 1:项目概述与核心目标
- 工程目标: 打造一个仅依赖指定 5 个大模型,即可复现“可适配任意风格 + 排版稳定出色”的幻灯片生成器 [1]。
- 核心解耦理念: 将“视觉风格(Tokens)”与“版面排版(确定性引擎)”彻底解耦,保障生成的稳定性 [1]。
- 大语言模型(LLM)的边界: LLM 仅负责结构化规划与修复建议,必须输出校验后的 JSON 格式 [1]。
- 图像设计原则: 图像仅用于背景、插画或装饰,不承载正文信息,避免跨语言和编辑困难 [1]。
幻灯片 2:总体架构与数据流向
- 输入与内容规划(Planner): 结合用户输入与参考素材,由大模型生成包含内容大纲的 Slide IR 数据 [1, 2]。
- 风格构建与组件生成(Style & Composer): 解析生成主题 Tokens(Theme Tokens),并依据规则拼装页面组件树 [1, 2]。
- 确定性排版(Layout Engine): 核心排版引擎精确计算元素的像素级坐标(Bboxes)与文字换行 [2, 3]。
- 验证与自动修复(Validators & Repair Loop): 渲染 HTML 前进行规则校验,若发现溢出或重叠,则触发规则与 LLM 结合的自动修复循环 [2, 4]。
幻灯片 3:推理模型(LLM)的精准分工
- GPT-5.2 Thinking: 担任“主脑”,负责高质量的复杂结构化规划、拆页策略以及修复决策仲裁 [2]。
- Claude Opus 4.5: 担任“写手”,专注于表达优化、语气控制,以及对幻灯片要点(Bullet)的改写与精炼 [2]。
- Gemini 3 Pro: 担任“助手”,负责快速的信息抽取、轻量级规划以及模板候选方案打分,提升性价比 [2]。
- 智能路由策略: 支持单模型主导的 MVP 模式,也可通过双模型并行处理(如同时跑 GPT-5.2 和 Gemini)来增强系统冗余与稳定性 [2, 5]。
幻灯片 4:图像生成管线与使用边界
- NanoBanana Pro: 主攻需要强风格化一致性的场景,如全套幻灯片的插画、背景纹理和图标生成 [2, 4]。
- Image 1.5: 负责生成通用素材补齐、写实照片配图以及常规背景图变体 [2, 4]。
- 严格的构图约束: 提示词中强制要求图像为正文预留“留白区”,且禁止生成文字、水印和 Logo [4]。
- 容错与降级机制: 一旦图像生成失败或不合规,系统自动降级使用纯色、渐变或几何纹理背景,无需模型介入 [4]。
幻灯片 5:确定性排版与自动修复循环(关键)
- 排版引擎必备能力: 具备精确的文字测量能力、基线网格(Grid)吸附能力以及下限约束机制 [4]。
- 规则验证器(Validators): 自动检测排版中的内容溢出(Overflow)、元素重叠(Overlap)、对比度异常等问题 [4]。
- 修复循环(Repair Loop): 限定迭代 3-5 次,优先采用速度快的规则修复,LLM 仅提供文本精简和拆页建议 [4]。
- 标准化回退策略: 依次执行文本改写(Rewrite)、缩小字号、裁剪要点、更换图文模板,最后才是强行拆页 [4]。
幻灯片 6:渲染导出与 MVP 落地路线图
- 标准 HTML 渲染: 使用
<section class="slide">容器,结合预设 CSS 变量和固定尺寸(1920x1080)实现稳定渲染 [4, 6]。 - MVP-1 至 MVP-2 阶段: 优先跑通没有任何模型介入的静态排版体系与 PDF 导出,随后接入推理模型实现结构化生成大纲 [6]。
- MVP-3 阶段: 接入 NanoBanana 和 Image 1.5 完善图像管线,通过对比度校验确保图文融合质量 [6]。
- MVP-4 与工程保障: 可选支持 Layout IR 转换为可编辑的 PPTX 导出;并引入接口切分、精准缓存键(Cache Keys)机制与视觉断言评测 [6]。
博客摘要 + 核心看点 点击展开
Slide Deck 生成器(HTML)落地文档:NanoBanana Pro + Image 1.5(图像)/ Gemini 3 Pro + Claude Opus 4.5 + GPT-5.2 Thinking(推理) — summary
这里为您生成一段 SEO 友好的博客摘要以及 3 条核心看点:
SEO 友好博客摘要
本文深入解析了基于 NanoBanana Pro 与 GPT-5.2 Thinking 等 5 款大模型的 Slide Deck 幻灯片生成器落地架构[1]。其核心亮点是将“风格 Token”与“确定性排版引擎”彻底解耦:大模型仅负责结构化内容规划与智能修复,像素级布局则由独立引擎掌控,从根本上解决内容溢出问题[1]。结合强大的自动修复回路(Repair Loop),该方案不仅能一键适配任意风格,还能稳定渲染并导出高质量的 HTML 与 PDF 文件,为 AI 幻灯片开发提供了极佳的工程蓝图[1, 2]。
3 条核心看点
- 架构解耦:大模型仅做结构化规划,像素级排版交由确定性引擎,保障稳定性[1]。
- 风格适配:通过 Theme Tokens 换肤,动态改变视觉样式而不破坏底层模板逻辑[1, 3]。
- 自动修复:内置排版验证,溢出时自动触发规则降级、模型改写或内容拆页[4]。
60 秒短视频脚本 点击展开
Slide Deck 生成器(HTML)落地文档:NanoBanana Pro + Image 1.5(图像)/ Gemini 3 Pro + Claude Opus 4.5 + GPT-5.2 Thinking(推理) — video
这是一份基于您提供的文档,为您量身定制的 60 秒短视频脚本。严格按照您的字数和结构要求编写:
【钩子开场】
怎样用AI做排版不崩的PPT?[1]
【核心解说】
- **模型与排版解耦。**AI只做结构与文案,强制输出JSON数据。[1][2][3]
- **排版靠确定性引擎。**精准计算文字换行,彻底告别溢出与重叠。[1][4][5]
- **专属模型负责配图。**外加自动修复回路,排版失败即刻重组修正。[1][5]
【收束】
用严谨的工程逻辑掌控AI,轻松输出高颜值幻灯片![1][6]
课后巩固
与本文内容匹配的闪卡与测验,帮助巩固所学知识
延伸阅读
根据本文主题,为你推荐相关的学习资料