用 Codex + Huashu Design Skill，15 分钟做出设计师级别的演示文稿（PPT）

用户170854288885
0 阅读9分钟

告别「找模板半小时，改一页一小时」的痛苦。本文带你用 OpenAI Codex CLI 配合 GitHub 上 7200+ Star 的 Huashu Design Skill，从一句自然语言描述开始，快速生成专业级 HTML 演示文稿，并一键导出为可编辑 PPTX 或高清 PDF。

前言：为什么 AI 做 PPT 比「找模板」强太多？

做 PPT 是程序员和产品经理最头疼的杂活之一。传统流程：

  1. 花 30 分钟翻模板网站，找不到满意的
  2. 凑合选一个，开始往里塞内容
  3. 对齐、间距、配色反复微调……
  4. 改一页文案，所有关联页要同步修改
  5. 一份 15 页的 deck，4-8 小时没了

而如果你用 AI + Huashu Design 的方式，同样的工作量只需要 15 分钟。

Huashu Design 是 GitHub 上一个开源的 AI 设计 Skill（地址：alchaincyf/huashu-design，⭐ 7245），专门为 AI Agent（如 Codex、Claude Code 等）提供专业的视觉设计能力。它覆盖了：

  • HTML 幻灯片 — 每页独立 HTML，浏览器直接演示，键盘翻页
  • HTML → PDF 导出 — 一行命令出矢量 PDF
  • HTML → 可编辑 PPTX 导出 — 出来的 PPT 文字可直接双击编辑
  • 交互原型、App UI、动画 — 远不止 PPT

本文重点讲 Codex + Huashu Design 做 PPT 的完整工作流，所有代码和截图均为实际操作所得。

一、环境准备

1.1 安装 OpenAI Codex CLI

如果你还没有安装 Codex CLI：

npm install -g @openai/codex

配置 API Key：

export OPENAI_API_KEY="your-key-here"

1.2 克隆 Huashu Design Skill

# 克隆到 Codex skills 目录
cd ~/.codex
git clone https://github.com/alchaincyf/huashu-design.git skills/huashu-design

克隆完成后，目录结构如下：

~/.codex/skills/huashu-design/
├── SKILL.md              # 核心规范文档（800+ 行设计指南）
├── README.md             # 项目说明
├── assets/               # 可复用组件
│   ├── deck_index.html   # 幻灯片聚合器（键盘翻页 + 全屏演讲）
│   ├── deck_stage.js     # 单文件幻灯片 Web Component
│   ├── ios_frame.jsx     # iOS 手机边框
│   ├── animations.jsx    # 动画引擎
│   └── sfx/              # 音效资源
├── references/           # 详细参考文档
│   ├── slide-decks.md    # 幻灯片制作规范（726 行）
│   └── editable-pptx.md  # PPTX 导出硬约束（301 行）
├── scripts/              # 导出脚本
│   ├── export_deck_pdf.mjs       # HTML → PDF
│   ├── export_deck_pptx.mjs      # HTML → 可编辑 PPTX
│   └── html2pptx.js              # DOM 逐元素翻译器
└── test-prompts.json     # 测试用例（6 个典型场景）

关键文件说明：

  • SKILL.md 是整个 Skill 的核心，AI Agent 会读取它来了解设计规范
  • references/slide-decks.md 是幻灯片的详细制作指南，包含架构选型、设计模式、踩坑总结
  • scripts/export_deck_pptx.mjs 是导出 PPTX 的脚本，依赖 pptxgenjs 和 playwright

二、用 Codex 生成幻灯片

2.1 启动 Codex 并描述需求

在终端中进入你的项目目录，启动 Codex：

cd ~/my-presentation
codex

然后在 Codex 的交互界面中，用自然语言描述你的需求：

请使用 huashu-design skill，帮我做一份 5 页的产品 pitch deck，
主题是一个 AI 编程助手的创业项目。
要求：深色封面 + 白底内容页，配色现代简约。
最终需要导出为可编辑的 PPTX。

Codex 会自动：

  1. 读取 SKILL.md 和相关参考文档
  2. 先和你确认设计方向（这是 Huashu Design 的核心流程 —— "Junior Designer 先汇报再做"）
  3. 确认后开始逐页生成 HTML

2.2 Huashu Design 的设计确认流程

Huashu Design 的一大亮点是它的 "先确认再动手" 流程。Codex 不会上来就写代码，而是先输出一份设计系统方案给你确认：

📋 设计系统提案

Deck 系统：
- 背景色：深色（#1A1A2E）封面 + 浅色（#FAFAF8）内容页
- 字体：标题 Noto Serif SC 900 / 正文 Geist Sans
- 节奏：封面 → 目录 → 问题 → 方案 → 数据 → CTA
- 主色：#E94560（珊瑚红）
- 辅色：#FF8C42（暖橙）

