mcpField
K
kingdee-ppt

kingdee-ppt

github.com/waynezhonドキュメント5941 回インストール20 週間前に更新
リポジトリ

kingdee-ppt について

金蝶ブランドのHTMLスライドや編集可能なPPTXを作成するスキルです。HTMLを先に構築し、ClassicとBento Motionのスタイルを選べます。HTML上の文字編集に対応し、ClassicはPPTXへ出力できます。

主な機能

  1. 01インタラクティブなHTMLスライド作成
  2. 02ClassicとBento Motionのスタイル選択
  3. 03HTML上の文字編集と保存
  4. 04Classicの編集可能なPPTX出力
  5. 05内容に応じたレイアウト提案

活用シーン

  1. 01企業報告用のプレゼン作成
  2. 02製品発表や技術紹介の資料作成
  3. 03ブラウザーで発表するHTML資料の作成
  4. 04ClassicスライドのPPTX出力

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/kingdee-pptを入力して読み込まれたか確認します。

同梱ファイル

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

詳細

前文(最初に実行)

_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

出力に UPGRADE_AVAILABLE <old> <new> が表示された場合は、ユーザーに「kingdee-ppt v{new} が利用可能です(現在は v{old} を使用しています)。更新するには kingdee-ppt-upgrade を実行してください。」と伝えてください。ユーザーが明示的に確認しない限り、自動アップグレードは行わないでください。現在のワークフローを続行してください。

金蝶 PPT/HTML スライド生成スキル v7.2

金蝶グループ公式の2026年版 PPT テンプレートに基づき、HTML インタラクティブプレゼンテーションと編集可能な PPTX ファイルの2種類の出力に対応します。デフォルトでは、まず HTML デッキを構築し、ユーザーが選択した出力形式に応じて納品またはエクスポートします。公式の背景画像とロゴを内蔵しており、設定なしで使用できます。

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 ルール(紫のグラデーション/絵文字アイコン/Inter フォントを禁止) v6.0:HTML アトミックコンポーネントシステム — open-design を参考に、固定レイアウト番号を廃止し、コンポーネントとグリッドを自由に組み合わせる方式を採用 v5.0:HTML 出力モード → キーボード操作、タッチスワイプ、アニメーションに対応したインタラクティブなウェブスライド


HTML スタイルの選択(v7.1 で追加)

2つのスタイル体系:Classic(デフォルト)と Bento Motion(オプション)

項目Classic(デフォルト)Bento Motion(テクノロジー感)
背景アイスブルーの背景/グラデーションの表紙純白 #FFFFFF
グリッド12分割の比率システムBento Grid span(1/2/4列)
フォントサイズの対比タイトル 18-28pt/本文 16ptHero の数字 80-160pt/本文 14pt
アニメーションIntersection Observer によるフェードGSAP 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 デッキを作成し、必要に応じて編集可能な 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 コンテンツ特性のシグナルを識別

ページ/段落ごとに以下のシグナルを分析し、レイアウトを決定します:

コンテンツの特性対応するレイアウトシグナルとなるキーワード/構造
1つの中心的な結論+3つの論点ピラミッドレイアウト(19)「結論を先に述べる」、「3つの柱」、1+N の階層構造
4段階の循環構造PDCA レイアウト(20)計画/実行/確認/改善、Plan/Do/Check/Act
2×2のマトリクス比較SWOT レイアウト(21)強み/弱み/機会/脅威、内部・外部の比較
3層の入れ子構造ゴールデンサークルレイアウト(22)WHY/HOW/WHAT、中心的な使命→方法→製品
6つの要素を均等に配置5W1H レイアウト(23)Who/When/What/Where/Why/How のうち4項目以上
4段階の因果関係SCQA レイアウト(24)状況→複雑化→疑問→解決
5列のトレンド分析IPD の5つの視点レイアウト(25)業界を見る/顧客を見る/機会を見る/競合を見る/自社を見る
2~3個のデータ指標を表示データカード(05)パーセンテージ、成長率、数値比較
タイムライン/マイルストーンタイムライン(09)Q1→Q2→Q3→Q4、マイルストーン、段階的な進行
左右比較/プランの比較比較カラム(29)プランA vs プランB、長所・短所の比較
アイコン+要点のリストアイコン行(26)3~5個の要点。それぞれの要点に対応するアイコンがある
大きな数字+統計の表示フローティング統計(28)1つの大きな数字を強調、統計カードの組み合わせ
文字だけの要点が5項目以下要点リスト(04)特別な構造のないシンプルな要点リスト
アーキテクチャ図/階層関係アーキテクチャ図(13)階層構造、モジュール間の関係、技術アーキテクチャ
大きな画像1枚+少量のテキストハーフブリードオーバーレイ(27)画像を中心にし、画像上にテキストを重ねる
0.2 レイアウト選定の優先順位ルール
优先级1:思维模型信号明确 → 直接使用模型版式(置信度高)
优先级2:数据/图表信号 → 数据卡片、统计版式
优先级3:对比/时间结构 → 对比栏、时间轴
优先级4:纯要点列表 → 要点列表版式(兜底)

同一 PPT 内でのレイアウトの多様性に関するルール:

  • 隣接する3ページで同じレイアウトを使用しない
  • 文字だけの要点ページを3ページ以上連続させない
  • 各ページに少なくとも1つの視覚要素(アイコン、数字、色ブロック、画像)を含める
シナリオ → デフォルトの構成の優先傾向
シナリオ自動で含めるページ第一候補のレイアウトの組み合わせ
社内報告内容ページのみ要点リスト+データカード+タイムライン
パートナー支援表紙+内容+結びアーキテクチャ図+フローチャート+比較ページ
顧客カンファレンス全体構成(表紙/目次/章/内容/結び)データカード+画像とテキストの並列配置+章ページ+思考モデル
提案書表紙+目次+内容比較ページ+フローチャート+データカード+PDCA/SWOT

⚠️ シナリオごとの優先傾向はデフォルトの提案として扱い、ユーザーが構成を明確に指定した場合は、その指示に従ってください。

0.3 レイアウト提案の出力形式

アウトラインの作成段階で、各ページの推奨レイアウトと理由を出力します:

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

0.5 AI ブランドロゴの識別(lobe-icons による自動埋め込み)

Phase 0 のコンテンツ構造分析を完了した後、Phase 1 に進む前に、全文をスキャンして AI ブランド/プラットフォーム/モデルのキーワードを識別し、コンテンツスクリプトの作成段階で、該当するページにロゴの埋め込み指示を付けます。

⚠️ 対応表は 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>  
<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 生成流程,编辑内容不保留

コメント