mcpField
K
kingdee-ppt

kingdee-ppt

github.com/waynezhonDocuments5941 installsUpdated 20w ago
Repository

About kingdee-ppt

A skill for creating Kingdee-branded presentations as HTML decks or editable PPTX files. It uses an HTML-first workflow, offers Classic and Bento Motion styles, and supports in-place HTML text editing; PPTX export is available for Classic.

Key features

  1. 01Create interactive HTML slides
  2. 02Choose Classic or Bento Motion style
  3. 03Edit and save HTML text
  4. 04Export Classic decks as editable PPTX
  5. 05Recommend layouts based on content structure

Use cases

  1. 01Prepare corporate reporting presentations
  2. 02Create product launch or technology decks
  3. 03Present HTML slides in a browser
  4. 04Export Classic slides to PPTX

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/waynezhon/kingdee-ppt-skill --skill kingdee-ppt

After installing, type/kingdee-pptin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

Changelog
.gitignore
anti-ai-slop.md
LICENSE
VERSION
README.md
build_codex.js
design-tokens.md
html-bento-template.md
html-bento-motion.md
html-bento-presets.md
html-kingdee-grids.md
html-kingdee-preflight.md
html-bento-components.md
html-kingdee-components.md
html-kingdee-presets.md
html-kingdee-style.md
html-kingdee-template.md
html-kingdee-typography.md
layout-advanced.md
layout-fixed.md
layout-base.md
layout-content.md
package.json
layout-special.md
layout-models.md
layout-schema.md
assets/
.gitkeep
bin/
kingdee-ppt-update-check
kingdee-ppt-upgrade

Details

From the project README

Preamble (run first)

_KD_CHECK="kingdee-ppt-update-check"
if ! command -v kingdee-ppt-update-check &>/dev/null; then
  _KD_CHECK="$(npm root -g)/kingdee-ppt/bin/kingdee-ppt-update-check"
fi
_UPD=$("$_KD_CHECK" 2>/dev/null || true)
[ -n "$_UPD" ] && echo "$_UPD" || true

If output shows UPGRADE_AVAILABLE <old> <new>: inform user "kingdee-ppt v{new} is available (you're on v{old}). Run kingdee-ppt-upgrade to update." Do NOT auto-upgrade unless user explicitly confirms. Continue with current workflow.

金蝶 PPT/HTML 幻灯片生成 Skill v7.2

基于官方金蝶集团 2026 版 PPT 模板,支持 HTML 交互式演示 与 PPTX 可编辑文件 两种输出。默认先构建 HTML deck,再根据用户选择的输出格式交付或导出。官方背景图和 Logo 内嵌,零配置可用。

v7.2:新增 HTML 编辑模式 — 右上角开关 + 点击任意文字直接修改 + 一键保存 HTML/PPTX 导出 所有组件(stat-card/callout/pillar-card/step-card)自动支持 contenteditable v7.1:新增 Bento Motion 风格变体 — Tailwind v4 + GSAP ScrollTrigger,纯白底 + Apple 滚动动效,可选风格切换 风格对比:Classic(传统PPT)vs Bento Motion(科技发布) v7.0:HTML-first 架构 — 融合 huashu-design 最佳实践,HTML 是第一公民,PPTX 是可选导出 新增:html2pptx.js + export_deck_pptx.mjs → 真文本框可编辑 PPTX 导出 新增:设计方向顾问(模糊需求时推荐 3 个风格选项) 新增:Anti AI-slop 规则(禁紫渐变/emoji图标/Inter字体) v6.0:HTML 原子组件系统 — 借鉴 open-design,放弃固定版式编号,采用组件+网格自由组合模式 v5.0:HTML 输出模式 → 交互式网页幻灯片,键盘导航、触摸滑动、动画效果


HTML 风格选择(v7.1 新增)

双风格体系:Classic(默认)与 Bento Motion(可选)

维度Classic(默认)Bento Motion(科技感)
背景冰蓝底/渐变封面纯白 #FFFFFF
网格12 份比例系统Bento Grid span(1/2/4 列)
字号对比标题 18-28pt / 正文 16ptHero 数字 80-160pt / 正文 14pt
动效Intersection Observer fadeGSAP ScrollTrigger(Apple 式)
中英文中文为主中文大字粗体 + 英文小字点缀
图形复杂 SVG/图表勾线简洁图形
CDN无外部依赖Tailwind v4 + GSAP + Font Awesome
PPTX 导出支持(html2pptx.js)不支持(走 PDF)
适用场景正式汇报、领导层、政府客户产品发布、科技受众、创新展示

触发词:

  • 用户说「Bento风格」「Apple动效」「科技感」「现代感」→ Bento Motion
  • 内容是科技产品/AI/SaaS/开发者工具 → 推荐 Bento Motion
  • 默认 → Classic

文件读取顺序(v5.1 新增)

Phase 0 开始前必须按顺序读取以下文件:

1. design-tokens.md    → 设计变量常量(COLORS/COLOR_SEQ/RADIUS/SHADOWS/SPACING/FONT)
2. layout-schema.md    → 版式参数命名规范(bgColor/textColor 统一命名)
3. rhythm-templates.md → 节奏模板(页面组合预设 + 场景匹配)
4. style-guide.md      → 视觉规范(品牌色/字体/间距)
5. layout-base.md      → 通用辅助函数(loadAsset/addLogo/addFooter/addContentTitle/bentoCard)
6. layout-fixed.md     → 固定版式(封面/目录/章节/结尾:版式01-03,10)
7. layout-content.md   → 内容版式(要点/数据/对比/流程/图文/时间轴:版式04-09)
8. layout-advanced.md  → 高级版式(数据看板/Bento/架构/特性/矩阵/金句/沉浸/焦点:版式11-18)
9. layout-models.md    → 思维模型版式(金字塔/PDCA/SWOT/黄金圈/5W1H/SCQA/IPD:版式19-25)
10. layout-special.md  → 特殊版式(图标行/半出血/悬浮统计/对比栏:版式26-29 + 速查表)
11. pptx-builder.md    → 构建流程规范(资源加载/QA清单)

