guizang-ppt-skill 技术指南：用编码 Agent 在 OpenDesign 中打造杂志级 HTML 幻灯片

2026-09-04 16:17:32作者：申梦珏Efrain

🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.

项目地址：https://gitcode.com/gh_mirrors/opend/open-design

本文以 OpenDesign 仓库中的博客文章 guizang-ppt-skill: Editorial HTML Decks with a Coding Agent 为主线，结合仓库内实际收录的 guizang-ppt 模板与 deck-guizang-editorial 技能源码级证据，讲清这个技能是什么、它的"电子杂志 × 电子墨水"美学如何落地、完整的安装与驱动流程、使用前的许可与产物格式注意事项，以及它与 OpenDesign 生态中其他 PPT 技能的分工。读完后，你应能独立安装并驱动 guizang-ppt-skill 生成幻灯片，从 5 套预设主题中正确选型，并理解这套 guizang 风格模板在 OpenDesign 插件体系中的位置。

1. guizang-ppt-skill 是什么：一个把"品味"写进规则的技能

先明确"技能（skill）"这个概念：它是一套打包好的指令与素材，编码 Agent（Claude Code、Codex、Cursor 等）会在任务进行途中加载它，去完成某件具体的事。guizang-ppt-skill 教会你的 Agent 生成演示文稿：你用大白话描述这套幻灯片，Agent 套用技能里的版式系统和设计规则，然后把一套 HTML 幻灯片交还给你。据该博客文章（发布于 2026-07-10）的描述，这个技能出自 AI 创作者 Guizang（op7418），彼时在 GitHub 上已有约 2.08 万星标。

真正让它从同类中脱颖而出的不是机制——而是烙进那些规则里的品味。它的产物倚重杂志式编排和克制的排版，所以幻灯片看上去像有位设计师坐下来打磨过，而不是像填了一张表单。

仓库中收录的上游模板镜像 design-templates/guizang-ppt/SKILL.md 对产物形态给出了最具体的定义：

生成单文件 HTML 的横向翻页 Deck（horizontal-swipe deck）；
视觉基调是"电子杂志 + 电子墨水"混合风格，官方形容为"把代码缝进 Monocle 杂志上"；
WebGL 流体 / 等高线 / 弥散背景（只在 hero 页显现，正文页几乎不可见）；
三层字体系统：衬线标题（Noto Serif SC + Playfair Display）、无衬线正文（Noto Sans SC + Inter）、等宽元数据（IBM Plex Mono）；
Lucide 线性图标（明确不用 emoji）；
横向翻页导航：键盘 ← →、滚轮、触摸滑动、底部圆点、ESC 打开索引；
平滑主题插值：翻到 hero 页时颜色与 shader 会柔和过渡。

适用与不适用场景

同一份 SKILL.md 明确划定了边界：

适合：线下演讲、行业内部分享、私享会；AI 新品发布 / demo day；个人风格强烈的演讲；"做一次、不需要翻页工具"的网页版幻灯片。
不适合：大段表格数据与堆叠图表（用常规 PPT）；培训课程课件（信息密度太低）；多人协同编辑（产物是静态 HTML）。

2. 编辑 / 瑞士网格美学：两条审美方向如何被具体化

博客文章把 guizang 的美学归纳为两个方向：

杂志式 / 编辑版式——一篇纸质特稿般的编排：自信的层级、慷慨的留白、有分量的封面、抽拉引文，以及为"阅读"而非"扫读"而排的正文。幻灯片像跨页版面，而不是要点堆砌。
瑞士网格排版——真正做到位的国际主义排版风格：一套真实的网格、精确的对齐、克制的字体，以及承载意义而非装饰的版面。这正是那种一眼就读得出"有人在这里做了设计决策"的观感。

实际的结果是，一套 guizang 幻灯片经得起第二眼：模板驱动的幻灯片看着还行，直到你把它和一件真正被编排过的作品放在一起比较；guizang 想做的正是那件被编排过的。

在仓库源码中，这种美学被落实为一组可执行的核心设计原则（design-templates/guizang-ppt/SKILL.md，作者注明这些原则提炼自"一人公司"演讲 Deck 的 5 轮迭代）：

