yuanfang-html-ppt — HTML方案PPTX演示文稿生成

依赖

本 skill 依赖同仓库 yuanfang-design/ 共享设计库：

• yuanfang-design/base.css — token CSS 变量
• yuanfang-design/themes/*.css — 12 个主题

核心概念

一份 YAML，两个产出。 YAML 是唯一数据源，LLM 生成 → 用户可改 → 渲染出 PPTX + HTML：

用户输入 (URL/文本/需求)
    ↓  LLM 理解 + 编排
content.yaml   ← 可人工编辑（注释说明每个字段）
    ↓  渲染 (render-html-pptx.js)
deck.pptx  +  deck.html（保留用于调试）

YAML 优先的原因：

• 人类可直接编辑，支持注释
• LLM 生成 YAML 比 JSON 更稳定（少括号/引号错误）
• LLM 读 YAML 修改时保留原有注释结构
• load-content.js 自动识别 .yaml / .yml / .json

工作流 (Step 0–4)

Step 0: 提取品牌资产 (URL → logo + 主题色)

agent 用 web fetch 读页面，自动提取：

文本输入则跳过。提取结果只是建议，不是终值。

[等待用户确认后才能进 Step 1]

Step 1: 提取内容 — 生成 content.yaml

agent 根据 URL/文本内容，自主编排成多页 PPT，输出 content.yaml：

按内容类型选择策略

生成的 content.yaml 示例（带注释）

# AICS 智能客服平台 — 路演 PPT
brand: AICS
theme: tech-modern          # 12 主题之一，可选
title: "AICS — 智能客服平台"
author: AICS Team

slides:
  # ── 封面 ──
  - layout: cover
    kicker: "KEYNOTE · 2026"
    title: "AICS — \x3Cspan class=\"gradient-text\">智能客服平台\x3C/span>"
    subtitle: "基于 RAG 知识库与大语言模型的企业级智能客服系统"
    tags: ["3 分钟上线", "双 LLM 自动容灾"]
    logo: "data:image/svg+xml,..."   # SVG/PNG data URL 或图片路径
    footer: "AICS · 智能客服平台"

  # ── 目录 ──
  - layout: toc
    kicker: "目录"
    title: "今天讲的三件事"
    items:
      - title: "市场洞察"
        desc: "为什么企业需要智能客服"
      - title: "核心能力"
        desc: "RAG 知识库 · 多渠道 · AI Agent"
      - title: "产品路线图"
        desc: "2026 年规划与愿景"

  # ── 关键数据 ──
  - layout: stat
    kicker: "Traction · 关键数字"
    stats:
      - value: "3 min"
        label: "上线时间"
        context: "注册即用，无需部署"
      - value: "99.9%"
        label: "系统可用性"
        context: "双 LLM 自动容灾"
    caption: "从 0 到 1，智能客服 3 分钟起步"
    footer: "AICS"

  # ── 内容页 ──
  - layout: content
    title: "什么是 AICS"
    body: "\x3Cp>AICS 是一款基于 \x3Cstrong>RAG 知识库\x3C/strong> 和 \x3Cstrong>大语言模型\x3C/strong> 的智能客服平台\x3C/p>"
    footer: "AICS"

  # ── 三栏特性 ──
  - layout: three-column
    kicker: "三大核心能力"
    title: "AICS 的核心"
    lede: "RAG + LLM + 多渠道，三位一体。"
    items:
      - icon: "📚"
        title: "RAG 知识库"
        desc: "草稿/发布双版本管理，智能分段，自动更新"
      - icon: "🌐"
        title: "多渠道接入"
        desc: "网页 Widget、API、第三方平台全覆盖"
      - icon: "🤖"
        title: "AI Agent 技能"
        desc: "自定义技能编排，双 LLM 引擎自动容灾"

  # ── 对比 ──
  - layout: comparison
    kicker: "Before vs After"
    title: "AICS vs 传统客服方案"
    leftLabel: "传统客服"
    rightLabel: "AICS"
    items:
      - left: "部署周期数周"
        right: "3 分钟上线"
      - left: "单点故障风险"
        right: "双 LLM 自动容灾"
      - left: "知识库手动维护"
        right: "草稿/发布双版本自动更新"

  # ── 流程 ──
  - layout: process
    kicker: "How-to"
    title: "3 分钟上线 AICS"
    lede: "三步走，从注册到上线。"
    steps:
      - title: "注册账号"
        desc: "访问 aics.financialagent.cc"
        tag: "~1 min"
      - title: "导入知识库"
        desc: "上传文档，AI 自动分段"
        tag: "~1 min"
      - title: "嵌入网站"
        desc: "复制一行代码到网站"
        tag: "~1 min"

  # ── 时间线 ──
  - layout: timeline
    kicker: "Roadmap"
    title: "AICS 产品路线图"
    items:
      - year: "2026 Q1"
        title: "MVP 上线"
        desc: "RAG 知识库 + 网页 Widget"
      - year: "2026 Q2"
        title: "多渠道扩展"
        desc: "API / 第三方平台接入"
      - year: "2026 Q3"
        title: "AI Agent 技能"
        desc: "自定义技能编排"
      - year: "2026 Q4"
        title: "企业级功能"
        desc: "团队协作 + SSO"

  # ── 结尾 ──
  - layout: thanks
    subtitle: "开始使用 AICS"
    points: ["aics.financialagent.cc", "2026 · AICS"]

[等待用户确认/修改后才能进 Step 2]

Step 2: 询问样式

第一轮 (必答) — 主题

抓到了品牌色 → 推荐色调最接近的 2–3 个。没抓到 → 默认 minimal-white。

第二轮 (必答) — logo + 品牌色

抓到就问"用这个/换 URL/不要"，没抓到就问"要加吗"。品牌色同理。

第三轮 (可选)

页脚（默认品牌名 + 页码）、页数范围。

[每轮等待用户回答后才能继续]

Step 3: 渲染

node yuanfang-html-ppt/scripts/render-html-pptx.js \
  --file content.yaml \
  --theme tech-modern \
  --brand-color "#4F46E5" \
  --output deck.pptx

每次渲染同步产出 HTML 文件：deck.html 与 deck.pptx 同目录，用于调试和对比。

渲染前 agent 自动验证 YAML 语法（用 JS-YAML parse），有错误提示用户修正。

[等待用户确认渲染结果]

Step 4: 修改内容

用户说"改" → agent 直接修改 content.yaml 的对应字段 → 重新渲染，无需走完整流程：

修改流程：

content.yaml
    ↓  agent 读取
    ↓  agent 定位修改位置 + 修改
    ↓  写回 content.yaml（保留注释）
    ↓  agent 验证 YAML 语法（js-yaml.load）
    ↓  语法错误 → 提示用户修复 / 语法正确 → 渲染
    ↓
deck.pptx + deck.html（保留，用于调试）

用户也可以直接在自己的编辑器里改 YAML（有注释说明每个字段），改完说"重新渲染"即可。

[等待用户确认/继续修改]

14 种布局

已知限制

• PPTX 字体 = 系统已安装字体的解析结果。可通过 post-processing 替换
• dom-to-pptx box-shadow 渲染为 PPTX 约缩小 4x
• 暂无 PPTX 母版视图 (slide master)
• 图表（原生 PPTX chart 对象）不支持。可用 CSS/div 模拟视觉图表

文件结构

yuanfang-html-ppt/
├── SKILL.md                      # 本文件
└── scripts/
    └── render-html-pptx.js       # 核心渲染引擎 (HTML→dom-to-pptx)