需要确认吗？确认后我开始做 2 页 showcase。

确认后，Codex 会先做 2 页 showcase（封面 + 一个内容页），让你预览方向是否正确。这个流程避免了"做完 15 页发现方向不对"的灾难。

2.3 查看生成结果

Codex 生成的幻灯片是标准 HTML 文件，直接在浏览器打开就能看：

my-presentation/
├── slides/
│   ├── 01-cover.html
│   ├── 02-agenda.html
│   ├── 03-problem.html
│   ├── 04-solution.html
│   ├── 05-cta.html
│   └── ...
├── shared/
│   └── tokens.css          # 共享设计变量
└── index.html              # 聚合演示版（键盘翻页）

每张幻灯片都是独立的 1920×1080 HTML 文件，双击即可在浏览器中预览。index.html 是聚合版本，支持键盘左右箭头翻页、全屏演讲模式。

三、实际效果演示

为了验证 Huashu Design 的实际效果，我按照它的设计规范，手动创建了 3 页示例幻灯片。以下为 Playwright 在 WSL Ubuntu 环境下的截图（安装了 WenQuanYi Zen Hei 中文字体）。

3.1 封面页

深色背景（#1A1A2E）+ 大字标题 + 品牌主色（#E94560）强调关键词 + 顶部渐变色条 + 简洁的 badge 标签。整体风格克制、专业，无渐变装饰、无 emoji。

效果截图：

01-cover.png [封面页效果 - 深色背景 + 大字标题 + 品牌色强调]

对应 HTML 核心结构：

<body>
  <div class="badge">Codex + Huashu Design Skill</div>
  <h1>用 AI 做出<br><span style="color:#E94560">设计师级别</span>的演示文稿</h1>
  <p class="subtitle">从自然语言到精美 PPT 的完整工作流</p>
  <div class="meta">
    <span>2026.04</span>
    <span>Hermes Agent 实战教程</span>
  </div>
</body>

3.2 工作流页 — 三步从零到精美 PPT

三列卡片布局，每列对应一个步骤（安装 Skill → 描述需求 → 生成导出），底部附带命令行提示。使用 shared/tokens.css 中的 CSS 变量保持视觉一致性：顶部渐变色条、统一的圆角卡片、品牌主色的标签文字。

效果截图：

02-workflow.png

3.3 对比页 — 传统 PPT vs AI 驱动

左右分栏对比，左侧"传统方式"用浅灰底色 + 红色叉号，右侧"AI + Huashu Design"用深色底 + 绿色对勾。底部用大号数据（4-8h vs 15min）形成视觉冲击。这种对比设计非常适合作 pitch deck 中的"痛点 vs 解决方案"页。

效果截图：

03-comparison.png [对比页 - 传统方式 vs AI 驱动]

以上 3 页仅用了纯 HTML + CSS，没有依赖任何 JS 框架。代码总量不到 200 行，但视觉效果已经接近专业设计师的水平。如果用 Codex 配合 Huashu Design Skill，这些页面可以通过一句 prompt 自动生成。

四、核心设计规范详解

Huashu Design 之所以能做出"设计师级别"的效果，是因为它的 SKILL.md 和参考文档中包含了大量经过实战验证的设计规范。

4.1 架构选择：多文件 vs 单文件

维度单文件 + deck_stage.js多文件 + deck_index.html
CSS 作用域❌ 全局，样式可能互相污染✅ 天然隔离，各页独立
验证粒度❌ 需 JS 跳页才能看某页✅ 双击 HTML 文件直接看
并行开发❌ 多 Agent 改一个文件会冲突✅ 不同页可并行制作
调试难度❌ 一处 CSS 出错全翻车✅ 一页出错只影响自己

推荐：10 页以上走多文件架构。Huashu Design 默认也是多文件。

4.2 页面设计 Grammar 模板

Huashu Design 推荐每页遵循统一的结构：

┌─ masthead（顶部品牌条）────────────┐
│  [logo] · 产品名称        日期 · URL │
├──────────────────────────────────────┤
│  ── kicker（主色短横 + 大写标签）    │
│  CHAPTER XX · SECTION NAME           │
│                                      │
│  H1（衬线体 900）                    │
│  重点词单独上品牌主色                │
│                                      │
│  [具体内容区域]                       │
│                                      │
├──────────────────────────────────────┤
│ section name                  X / N  │
└──────────────────────────────────────┘

4.3 反 AI Slop 清单