克制优于炫技：WebGL 背景只在 hero 页透出，普通页几乎不可见；
结构优于装饰：不用阴影、浮动卡片、填充盒，信息层级完全靠大字号 + 字体对比 + 网格留白；
内容层级由字号与字体共同定义：最大衬线 = 主标题，中号衬线 = 副标题，大号无衬线 = 导语，小号无衬线 = 正文，等宽 = 元数据；
图像是一等公民：图片只从底部裁切，顶部与两侧保持完整；网格用固定 height:Nvh，不用 aspect-ratio 拉伸；
节奏依靠 hero 页：hero 与非 hero 交替，眼睛不会累；
术语一致：Skills 就是 Skills，不混用中英翻译。

仓库里的姊妹技能 skills/deck-guizang-editorial/SKILL.md 把这套美学进一步压缩成了硬约束清单：严禁渐变 / drop-shadow / 圆角 / 圆形装饰 / blur / SVG 图标库 / emoji 装饰；kicker 用 11px 大写、字距 0.12em；右下角 folio 页码（如 01 / 12）；顶部细 hairline rule + 期刊 logo / 话题。视觉锚点参考了 Monocle 杂志版式、YC 主席 Garry Tan 的 "Thin Harness, Fat Skills" 演示，以及 Guizang 本人的线下演讲 Deck 系列（SKILL.md "Reference works" 一节）。

3. 使用流程：从三步速览到六步内部工作流

3.1 三步速览（原文核心流程）

流程与任何编码 Agent 技能一样：

安装技能——把 guizang-ppt-skill 克隆或添加到 Agent 的技能目录（仓库里有安装步骤），自备模型 key；
给幻灯片提示词——描述主题、受众、语气和大致页数。简报越具体，编排越好；
迭代——用大白话要求修改（"把开头收紧一点"、"把第 4 页做成数据宣言"、"把瑞士网格再推得狠一点"），然后反复重渲染，直到这套幻灯片落地。

3.2 安装方式

仓库收录的 README.md 给出两种安装方式：

方式一（推荐）：把安装指令直接粘贴给 AI——让 Claude Code / Cursor 等具备 shell 访问能力的 Agent 执行 git clone <上游仓库> ~/.claude/skills/magazine-web-ppt，并验证目录下出现 SKILL.md、assets/、references/；
方式二：手动 CLI——执行同一条 git clone 命令到 ~/.claude/skills/magazine-web-ppt。

安装后 Claude Code 会自动发现该技能，触发短语包括："Make me a magazine-style deck"、"Generate a horizontal swipe deck"、"Editorial magazine style presentation" 等。

3.3 技能内部的六步工作流

安装之后，Agent 实际走的是 SKILL.md 定义的六步流程，值得逐一看清：

Step 0 · 推断方向：从简报中推断 5 种杂志方向之一——Monocle Editorial（默认）、WIRED Tech、Kinfolk Slow、Domus Architectural、Lab / Reference。每个方向打包了主题色、推荐版式、chrome 风格与页数范围。只有用户明确要求对比时才打开 references/styles.md 呈现方向选项卡；用户说"你推荐"时默认走 Monocle Editorial（失败概率最低）。选定后写入 项目记录.md，且中途不得换方向——切换等于前功尽弃。
Step 1 · 澄清意图：6 问清单（受众与场景、演讲时长、源材料、图片素材、硬性约束；主题色已在 Step 0 定下）。页数经验值为 15 分钟 ≈ 10 页、30 分钟 ≈ 20 页、45 分钟 ≈ 25–30 页。没有大纲时按"叙事弧"模板搭骨架：Hook（1 页）→ Context（1–2 页）→ Core（3–5 页）→ Shift（1 页）→ Takeaway（1–2 页）。图片素材有明确约定：放在 项目/XXX/ppt/images/，命名 {页码}-{语义}.{ext}（如 01-cover.jpg），宽 ≥ 1600px、JPG 用于照片 / PNG 用于透明元素、总体积 < 10MB，替换时同名覆盖最稳定。
Step 2 · 复制模板：把 assets/template.html 复制到目标位置（通常为 项目/XXX/ppt/index.html）。该模板是完整可运行文件——CSS、WebGL shader、翻页 JS、字体 / 图标 CDN 全部预置，<main id="deck"> 内只有 3 张示例页。复制后第一件事是 grep [必填] 占位符确认全部替换，并从中选一个主题色（见第 4 节）。
Step 3 · 填充内容：这是全部生成问题的源头，SKILL.md 把它拆成三道关卡——类名预检（template.html 的 <style> 是类名单一事实来源，h-hero / stat-card / pipeline / grid-2-7-5 等缺失会导致整页样式崩塌）、主题节奏规划（见下文 3.4）、挑选 10 个现成版式之一（不从头写幻灯片，粘贴后改文案与图片路径）。
Step 4 · 对照清单自检：逐项核对 references/checklist.md（汇总了真实迭代中踩过的所有坑），P0 级问题（emoji、图片溢出、标题换行、字体分工）必须全部通过。
Step 5 · 本地预览：直接用浏览器打开 index.html，无需本地服务器。
Step 6 · 迭代：模板 CSS 高度参数化，90% 的调整是改内联样式（font-size:Xvw / height:Yvh / gap:Zvh）。

