企业官网建设流程全解析

一条命令 + 3 步：如何安装 guizang-ppt-skill 并做出第一份杂志风网页 PPT

【免费下载链接】guizang-ppt-skillAI-agent Skill for generating polished HTML slide decks: editorial magazine and Swiss layouts, image prompts, social covers, and a WebGL/low-power presentation runtime.项目地址: https://gitcode.com/gh_mirrors/gu/guizang-ppt-skill

guizang-ppt-skill 是一个免费的 AI Agent 技能包：把文章或素材交给它，直接产出一份单文件 HTML 网页 PPT，浏览器打开就能演示，键盘 ← → 和触屏滑动都能翻页。全文按 3 步走，装好到出第一份成品。

为什么值得先装 guizang-ppt-skill 试试

用常规工具做 slides，字体、网格、配色每页都要手动摆，AI 能写文案却控不住版式。这个技能把一套经过多轮分享验证的视觉系统直接交给 Agent，每次产出的版式质量都稳定在同一水位：

• 🖋双视觉系统：杂志风用衬线大标题 + WebGL 流体背景负责叙事，瑞士风用单一高饱和锚点色负责数据表达
• 📐32 个现成骨架：Style A 提供 10 种布局（封面、数据大字报、图片网格、Pipeline 等），Style B 提供 22 个锁定版式（S01-S22，含 KPI Tower、Duo Compare、Image Hero）
• 🎨9 套预设主题色：杂志风 5 套电子墨水色（墨水经典、靛蓝瓷、森林墨、牛皮纸、沙丘）+ 瑞士风 4 套锚点色（克莱因蓝 IKB、柠檬黄、柠檬绿、安全橙），只能选不能自定义，避免配色翻车
• 📄单文件交付：不需要构建步骤、不需要本地服务器，浏览器直接打开演示；按B键关闭 WebGL 动画，低配机器也不卡

一条命令安装 guizang-ppt-skill 并验证

前提只有一个：有终端，且你的 AI Agent 环境能执行 shell 命令（Claude Code / Codex / Cursor 等）。打开终端，粘贴执行，约 30 秒完成：

npx skills add https://gitcode.com/gh_mirrors/gu/guizang-ppt-skill --skill guizang-ppt-skill

不想用 npx，或想让自己完全掌控过程，走替代路径，手动克隆到技能目录：

git clone https://gitcode.com/gh_mirrors/gu/guizang-ppt-skill ~/.claude/skills/guizang-ppt-skill

装完进入技能目录看一眼，三项齐全即验证成功：

装好后 Agent 会在对话里自动发现它，之后说"帮我做一份杂志风 PPT"或"帮我做一份瑞士风 PPT"就会触发。

3 步做出第一份网页 PPT

1. 把素材和一句需求一起丢给 Agent。附上文章、Markdown 或素材文件：

帮我基于这篇文章做一份杂志风演讲 PPT，控制在 7 页左右，需要 2-3 张配图。

预期结果：Agent 先问风格、受众、时长、主题色等 7 个澄清问题，不会基于猜测直接动手。

2. 回答 7 问，锁定风格与主题色。在杂志风 A 与瑞士风 B 之间选一套，再从预设色里挑一套。预期结果：Agent 拷贝对应模板（A 用assets/template.html，B 用assets/template-swiss.html），逐页填内容。

3. 接收成品，浏览器打开 index.html 验证。预期结果：横向左右翻页、ESC进宫格总览、P进演讲者模式；哪页不满意，回一句话让 Agent 直接改。

内部流程你不用记：7 问澄清 → 套模板 → 填内容 → 对照references/checklist.md自检 → 出成品，Agent 会自己走完。

杂志风与瑞士风怎么选：按使用场景拆

讲故事、讲观点：选杂志风（Style A）

衬线大标题 + 非衬线正文 + 等宽元数据，WebGL 流体背景只在 hero 页透出，整体节奏像Monocle杂志贴上了代码。适合行业观察、人文分享、产品故事这类内容。用法建议：素材是长文时直接说"帮我做成杂志风 PPT"，它在图片网格、左文右图等图文混排版式上是强项。

讲数据、讲产品：选瑞士风（Style B）

全程无衬线、单一高饱和锚点色，元素吸附网格、直角色块 + 1px 发丝线，主标题与正文的字号比例不低于 8:1。22 个锁定版式每页都登记data-layout，交付前还有校验脚本查图片槽位和标题对齐。适合 KPI、路线图、前后对比这类内容。用法建议：说"瑞士风 PPT，8 页"即可，没指定颜色时默认推荐克莱因蓝 IKB。

配图、封面与截图美化：一套规则顺手复用

同一套主题规则还能扩展出别的视觉资产：在 Codex 里可生成纪实照片、信息图、流程图（提示词规则写在references/image-prompts.md）；9 套内置背景能把产品截图适配成 PPT 比例；同一份内容还能输出公众号 21:9 头图、1:1 分享卡、小红书 3:4 封面。

一句话判断：讲观点、讲故事选杂志风 A；讲产品、讲数据、讲方法论选瑞士风 B。一份 deck 只能选一套，拿不准就先按内容砍一刀再定。

使用 guizang-ppt-skill 常见问题

Q：能直接导出 PPTX 文件吗？当前核心交付是单 HTML，直接用浏览器演示，或截图、录屏存档；转换 PPTX 不是主流程。

Q：能用自己的品牌色吗？不能写自定义 hex 值。杂志风 5 套、瑞士风 4 套预设里选，官方理由就是"保护美学比给自由更重要"。

Q：如何更新到最新版？在本地技能目录执行git pull，或重跑一遍 npx 安装命令。

Q：哪些情况不建议用？大段表格数据、培训课件、需要多人协作编辑的场景——信息密度和协作能力不如常规 PPT 工具。

写在最后：从一条命令到第一份成品

总成本：一条 npx 命令 + 约 30 秒安装 + 回答 Agent 的 7 个问题。接下来可以读 SKILL.md 了解完整工作流，或者直接试一次瑞士风——把素材丢给 Agent，让它先问起来就行。

【免费下载链接】guizang-ppt-skillAI-agent Skill for generating polished HTML slide decks: editorial magazine and Swiss layouts, image prompts, social covers, and a WebGL/low-power presentation runtime.项目地址: https://gitcode.com/gh_mirrors/gu/guizang-ppt-skill