Huashu Design 明确禁止以下"AI 味"设计元素，这也是它能做出专业效果的关键：

  • ❌ 紫色渐变（"AI 紫"）
  • ❌ Emoji 作为视觉元素
  • ❌ Inter / Roboto 字体（被 AI 用烂了）
  • ❌ 发光效果 / glow
  • ❌ 装饰性图标堆砌
  • ✅ 用具体品牌色、衬线标题体、克制留白

五、导出为 PPTX

5.1 安装依赖

cd my-presentation
npm install pptxgenjs playwright sharp
npx playwright install chromium

5.2 运行导出脚本

# 复制导出脚本到项目目录
cp ~/.codex/skills/huashu-design/scripts/export_deck_pptx.mjs .
cp ~/.codex/skills/huashu-design/scripts/html2pptx.js .

# 导出
node export_deck_pptx.mjs --slides slides --out deck.pptx

输出：

Converting 5 slides via html2pptx...
  [1/5] 01-cover.html ✓
  [2/5] 02-agenda.html ✓
  [3/5] 03-problem.html ✓
  [4/5] 04-solution.html ✓
  [5/5] 05-cta.html ✓

✓ Wrote /path/to/deck.pptx (5/5 slides, 可编辑 PPTX)

5.3 PPTX 导出的 4 条硬约束

如果你的最终交付物是可编辑 PPTX（同事需要在 PowerPoint 里改文字），HTML 必须从一开始就遵循这 4 条约束：

规则说明示例
文字必须包在 <p> / <h1>-<h6> 里div 里不能直接放裸文字<div><h1>标题</h1></div> ✅
不支持 CSS 渐变只能用纯色background: #E94560 ✅
背景/边框只能在 <div> 上<p> 标签不能有 background外层 div 承载背景，p 只写文字 ✅
div 不能用 background-image用 <img> 标签<img src="chart.png"> ✅

重要：如果你不需要可编辑 PPTX（只需要 PDF 或 HTML 演示），则不受这 4 条约束限制，视觉自由度更高。

如果只想导出 PDF：

cp ~/.codex/skills/huashu-design/scripts/export_deck_pdf.mjs .
node export_deck_pdf.mjs --slides slides --out deck.pdf

六、进阶技巧

6.1 并行生成多页幻灯片

Huashu Design 的多文件架构天然支持并行开发。你可以同时启动多个 Codex 实例，每个负责不同的页面：

# Terminal 1
codex "按照 shared/tokens.css 的设计规范，生成 slides/01-cover.html 封面页"

# Terminal 2（同时）
codex "按照 shared/tokens.css 的设计规范，生成 slides/02-agenda.html 目录页"

# Terminal 3（同时）
codex "按照 shared/tokens.css 的设计规范，生成 slides/03-problem.html 问题陈述页"

由于每页是独立 HTML 文件，merge 时零冲突。

6.2 Showcase 先行，避免返工

这是 Huashu Design 最核心的实战经验：只要 deck 超过 5 页，绝对不要一页一页从头写到尾。

正确顺序：

  1. 先做 2 页 showcase（选视觉差异最大的两种页面类型）
  2. 截图让用户确认设计方向
  3. 方向通过了再批量推剩下 N-2 页
  4. 全部完成后统一合成聚合版 + 导出

💡 真实案例：一次 13 页的 brochure 项目，直接写到底后发现方向不对，返工 13 页。改用 showcase 流程后，方向错只返工 2 页。

6.3 交互式幻灯片

Huashu Design 还支持在幻灯片中嵌入交互元素（Web Component <deck-stage>），适合做 demo 演示：

<deck-stage>
  <section>幻灯片 1</section>
  <section>幻灯片 2</section>
</deck-stage>
<script src="deck_stage.js"></script>

deck_stage.js 提供键盘导航、全屏模式、计数器等演讲级功能。

七、总结

对比项传统 PPTAI + Huashu Design
制作时间4-8 小时15 分钟
设计质量取决于个人审美专业设计规范
修改成本改一页同步多处改 prompt 全局更新
输出格式仅 PPTXHTML + PDF + PPTX
可编辑性原生PPTX 文字可编辑
协作方式单人手动多 Agent 并行

Huashu Design 的本质是把专业设计师的经验编码成 AI 可读的规范文档，让 AI Agent（Codex、Claude Code 等）按照这些规范来生成视觉作品。它不是又一个"AI PPT 生成器"，而是一个设计方法论 + 工具链。

如果你对其他类型的设计（App 原型、动画、信息图等）感兴趣，Huashu Design 同样支持 —— 它的能力远不止 PPT。

相关资源

🏷️ 本文标签：AI工具 PPT制作 Codex 前端设计 效率提升

avatar
文章
阅读
粉丝