3.4 主题节奏的强制规则

在选版式之前，必须先为每一页规划主题类（hero dark / hero light / light / dark）并写成对照表（SKILL.md Step 3.0.5）：

每个页 section 必须带 light / dark / hero light / hero dark 之一，不允许只写 hero；
连续 3 页以上同主题 = 视觉疲劳，不允许；
8 页以上的 Deck 必须有 ≥1 个 hero dark + ≥1 个 hero light；
全 Deck 不能只有 light 正文页，必须有 dark 正文页制造呼吸感；
每 3–4 页插入 1 个 hero 页（封面 / 章节分隔 / 问题页 / 大引文）。

生成后的自查命令：grep 'class="slide' index.html 列出全部主题，人工确认节奏合理后再交付。

4. 五套主题预设："不允许自定义色"的美学纪律

博客文章强调 guizang 是"瑞士网格排版"——这种克制同样体现在配色上。技能只允许从 5 套精心调校的预设中选一个，不接受用户自定义的 hex 值：错误的配色会瞬间毁掉整体观感，保护美学优先于给自由（SKILL.md Step 2.2）。

#	主题	最佳适用
1	Ink Classic（墨水经典）	通用 / 商业发布 / 拿不准时的默认
2	Indigo Porcelain（靛蓝瓷）	科技 / 研究 / 数据 / 技术主题演讲
3	Forest Ink（森林墨）	自然 / 可持续 / 文化 / 非虚构
4	Kraft Paper（牛皮纸）	怀旧 / 人文 / 文学 / 独立杂志
5	Dune（沙丘）	艺术 / 设计 / 创意 / 画廊

具体实现上，切换主题只需整体替换 template.html 开头 :root{} 中标记为"theme color"的 6 个 CSS 变量：--ink / --ink-rgb / --paper / --paper-rgb / --paper-tint / --ink-tint，其余 CSS 全部经 var(--...) 流式生效。references/themes.md 中每套主题都给出了完整色值，例如 Ink Classic：

--ink:#0a0a0b;
--ink-rgb:10,10,11;
--paper:#f1efea;
--paper-rgb:241,239,234;
--paper-tint:#e8e5de;
--ink-tint:#18181a;

配套三条硬规则：一个 Deck 只用一个主题，中途不换色；不接受任意 hex 值（温和拒绝并展示 5 套预设）；不混搭（例如取 Ink Classic 的 ink 配 Dune 的 paper 会完全撞车）。

5. 十个版面骨架与图片比例规则

references/layouts.md 提供 10 个可直接粘贴的 <section> 版式骨架，skills/deck-guizang-editorial/SKILL.md 将其编号为 L01–L10：