⚠️ design-tokens.md 和 layout-schema.md 是新增文件,必须最先读取。
⚠️ COLOR_SEQ/阴影工厂定义已迁移至 design-tokens.md,禁止在其他文件重复定义。
⚠️ layout-presets.md 已拆分为 6 个子文件(layout-base/fixed/content/advanced/models/special),按需读取。

HTML-first 工作流(v7.0)

核心理念:HTML 是第一公民,PPTX 是可选导出。先做能浏览器演讲的 HTML deck,再根据需要导出可编辑 PPTX。

──────────────────────────────────────────────────
  统一流程(Phase F → 0 → 1 → 2 → H → X)
──────────────────────────────────────────────────

Phase F:输出格式选择(⚠️ 用户未明确指定格式时触发)
  F.1 → 使用 AskUserQuestion 询问输出格式:
         · HTML 交互式演示 — 浏览器演讲、支持动画、可部署 Vercel、可导出 PDF
         · PPTX 可编辑文件 — 传统 PowerPoint、可二次编辑、离线演示
  F.2 → 若选 HTML → 记住 OUTPUT_FORMAT=html,进入 Phase 0
  F.3 → 若选 PPTX → 记住 OUTPUT_FORMAT=pptx,进入 Phase 0
         后续 Phase H 须严格遵守 html2pptx.js 4 条硬约束,完成后自动进入 Phase X
  F.4 → 用户已明确说「HTML」「网页版」「PPTX」「可编辑PPT」「PowerPoint」→ 跳过此阶段,直接赋值 OUTPUT_FORMAT

Phase 0:内容结构分析(核心引擎)
  0.1 → 读取用户内容(文字/大纲/文档)
  0.2 → 逐页分析内容特征(要点数量、层级关系、对比关系、数据图表)
  0.3 → 匹配思维模型信号(PDCA/SWOT/黄金圈等高置信信号)
  0.4 → 推荐最适合版式(每页单独分析,不套场景模板)
  0.5 → AI品牌Logo识别(如有AI品牌关键词)

Phase 0.5:设计方向顾问(⚠️ 仅当需求模糊时触发)
  0.5.1 → 若用户需求模糊(如"做个PPT介绍我们的产品"),触发顾问模式
  0.5.2 → 从 3 种金蝶风格方向推荐选项:
         · 风格 A:沉稳专业(深藏青 + 数据卡片 + 金字塔)
         · 风格 B:活力创新(品青渐变 + Bento Grid + 时间轴)
         · 风格 C:简洁克制(白底 + 要点列表 + 对比栏)
  0.5.3 → 用户选择后,进入 Phase 1

Phase 1:大纲+版式推荐
  1.1 → 输出大纲,每页标注推荐版式+推荐理由
  1.2 → 用户确认/调整版式 → 如需调整,标注新版式

Phase 2:内容脚本
  2.1 → 输出内容脚本(含排版指令)
  2.2 → 用户确认 → 进入 HTML 生成