版式	用途
L01 Cover（Hero Cover）	第 1 页封面：居中大字 hero typography + kicker + 副标题 + 导语 + 底部元数据
L02 Act Divider	每幕开场：kicker + 8.5–10vw 巨大 headline + 一句引言，章节切换可反色
L03 Big Numbers	抛出硬数据：3×2 数据卡（label / 大数字 / 注释）
L04 Quote + Image	身份对比 / 故事：左 kicker + headline + body + callout，右 16:10 图（基线对齐）
L05 Image Grid	多图对比 / 截图证据：3×2 或 3×1 等高图网格（26vh 或 22vh），严格统一高度
L06 Pipeline / Flow	工作流程：横向编号步骤组，每步 №X + 标题 + 描述，支持键盘逐步推进
L07 Hero Question	幕收 / 收尾：7vw 全屏单一问句，按语义断行，周围极简
L08 Big Quote	衬线金句 / takeaway：5.8vw 巨大衬线引文 + 英文翻译 + 署名 + 日期
L09 Before / After	旧模式 vs 新模式：1:1 分栏，左列 opacity .55，右列全亮
L10 Mixed Media	信息密集图文页：8:4 比例，左大段文字 + 右 3:4 竖图作辅助

图片比例有强制规范（SKILL.md Step 3.2）：永远用标准比例，不抄源图的怪异比例（如 2592/1798）——主图 16:10 或 4:3 配 max-height:56vh，图网格固定 height:26vh（不用 aspect-ratio），小图 1:1 或 3:2，全屏 hero 图 16:9 配 max-height:64vh。并且绝不用 align-self:end 摆图片：它会滑到单元格底部被浏览器工具栏遮住，应使用 grid 容器 + align-items:start 让图片贴顶。

自检清单（references/checklist.md）的 P0 级条目中最常被踩中的包括：大标题必须是衬线（显示为无衬线时 99% 是类名预检没做、h-hero 缺失）；图网格只用 height:Nvh；图片不许堆在页面底部；中文大标题 ≤ 5 个字并 nowrap（避免一字一行）；图标用 Lucide 不用 emoji。

6. 诚实提醒：许可证与产物格式

在你基于 guizang-ppt-skill 做东西之前，有两件事要知道：

许可证（博客原文表述为 AGPL-3.0）。用于个人幻灯片、内部使用和开源项目都没问题——但一旦你打算把这个技能（或它的衍生物）嵌进闭源产品里，copyleft 条款就变得要紧。请对照你的使用场景去读许可证，而不是想当然地以为它像 MIT 那样宽松。
- 一个值得留意的细节：本仓库收录的模板镜像 design-templates/guizang-ppt/LICENSE 携带的是 MIT 许可文本（© 2026 op7418），其 README.md 也标注 "MIT © 2026 op7418"。也就是说，不同来源、不同时点的副本许可证可能不一致——以你实际使用的那份副本的 LICENSE 文件为准。
HTML 产物。这套幻灯片以 HTML 的形式产出。如果你想在浏览器里演示并保留完整的 CSS 控制力，这是优势；如果你的硬性要求是一份能被非开发者在 PowerPoint 里重新打开、原生可编辑的 .pptx，这就是限制。想清楚你真正需要哪一种。

7. guizang 与其他 Claude PPT 技能的比较

没有唯一的赢家——取决于你想要的观感，以及你能接受的许可证。博客原文给出的对照表如下（站内链接已转换为本仓库路径）：

技能	产物	许可证	最适合
guizang-ppt-skill	HTML（杂志式）	AGPL-3.0	精心打磨、有设计感的幻灯片
frontend-slides	HTML 网页幻灯片	MIT	web 原生幻灯片、完整 CSS 控制
dashiAI-ppt-skill	可编辑演示文稿	AGPL-3.0	非开发者也能改的产物
OpenDesign	提示词 → 经你的 Agent 生成可编辑幻灯片	Apache-2.0	符合品牌、归你所有、更大工作空间的一部分

选择逻辑：如果这套幻灯片的设计是最要紧的事，选 guizang；如果想要最宽松的许可证和 web 原生幻灯片，选 frontend-slides；如果交付物必须让不碰代码的人也能继续编辑，选 dashiAI；而如果这套幻灯片需要符合品牌、并且和你其余的设计工作放在一起，那就是下一节工作空间的问题。更宽的横向对照可参考仓库内另一篇 Claude PPT 技能指南。