Phase H:HTML 生成(v7.0 核心输出)
  ┌─ H.0 风格选择(新增 v7.1)
  │   ├─ 用户说「Bento风格」「Apple动效」「科技感」「现代感」→ 跳转 Phase H.Bento
  │   ├─ 内容是科技产品/AI/SaaS/开发者工具 → 推荐 Bento Motion,问用户确认
  │   └─ 默认 → Classic 风格(现有流程)
  │
  ┌─ Phase H.Classic(默认流程)
  │   H.0 → Read `html-kingdee-preflight.md` → 预检清单
  │   H.1 → Read `html-kingdee-template.md` → HTML 结构 + JS 功能
  │   H.2 → Read `html-kingdee-style.md` → CSS 品牌色 + 响应式
  │   H.3 → Read `html-kingdee-components.md` → 原子组件
  │   H.4 → Read `html-kingdee-grids.md` → 网格比例系统
  │   H.5 → Read `html-kingdee-typography.md` → 字体配对
  │   H.6 → Read `html-kingdee-presets.md` → CSS 版式预设(按需)
  │   H.7 → 生成多文件 HTML deck(index.html + slides/*.html)
  │         ⚠️ OUTPUT_FORMAT=pptx 时,必须严格遵守 html2pptx.js 4 条硬约束
  │         ⚠️ OUTPUT_FORMAT=html 时,可正常使用动画、渐变、背景图
  │   H.8 → 浏览器预览 → 用户确认
  │   H.9 → 若 OUTPUT_FORMAT=html → 交付 HTML
  │         若 OUTPUT_FORMAT=pptx → 进入 Phase X
  │
  └─ Phase H.Bento(Bento Motion 风格,v7.1 新增)
      H.B0 → Read `html-bento-template.md` → Tailwind v4 + GSAP CDN 骨架
      H.B1 → Read `html-bento-components.md` → Bento Grid 卡片 + 勾线图形
      H.B2 → Read `html-bento-presets.md` → 10 种 Bento 版式预设
      H.B3 → Read `html-bento-motion.md` → GSAP ScrollTrigger 动效库
      H.B4 → 生成单文件 HTML deck(全页滚动 + scroll-triggered 动效)
             ⚠️ Bento Motion 不支持 PPTX 导出(使用 CDN + Tailwind)
             ⚠️ 若 OUTPUT_FORMAT=pptx → 拒绝并建议改用 Classic 风格
      H.B5 → 浏览器预览 → 用户确认 → 交付 HTML

Phase X:PPTX 导出(⚠️ 仅当 OUTPUT_FORMAT=pptx 时执行)
  X.1 → 检查 HTML 是否已按 html2pptx.js 4 条硬约束生成
  X.2 → 若合规 → 执行 export_deck_pptx.mjs
  X.3 → 若未合规 → 列出具体错误项,建议修改 HTML 或改用 PDF
  X.4 → 输出 .pptx 文件 → 交付

──────────────────────────────────────────────────
  html2pptx.js 4 条硬约束(PPTX 导出必需)
──────────────────────────────────────────────────
1. body 固定 960pt × 540pt(匹配 LAYOUT_WIDE 13.333" × 7.5")
2. 所有文字包在 <p>/<h1>-<h6>/<ul>/<ol> 里(禁止裸文本 div)
3. <p>/<h*> 标签自身不能有 background/border/shadow(放外层 div)
4. 不用 CSS gradient、不用 background-image(用 <img> 标签)

⚠️ 不遵守以上约束的 HTML 无法导出 PPTX,只能交付 HTML 或 PDF。

Phase 0:内容结构分析引擎(版式匹配核心)

0.1 内容特征信号识别

逐页/逐段分析以下信号,决定版式:

内容特征匹配版式信号关键词/结构
单一核心结论 + 3个分论点金字塔版式(19)"结论先行"、"三大支柱"、1+N层级结构
4格循环结构PDCA版式(20)计划/执行/检查/改进、Plan/Do/Check/Act
2×2矩阵对比SWOT版式(21)优势/劣势/机会/威胁、内外部维度对比
三层嵌套逻辑黄金圈版式(22)WHY/HOW/WHAT、核心使命→方法→产品
6要素均匀分布5W1H版式(23)Who/When/What/Where/Why/How ≥4项
4步因果链SCQA版式(24)场景→冲突→问题→解决
5列趋势分析IPD五看版式(25)看行业/看客户/看机会/看竞争/看自己
2-3个数据指标展示数据卡片(05)百分比、增长率、数值对比
时间线/里程碑时间轴(09)Q1→Q2→Q3→Q4、里程碑、阶段推进
左右对比/方案对比对比栏(29)方案A vs 方案B、优缺点对比
图标+要点列表图标行(26)3-5个要点,每要点有图标对应
大数字+统计展示悬浮统计(28)单个大数字强调、统计卡片组合
纯文字要点 ≤5条要点列表(04)简洁要点列表,无特殊结构
架构图/层级关系架构图(13)层级结构、模块关系、技术架构
单张大图+少量文字半出血叠加(27)图片为主,文字叠加在图上
0.2 版式匹配优先级规则
优先级1:思维模型信号明确 → 直接使用模型版式(置信度高)
优先级2:数据/图表信号 → 数据卡片、统计版式
优先级3:对比/时间结构 → 对比栏、时间轴
优先级4:纯要点列表 → 要点列表版式(兜底)

同一PPT版式多样性规则:

  • 相邻3页不得使用同一版式
  • 纯文字要点页不得连续超过2页
  • 每页至少包含一种视觉元素(图标、数字、色块、图片)
场景 → 默认结构偏好
场景自动包含页面首选版式组合
内部汇报仅内容页要点列表 + 数据卡片 + 时间轴
伙伴赋能封面 + 内容 + 结尾架构示意 + 流程图 + 对比页
客户大会全结构(封面/目录/章节/内容/结尾)数据卡片 + 图文并排 + 章节页 + 思维模型
方案提案封面 + 目录 + 内容对比页 + 流程图 + 数据卡片 + PDCA/SWOT

⚠️ 场景偏好作为默认建议,用户明确指定结构时按用户要求执行。

0.3 版式推荐输出格式

在大纲阶段输出每页推荐版式及理由:

第 05 页  推荐版式:[数据卡片05]  理由:包含3个百分比指标,适合卡片展示
第 07 页  推荐版式:[PDCA循环20] 理由:明确出现"计划→执行→检查→改进"四步结构
第 09 页  推荐版式:[对比栏29]   理由:方案A与方案B对比,左右对比布局最优

0.5 AI 品牌 Logo 识别(lobe-icons 自动嵌入)

在完成 Phase 0 内容结构分析后、进入 Phase 1 前,扫描全文识别 AI 品牌/平台/模型关键词,并在内容脚本阶段为对应页面标注 logo 嵌入指令。

⚠️ 映射表在 references/ai-brand-logos.md,仅当检测到 AI 品牌关键词时才读取该文件。


0.5.1 扫描触发条件

满足以下任意一条即触发扫描(并读取 references/ai-brand-logos.md):

  • 内容中出现 AI 品牌名称(如 DeepSeek、通义千问、华为云等)
  • 内容中出现 大模型/AI 平台描述(如"接入 GPT-4"、"调用文心一言"、"基于 Claude")
  • 场景为「伙伴赋能」「客户大会」「方案提案」且内容涉及技术合作/生态展示

0.5.2 品牌识别映射表

📄 完整映射表见 references/ai-brand-logos.md,以下为常用示例:

常见品牌lobe-icons Slug彩色版
OpenAI / GPTopenai无
Claude / Anthropicclaudeclaude-color ✅
DeepSeekdeepseekdeepseek-color ✅
华为云 / 盘古huaweicloudhuaweicloud-color ✅
阿里云 / 通义alibabacloudalibabacloud-color ✅
文心一言 / 百度wenxinwenxin-color ✅
MCP 协议mcp无

CDN 地址:npmmirror(首选)https://registry.npmmirror.com/@lobehub/icons-static-svg/latest/files/icons/{slug}.svg


0.5.3 识别结果输出(在大纲阶段标注)

在大纲每页末尾新增 [logo: slug1, slug2] 标注:

第 05 页  [内容-Bento卡片]  AI生态合作伙伴  [logo: huawei, alibaba, bytedance]
第 07 页  [内容-要点列表]   多模型接入方案  [logo: openai, claude, deepseek]
第 09 页  [内容-对比页]     模型能力对比    [logo: qwen, wenxin]

0.5.4 Logo 排版规则
场景排版方式尺寸
Bento 卡片页(每张卡片对应一个品牌)卡片左上角 logo 图标 + 右侧文字0.45" × 0.45"
合作伙伴展示页(横排 logo 墙)底部横排均匀分布,灰色浅底衬托0.5" × 0.5"
要点列表页(行首品牌标识)行首 logo 替代项目符号0.3" × 0.3"
技术架构图(标注组件来源)色块旁边紧贴放置0.35" × 0.35"
封面/章节页❌ 不放 lobe-icons(避免喧宾夺主)—

颜色处理规则:

  • 深色(主蓝/品青)背景卡片 → 使用 {slug}-color.png 彩色版,或白色单色版
  • 浅色/白色背景 → 使用 {slug}.svg 原色版
  • PNG fallback 路径:https://registry.npmmirror.com/@lobehub/icons-static-png/latest/files/icons/{slug}.png

0.5.5 内容脚本中的 Logo 标注格式
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【第 X 页】版式:[内容-Bento卡片]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
标题:苍穹生态AI伙伴矩阵

卡片列表:
  卡片1  [logo: huawei]     华为云
         · 盘古大模型 + CodeArts IDE
         · 联合开发者竞赛合作方
  卡片2  [logo: alibaba]    阿里云
         · 通义千问接入苍穹
         · 云市场联合运营
  卡片3  [logo: deepseek]   DeepSeek
         · 企业级私有化部署方案
         · 财务场景专属模型微调

排版指令:3列等宽卡片,每卡左上角嵌入logo(0.45"),logo下方品牌名12pt灰色
图片:无(全部用lobe-icons)

0.5.6 执行限制与降级处理
情况处理方式
Slug 在映射表中找不到跳过 logo,使用 emoji 替代(如 🤖),不报错
CDN 拉取失败(网络超时)自动切换备用 CDN;仍失败则跳过,大纲保留标注
SVG 转 PNG 失败直接用 PNG CDN 地址拉取 fallback
单页 logo 数量 > 6 个合并为「logo 墙」版式,底部横排,文字移至标题区
用户说「不要 logo」/「不要图标」跳过整个 0.5 阶段,不执行任何 lobe-icons 拉取

Phase 1:大纲+版式推荐

1.1 输出大纲(每页标注推荐版式+推荐理由)

输出完整大纲,每页版式字段须标注推荐理由:

──────────────────────────────────────────────────
  金蝶PPT大纲 · [主题] · 共 X 页
  版式分析:[PDCA × 1页 | 数据卡片 × 2页 | 要点列表 × N页]
──────────────────────────────────────────────────
第 01 页  [封面页]              主标题 / 副标题 / 日期
第 02 页  [目录页]              4个章节导览
第 03 页  [章节分隔 01]         章节名 / 副标题
第 04 页  [SWOT矩阵版式21]      页面标题  理由:明确出现优势/劣势/机会/威胁四要素
第 05 页  [数据卡片05]          页面标题  理由:包含3个百分比指标,适合卡片展示
第 06 页  [章节分隔 02]         章节名
第 07 页  [PDCA循环版式20]      页面标题  理由:计划→执行→检查→改进四步结构
第 08 页  [要点列表04]          页面标题  理由:5条简洁要点,无特殊结构
...
第 XX 页  [结尾页]              多语言致谢
──────────────────────────────────────────────────
1.2 用户确认/调整版式

使用 ask_user_input 提问:

问题  标题:"大纲确认"  类型:single_select
  选项: 没问题,开始写内容 / 需要调整版式
  • 选「没问题」→ 进入 Phase 2
  • 选「调整版式」→ 用户指定页码和新版式,更新大纲

Phase 2:内容脚本

2.1 输出内容脚本

思维模型页须额外注明模型结构,格式如下:

思维模型页脚本格式:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【第 X 页】版式:[PDCA循环版式]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
标题:2025年度项目复盘

模型结构:
  P(计划):年初制定的三大目标
  D(执行):实际落地情况,完成率80%
  C(检查):发现效率瓶颈在交付环节
  A(改进):2026年引入自动化流程

排版指令:4格循环色块(顺时针),中央↻符号
图片:无

IPD五看页脚本格式:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【第 X 页】版式:[IPD五看版式]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
标题:市场全景分析

模型结构:
  看行业:企业数字化加速,AI原生应用渗透率 <10%
  看客户:核心诉求从降本转向增效,愿为Agent买单
  看机会:Skill生态市场规模预计 2026年达2亿
  看竞争:友商缺乏元数据治理,在AI准确性上有短板
  看自己:苍穹PaaS底座扎实,ISV生态已达2800+

排版指令:5列等宽卡片横排,奇偶列顶部交替主蓝/品青,内容区浅灰蓝底
图片:无

标准内容页脚本格式:

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【第 X 页】版式:[内容-要点列表]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
标题:xxxxxx

正文内容:
• 普通要点(≤30字,18pt普通)
• ★ 重点要点(≤30字,加粗+蓝色/金色强调)
• 普通要点

图片:无 / 图片N → 位置:左侧 / 右侧 / 全页
排版建议:[三列卡片 / 横向流程 / 左右对比 / 纯要点]

层级标注规则:

  • ★ = 重点强调(20pt 加粗,蓝色 2971EB 或黄色 FFB61A)
  • 无标记 = 普通内容(18pt 普通,1.3× 行距)
  • [底色块] = 思维模型一级信息(品牌色背景 + 白字加粗)
  • [icon:📊] = 指定图标(写在卡片/格子标注行,生成时调 addIconBadge 或直接 addText)

图标使用规则(内容脚本阶段):

  1. 思维模型页 — 每格默认带图标(见 style-guide.md § 10.4),脚本中可用 [icon:默认] 表示采用推荐值,或 [icon:🎯] 覆盖
  2. Bento 卡片页 — 主卡(深色背景)配大图标(28–32pt),次卡(浅色)配中图标(24pt)
  3. 要点列表页 — 行首图标尽量统一(同一页不超过 2 种图标),或全部不用图标
  4. 图标密度上限 — 单页最多 6 个图标;同一页不得出现 3 种以上图标类别(避免视觉噪声)
  5. 颜色规则 — 深色背景格(主蓝/品青)→ 图标 color: FFFFFF;浅色底 → 图标 color: 2971EB

内容原则:

  • 每页 ≤5 个要点,单条 ≤30 字;超出则拆页
  • 思维模型页每个格 ≤3 个要点,核心词 ≤6 字加粗置中
  • 内容不超过版面 70%,留白 ≥ 30%(参见 style-guide.md § 12)
  • 品牌色背景上的文字必须用白色
  • 语调简洁有力,企业高管演讲调性

布局多样性规则(必须执行):

  • 相邻 3 页不得使用同一版式——每页轮换:列数、卡片/统计/图片/文字型
  • 纯文字要点页(版式04)不得连续出现超过 2 次——之后必须插入有视觉元素的版式
  • 每页必须包含至少一种视觉元素(图标、数字统计、图片、色块、图表之一)

对齐规则:

  • 段落文字、要点列表 → 左对齐
  • 封面/金句页标题 → 居中;内容页标题 → 左对齐
  • 禁止内容页标题下方添加强调线(章节分隔页品牌横线除外)

间距规则(全张统一):

  • 页面左右最小边距:0.5"
  • 内容块之间间距:选 0.3" 或 0.5" 并全张保持一致,不混用
2.2 用户确认

「以上是全部 X 页的内容脚本,其中包含 [N] 个思维模型版式页([模型名称列表])。如需修改,告诉我页码和修改内容,我统一调整后再生成文件。没有问题请回复「开始生成」。」

收到「开始生成」→ 进入 2.3 生成文件。


2.3 生成文件

第一步:读取生成阶段必需文件

Read `layout-presets.md` → 获取版式代码模板
Read `pptx-builder.md`  → 获取构建流程规范
If AI品牌logo标注存在 → Read `references/ai-brand-logos.md`

第二步:执行构建流程

编写 /home/claude/build_pptx.js
  ↓
node build_pptx.js
  ↓
soffice PDF → pdftoppm 预览图
  ↓
视觉 QA(逐张检查,至少一次修复循环)
  ↓
cp output.pptx /mnt/user-data/outputs/
  ↓
present_files 交付

交付说明控制在 2 行以内:「共 X 页,包含[封面/章节/内容/结尾],其中 [N] 页采用思维模型版式([模型列表]),已通过视觉QA。」


6种思维模型版式规范

⚠️ 完整 PptxGenJS 代码见 layout-presets.md § 版式 19-25,下方仅列排版原则和色块结构,供内容脚本阶段参照。


模型 A:金字塔 / MECE 版式(→ 版式 19)

结构:顶部结论 → 中层分论点 → 底层论据(三级分层)

┌────────────────────────────────┐  ← 主蓝 #2971EB,白字,结论一句话(全宽 1/4页高)
│           核心结论              │
└────────────────────────────────┘
┌──────────┐ ┌──────────┐ ┌──────────┐  ← 黄色 #FFB61A,白字,分论点(三列等宽)
│  分论点1  │ │  分论点2  │ │  分论点3  │
└──────────┘ └──────────┘ └──────────┘
  · 论据1       · 论据1       · 论据1     ← 浅灰蓝底 #E7F1FF,深色小字

品牌色:结论=主蓝#2971EB / 分论点=黄色#FFB61A / 论据=浅灰蓝#E7F1FF


模型 B:PDCA 循环版式(→ 版式 20)

结构:4格顺时针排布,中央循环符号

  ┌────────┐   ┌────────┐
  │ P 计划 │ → │ D 执行 │
  └────────┘   └────────┘
      ↑    ↻       ↓
  ┌────────┐   ┌────────┐
  │ A 改进 │ ← │ C 检查 │
  └────────┘   └────────┘

品牌色:P=主蓝#2971EB / D=品青#22AAFE / C=黄色#FFB61A / A=紫色#966EFF


模型 C:SWOT 矩阵版式(→ 版式 21)

结构:2×2 矩阵,横纵轴标注内外/优劣维度

              内部因素              外部因素
优势/机会  ┌──────────────────┐  ┌──────────────────┐
           │ S  优势           │  │ O  机会           │
           └──────────────────┘  └──────────────────┘
劣势/威胁  ┌──────────────────┐  ┌──────────────────┐
           │ W  劣势           │  │ T  威胁           │
           └──────────────────┘  └──────────────────┘

品牌色:S=主蓝#2971EB / O=蓝绿#05C8C8 / W=浅灰蓝#E7F1FF(深字) / T=紫色#966EFF


模型 D:黄金圈版式(→ 版式 22)

结构:三层嵌套椭圆(WHY→HOW→WHAT 由内到外)+ 右侧说明列

左侧(椭圆嵌套):              右侧(说明列):
┌─── WHAT 浅灰 ───────────┐     [WHY蓝] WHY — 为什么做:核心使命
│  ┌─── HOW 品青 ───┐     │     [HOW青] HOW — 怎么做:方法路径
│  │  ┌─ WHY 蓝 ─┐  │     │     [WHAT灰] WHAT — 做什么:产品服务
│  │  └──────────┘  │     │
│  └───────────────┘      │
└─────────────────────────┘

品牌色:WHY内核=主蓝#2971EB / HOW中层=品青#22AAFE / WHAT外层=浅灰蓝#E7F1FF


模型 E:5W1H 六格版式(→ 版式 23)

结构:2行×3列均等卡片,顶部蓝色标签 + 内容区

┌──────────────┐  ┌──────────────┐  ┌──────────────┐
│ WHO  谁      │  │ WHAT  什么   │  │ WHEN  何时   │
├──────────────┤  ├──────────────┤  ├──────────────┤
│ · 内容要点   │  │ · 内容要点   │  │ · 内容要点   │
└──────────────┘  └──────────────┘  └──────────────┘
┌──────────────┐  ┌──────────────┐  ┌──────────────┐
│ WHERE  何地  │  │ WHY  为何    │  │ HOW  如何    │
├──────────────┤  ├──────────────┤  ├──────────────┤
│ · 内容要点   │  │ · 内容要点   │  │ · 内容要点   │
└──────────────┘  └──────────────┘  └──────────────┘

品牌色:卡片顶部标签=主蓝#2971EB白字 / 内容区=浅灰蓝#E7F1FF深字


模型 F:SCQA 四步流程版式(→ 版式 24)

结构:四步横向箭头流 + 底部内容说明行

[S 场景] → [C 冲突] → [Q 问题] → [A 解决]
 浅灰底      品金底      紫色底      主蓝底
  ↓            ↓           ↓           ↓
 说明文字    说明文字    说明文字    说明文字

品牌色:S=浅灰蓝#E7F1FF(深字) / C=黄色#FFB61A / Q=紫色#966EFF / A=主蓝#2971EB


模型 G:IPD 五看版式(→ 版式 25)【新增】

结构:5列等宽卡片横排,顶部序号色块 + 内容区

┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐
│ 01   │  │ 02   │  │ 03   │  │ 04   │  │ 05   │
│看行业│  │看客户│  │看机会│  │看竞争│  │看自己│
├──────┤  ├──────┤  ├──────┤  ├──────┤  ├──────┤
│核心  │  │核心  │  │核心  │  │核心  │  │核心  │
│观点  │  │观点  │  │观点  │  │观点  │  │观点  │
│      │  │      │  │      │  │      │  │      │
│支撑  │  │支撑  │  │支撑  │  │支撑  │  │支撑  │
│数据  │  │数据  │  │数据  │  │数据  │  │数据  │
└──────┘  └──────┘  └──────┘  └──────┘  └──────┘

品牌色:奇数列顶块=主蓝#2971EB / 偶数列顶块=品青#22AAFE / 内容区=浅灰蓝#E7F1FF

脚本格式:

模型结构:
  看行业:[核心观点] + [支撑数据/趋势]
  看客户:[核心观点] + [典型诉求/洞察]
  看机会:[核心观点] + [市场规模/增速]
  看竞争:[核心观点] + [竞品/差异化]
  看自己:[核心观点] + [优势/短板]

排版指令:5列等宽,顶部序号+标题色块(交替主蓝/品青),内容区浅灰蓝底

品牌色语义映射总表

⚠️ 严格约束:PPT 中只允许使用以下颜色,禁止使用任何不在此列表中的颜色(尤其禁止红色 #E8210A)。

主色系
品牌色色值思维模型中的语义角色
科技蓝(主蓝)#2971EB核心结论 / 首要模块 / WHY / Plan / Strengths / Answer
亮天蓝(品青)#22AAFE执行流程 / 方法层 / HOW / Do / 次级信息
章节青#00CCFE章节页超大数字 + 装饰横线(专用,不用于内容页)
深紫蓝(藏青)#28245F强对比文字块 / 深色强调 / 图表深色底
白色#FFFFFF所有深色背景上的文字
辅助色系
品牌色色值思维模型中的语义角色
绿松石青#05C8C8增长正面 / 机会 / Opportunities
薰衣草紫#966EFF挑战冲突 / 威胁风险 / Act改进 / Question / Threats / Complication
橙黄#FFB61A强调要素 / 改进提示 / WHAT / Check / 警示信息
深灰#373838正文文字 / 浅色背景上的标注
浅灰#BFBFBF辅助说明文字 / 次级标注 / 分割线 / 边框
冰蓝#E7F1FF二级信息底色 / 论据区 / Weaknesses / Situation / 卡片背景
颜色禁止清单
禁止颜色原因
❌ 红色 #E8210A不在官方色盘中;章节页装饰横线必须用 #00CCFE,禁止用红色
❌ 旧主蓝 #1770EA已替换为官方科技蓝 #2971EB
❌ 旧品金 #FFC000 / #FFB800已统一为官方橙黄 #FFB61A
❌ 任何不在上表中的颜色破坏品牌一致性

Anti AI-slop 规则(禁止事项)

防止生成内容落入AI模板通病,确保输出符合金蝶企业级标准。

问题❌ 禁止✅ 正确做法
过度渐变全页渐变背景、彩虹配色金蝶标准背景图或品牌色系
空洞图标generic 灯泡/齿轮/火箭图标金蝶品牌图标或无图标纯文字
英文套话"Think Big" "Innovation" "Future"金蝶价值观:致良知、走正道、行王道
无意义装饰抽象波浪、点阵、几何图形只用官方气泡圆元素
章节编号滥用01/02/03/04 但无章节内容有实质章节才用章节分隔页
段落过长单条要点超过50字≤30字,每页≤5要点
数据空洞"显著提升""大幅增长"无数字必须有具体数字或明确来源
堆砌热词AI Agent、大模型、数字化转型滥用每页最多1个技术热词,配具体场景
假性对比新旧对比但无差异描述左右对比页必须列出≥3个差异点
时间轴空洞只有年份无事件描述每个时间点必须有事件+影响

金蝶品牌知识库

类别内容
使命予力企业成就不凡
愿景做最值得托付的企业管理AI平台
价值观致良知、走正道、行王道
金蝶哲学以客户为中心,长期坚持专业主义;以奋斗者为本,长期坚持明心净心
四部曲明心净心(起心动念/境界格局)→ 道 → 德(意识/语言/身行)→ 事(结果状况)
IPD五看看行业 / 看客户 / 看机会 / 看竞争 / 看自己(每项:核心观点 + 支撑数据)
项目层级项目总监 → 项目经理 → 组长(含关键职责)→ 组员
IT架构分层SaaS层 / PaaS层 / IaaS层
保密级别④ 内部公开 请勿外传

常见情况处理

情况处理方式
用户未指定输出格式触发 Phase F,询问 HTML vs PPTX,选择后再进入 Phase 0
用户直接提供完整内容若格式已明确,直接进入 Phase 0 内容分析;否则先走 Phase F
用户需求模糊(如"做个PPT介绍产品")先触发 Phase F 选格式,再触发 Phase 0.5 设计方向顾问
用户明确指定模型跳过 Phase 0 扫描,直接采用指定模型版式
用户说「不要思维模型」Phase 0 结果全部忽略,按标准版式处理
用户说「直接生成」/「不用确认」若格式未明确,先触发 Phase F;然后快速模式:Phase 0+1+2+H 合并输出,末尾一个确认问题
用户只要内容脚本不要文件完成 Phase 2 后停止
用户说「不要封面/结尾」记住偏好,大纲中删除对应页
章节超过4个建议合并或设附录,目录页最多4章
单页内容过多拆为2页,用承接标题「(一)」「(二)」
检测到4种以上模型保留主要3种,其余降级为标准版式,大纲中注明
用户上传已有 .pptx提取内容后重排为金蝶风格 HTML deck
用户提供数据要求图表收集数据后在 HTML 中用 CSS/Canvas 绘制,PPTX 导出时转为图片
内容含 AI 品牌/大模型关键词大纲标注 [logo: slug],HTML 中用 lobe-icons SVG
用户说「不要 logo」跳过 logo 拂取,不调用 CDN
用户中途要求切换输出格式若未进入 Phase H,回退到 Phase F 重新选择;若已进入 Phase H,评估调整成本
OUTPUT_FORMAT=pptx 且用户要求导出 PPTX进入 Phase X,执行 scripts/export_deck_pptx.mjs
用户说「可编辑PPTX」/「要PPT文件」设置 OUTPUT_FORMAT=pptx,Phase H 必须按 html2pptx 4 条硬约束执行
html2pptx 导出失败提示 HTML 不合规,列出具体错误,建议修改 HTML 或输出 PDF
OUTPUT_FORMAT=html 且用户只要 HTML交付 HTML deck,可浏览器演讲或部署 Vercel,跳过 Phase X
用户要 PDF用 Playwright 截图合并导出 PDF(⚠️ 动画丢失),不依赖 OUTPUT_FORMAT
用户说「编辑好了」/「保存修改」提示用户在 HTML 页面点击「保存 HTML」按钮导出
用户编辑后要导出 PPTX提示保存 HTML → 运行 CLI 命令 node scripts/export_deck_pptx.mjs
用户说「不要编辑功能」HTML 中移除 EditController 和编辑工具栏 UI

HTML 输出详细规范(v7.0)

HTML 是第一公民,PPTX 是可选导出。本节规范 HTML deck 的生成和导出。

HTML 输出特点
特点说明
单文件全部 CSS/JS 内联,零依赖,可直接浏览器打开
交互式键盘导航、触摸滑动、动画效果、进度条、导航点
响应式clamp() 字号自适应,移动端/投影仪完美适配
品牌一致与 PPTX 共用相同的品牌色系、版式逻辑、内容密度规范
可分享支持 Vercel 一键部署(在线 URL)、Playwright PDF 导出

Phase H3:HTML 生成流程

第一步:读取必需文件

Read `html-kingdee-template.md` → HTML 结构 + SlidePresentation 类 + 动画触发
Read `html-kingdee-style.md`    → CSS 自定义属性 + 视口锁定 + 响应式断点
Read `html-kingdee-presets.md`  → 按需加载版式 CSS(只复制使用的版式)
If AI品牌logo标注存在 → 使用 lobe-icons CDN SVG

第二步:生成 HTML 文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{演示标题} | 金蝶</title>
  <style>
    /* 1. CSS 自定义属性(品牌色系) */
    /* 2. 视口锁定基础样式 */
    /* 3. 响应式断点 */
    /* 4. 动画与过渡 */
    /* 5. 卡片通用样式 */
    /* 6. 品牌色语义映射 */
    /* 7. 版式 CSS 类(按需加载) */
  </style>
</head>
<body>
  <div class="progress-bar"></div>
  <div class="nav-dots"></div>
  <!-- 幻灯片内容 -->
  <script>
    /* SlidePresentation 类 */
    /* Intersection Observer */
    /* 键盘/触摸/滚轮导航 */
  </script>
</body>
</html>

第三步:浏览器预览

写入 {主题}.html 文件
  ↓
本地 HTTP 服务预览(可选)
  ↓
用户确认 → 交付文件 / 部署 URL

HTML 版式类名对照表
PPTX 版式编号HTML CSS 类名结构示例
01 封面页.slide-cover<section class="slide slide-cover">
02 目录页.slide-toc<section class="slide slide-toc">
03 章节分隔.slide-section<section class="slide slide-section">
04 要点列表.slide-bullets<section class="slide slide-bullets">
05 数据卡片.slide-data-cards.data-card-grid + .data-card
11 数据看板.slide-dashboard.dashboard-grid + .dashboard-card
12 Bento Grid.slide-bento.bento-grid + .bento-main + .bento-card
19 金字塔.slide-pyramid.pyramid-wrapper + .pyramid-top/.middle/.bottom
20 PDCA.slide-pdca.pdca-grid + .pdca-cell + .color-plan/.do/.check/.act
21 SWOT.slide-swot.swot-grid + .swot-cell + .color-strength/.weakness/.opportunity/.threat
22 黄金圈.slide-golden.golden-wrapper + .golden-circles + .golden-explain
25 IPD五看.slide-ipd.ipd-grid + .ipd-card + .color-view-1/2/3/4/5
16 金句.slide-quote<section class="slide slide-quote">
28 悬浮统计.slide-floating-stats.floating-grid + .floating-stat

HTML 导航功能
操作触发方式
上一页← / ↑ / PageUp
下一页→ / ↓ / PageDown / Space
首页Home
结尾End
左滑(移动端)下一页
右滑(移动端)上一页
鼠标滚轮下一页/上一页(300ms 防抖)

HTML 内容密度规范(与 PPTX 一致)
幻灯片类型最大内容版面占比上限
标题页(封面)1 标题 + 1 副标题 + 元信息50%
内容页1 标题 + 4–6 要点70%
特征网格1 标题 + 最多 6 张卡片80%
数据看板3 个数字卡片75%
/* CSS 强制留白 */
.slide-content {
  padding: clamp(0.3rem, 1vw, 0.5rem);
}

.text-block {
  max-width: min(80vw, 800px);
}

HTML 图标使用(Emoji)

与 PPTX 版一致,使用 Microsoft YaHei 字体渲染 emoji:

<span class="icon">📊</span>  <!-- 数据看板 -->
<span class="icon">⚡</span>  <!-- 快速响应 -->
<span class="icon">🤖</span>  <!-- AI/智能体 -->
<span class="icon">🚀</span>  <!-- 起飞/增长 -->

HTML 分享与导出(可选)

本地预览

python3 -m http.server 8080 --directory .
# 或
npx serve .

Vercel 部署

vercel --prod
# 输出在线 URL,可分享给他人

PDF 导出(⚠️ 动画效果丢失)

# 使用 Playwright 以 1920×1080 分辨率截图并合并
node scripts/export-pdf.js {主题}.html output.pdf

常见情况处理(HTML 模式)
情况处理方式
用户说「HTML幻灯片」/「网页版PPT」/「交互式演示」自动选择 HTML 输出格式
用户说「传统PPT」/「PPTX文件」选择 PPTX 输出格式
用户明确指定输出格式按用户指定执行
用户说「不要动画」HTML 中移除 .animate-* 类,跳过动画触发
用户说「不要导航点」移除 .nav-dots 容器
用户说「可编辑」/「内联编辑」启用 contenteditable,⚠️ 导出前必须清除编辑状态
用户要求 PDF 导出警告动画丢失,使用 Playwright 截图合并
用户要求在线分享使用 Vercel CLI 部署,输出 URL
移动端预览响应式自动适配,触摸滑动导航生效
用户上传已有 .pptx 要求转 HTML先提取内容(Phase 4),再走 HTML 流程

HTML 编辑模式(v7.2 新增)

HTML 输出自带编辑功能:右上角开关 + 点击任意文字直接修改 + 一键保存导出。

编辑模式 UI
元素功能
右上角 Toggle Switch开启/关闭编辑模式
「保存 HTML」按钮清除编辑状态 + 导出干净 HTML 文件
「导出 PPTX」按钮提示运行 CLI 命令导出 PPTX
自动可编辑元素

以下元素开启编辑模式后自动支持 contenteditable:

元素类型CSS 选择器说明
标题h1, h2, h3, h4, h5, h6所有标题可编辑
正文p, li段落和列表项可编辑
卡片标题.card-title, .pillar-title, .step-title卡片标题可编辑
卡片描述.pillar-desc, .step-desc卡片描述可编辑
统计数字.stat-nb, .stat-label, .stat-note数据卡片内容可编辑
引用文字.callout-text金句内容可编辑

不可编辑元素:序号 .pillar-ic, .step-nb、logo、背景图、导航 UI

编辑模式操作流程
1. 打开 HTML 文件 → 右上角自动显示编辑工具栏
2. 点击 Toggle 开启编辑模式 → 所有文字元素出现蓝色虚线悬停框
3. 点击任意文字 → 进入编辑状态,出现蓝色实线边框
4. 修改内容 → 点击其他位置或 Tab 跳到下一元素
5. 点击「保存 HTML」→ 导出干净的 HTML 文件(无编辑 UI)
6. 如需 PPTX → 点击「导出 PPTX」查看 CLI 命令提示
导出时清除状态清单
状态清除方式
contenteditable 属性el.removeAttribute('contenteditable')
.editable-text classel.classList.remove('editable-text')
.edit-active classel.classList.remove('edit-active')
.edit-toolbar.hiddentoolbar.classList.add('hidden')
.nav-hint.shownavHint.classList.remove('show')
.nav-dot.activedot.classList.remove('active')

⚠️ CRITICAL: 不清除这些状态会导致导出的 HTML/PPTX 包含编辑 UI 和临时样式。

用户编辑后的处理
用户操作处理方式
用户说「编辑好了,保存」执行保存 HTML 流程
用户说「导出 PPTX」提示 CLI 命令,若已保存 HTML 则可直接运行
用户说「我改错了,恢复原内容」无法恢复,建议重新生成原始 HTML
用户编辑后要求调整版式需重新走 Phase H 生成流程,编辑内容不保留

Comments

Markdown supported