8. OpenDesign 的位置：从技能到工作空间

guizang-ppt-skill 是个很棒的技能，能让你直接从终端得到一套设计精美的幻灯片。但技能本质上是一段脚本——它不会把你的品牌带到不同项目之间，不会让产物在一个真正的工作空间里保持可编辑，也不会让这套幻灯片和你其余的设计工作协同起来。

OpenDesign 是技能之上的那一层：一个开源（Apache-2.0）、本地优先、自备 key（BYOK）的 Agent-Native Design Workspace，独立于你已经在用的编码 Agent 之外。你描述一套幻灯片，Agent 就对着一套设计系统生成一份可编辑的。

这里有一处具体而坦白的关联，可以在仓库中直接验证：

design-templates/guizang-ppt/SKILL.md 的 front matter 将上游声明为 op7418 的 guizang-ppt-skill 仓库，并配置了 OpenDesign 模板元数据：od.mode: deck、preview.type: html（入口 index.html）、场景 marketing，附带示例提示词（"Create ... as a Marketing and GTM deck in the Guizang Ppt visual system"）——说明该模板已被适配为 OpenDesign 可直接预览、可触发的 deck 模板；
skills/deck-guizang-editorial/SKILL.md 是同一视觉体系的技能化封装（"归藏编辑墨水 Deck"：10 个版面 + 5 套调色板），带 example_prompt 与示例数据，可直接作为 OpenDesign 技能被 Agent 加载；
两者所在的 design-templates 目录与 plugins 插件库共同构成 OpenDesign 的模板生态——guizang 带火的那种观感，在一个同时掌管你的品牌和文件的工作空间里就能用上。

选择原则（继承原文）：当你想从命令行快速得到一套设计过的幻灯片时，用技能；当这套幻灯片必须符合品牌、可编辑、并且是一整套更大整体的一部分时，去找工作空间。

9. 常见问题（FAQ）

guizang-ppt-skill 是什么？ 它是一个编码 Agent 技能（据博客文章记载，GitHub 上 2.08 万星标，出自创作者 Guizang / op7418），能把一句大白话提示词变成一套风格精致的 HTML 幻灯片，采用杂志式和瑞士网格排版。你把它装进你的 Agent、描述这套幻灯片，然后迭代。

guizang-ppt-skill 免费吗？ 免费——它以 AGPL-3.0 开源（注意上述副本许可证差异），你自备模型的 API key。在把它嵌进商业或闭源产品之前，先看清所用副本的许可证条款；copyleft 义务正是那个坑。

它产出什么？ HTML 幻灯片（单文件、横向翻页、内置 WebGL 与翻页脚本）。非常适合在浏览器里演示并保留完整的 CSS 控制力；如果你需要一份原生可编辑的 .pptx，那是另一种工具的事了。

guizang 和其他 Claude PPT 技能有什么不同？ 它为设计质量做优化——杂志式版式和瑞士排版——而不是纯粹的速度或格式灵活性。frontend-slides 是 MIT 且 web 原生；dashiAI 导出可编辑的演示文稿。当这套幻灯片必须看上去是精心打磨过的，guizang 就是那个该选的。

技能还是设计工作空间——我该用哪个？ 要在终端里快速做一套设计精美的一次性幻灯片，用 guizang-ppt-skill。当这套幻灯片必须符合品牌、可编辑、并且和你其余的设计工作一起存在时，用像 OpenDesign 这样的 agent-native 工作空间。

10. 结语

如果你想要一套真正看上去被设计过的幻灯片，而且你在编码 Agent 里得心应手，guizang-ppt-skill 是眼下最好的技能之一——杂志式版式、瑞士排版、真正的品味，都直接从一句提示词而来。留意许可证条款（注意不同副本的差异）和只出 HTML 这一点，它配得上那 2.08 万星标。而当这套幻灯片需要符合品牌、可编辑、并且成为某个更大整体的一部分时，就该由一个 agent-native 设计工作空间来接手——而它已经在插件库里提供了 guizang 风格的杂志式模板。

想在当前仓库中继续深入，可按以下路径逐层查看：