设计师开源基于HTML的杂志风PPT模板"guizang-ppt-skill",融合印刷美学与Web交互,提供10种布局+5套主题色,实现人机协作高效产出。 ## 1. 设计理念与视觉特征 - **电子杂志×电子墨水**:结合《Monocle》等印刷杂志版式与Kindle电子纸美学,采用墨色底+衬线标题、纸白正文、WebGL流体动效 - **交互革新**:横向滑动翻页(支持键盘/触屏/滚轮),报刊式元数据标注(如"Act II·15/25"),单文件HTML便携传播 ## 2. 核心功能模块 - **10种布局模板**:覆盖封面/数据页/图文混排等场景,含可直接修改的HTML骨架 - **5套主题色系统**:严格限定CSS变量(如靛蓝瓷科技风、沙丘艺术风),禁用自定义HEX以保持风格统一 - **智能协作接口**:AI通过6个问题(受众/时长/素材等)前置对齐需求,拦截80%返工风险 ## 3. 关键使用技巧 - **图片管理规范**:按"01-cover.jpg"格式命名,JPG用于照片/PNG用于截图,同名覆盖即可换图 - **排版三原则**:衬线字体强化观点、非衬线提升可读性、等宽字体处理元数据,7:5等网格系统保障视觉节奏 - **错误防控机制**:连续三页同主题被判P0错误,强制保持"一密一疏"的杂志呼吸感 ## 4. 设计哲学与行业洞察 - **约束创造美感**:拒绝纯白(#FFFFFF)和纯黑(#000000),所有主题色均经印刷行业验证 - **规则沉淀价值**:将十年设计经验编码为SKILL.md规则库,使AI能精准执行杂志排版百年经验
开源一个PPT Skill|压进了我10年的设计经验
2026-04-24 07:36

开源一个PPT Skill|压进了我10年的设计经验

本文来自微信公众号: 歸藏的AI工具箱 ,作者:歸藏的 AI 工具箱,原文标题:《开源一个 PPT Skill|压进了我 10 年的设计经验》


上周被李继刚老师邀请去做了场私享会,关于AI和组织的访谈。


散场之后,发现大家问得最多的一句话是:"那个PPT是什么做的,能不能开源一下?"


没想到副产品成了主产品。


索性就把它开源了,叫guizang-ppt-skill(github.com/op7418/guizang-ppt-skill)。


今天这篇文章聊聊这个Skill长什么样,以及作为一个做了十年设计的人,我为什么会觉得它好看。


它长什么样


打开Skill生成的PPT,第一眼的感觉大概是:这不太像AI做的。



几个直观特征:



封面:墨色底+衬线大标题,背后一层若隐若现的WebGL流体在缓缓流动



正文:底色切回纸白,墨字压在上面,像一本摊开的印刷杂志



翻页:横向左右滑动,键盘、滚轮、触屏手势都行,不是PowerPoint的下一页



元数据:每页四个角落有小号等宽字,写着"Act II·15/25"这类报刊页码


我给这套视觉基调起了个名字,叫"电子杂志×电子墨水"。


灵感来源是《Monocle》《卫报》《NYT》这类印刷杂志的版式传统,叠加Kindle电子纸的阅读美学,再用当代Web的交互语法串起来。


它能做什么


Skill目前提供10种页面布局、5套主题色预设,和一套完整的翻页交互。


10种布局覆盖了一场15-30页分享会用到的几乎所有页面类型:


开场封面、章节幕封、数据大字报、左文右图、图片网格、Pipeline流程、悬念问题、大引用、Before/After对比、图文混排。


每种都是一段可以直接粘贴的HTML骨架,改掉文字和图片就能用。


5套主题分别对应不同场景:

墨水经典—商业发布、通用默认

靛蓝瓷—科技、研究、AI发布会

森林墨—自然、可持续、人文

牛皮纸—怀旧、文学、独立杂志


沙丘—艺术、设计、创意


每套主题只是6个CSS变量的不同取值,切换主题只要替换:root里那6行代码。


用户不允许自定义hex,后面会说原因。


翻页交互支持键盘左右箭头、鼠标滚轮、触屏滑动、底部圆点跳转、ESC键打开缩略图索引。


尽量接近在浏览器里翻一本真实杂志的体验。


产物是一个单文件HTML,双击浏览器就能看,发给别人也只是一个文件,不用担心字体和动画在别人电脑上乱掉。



怎么用


其实这份Skill真正的价值不在模板本身,而在它定义了一套人×AI协作做PPT的接口。


下面三件事,是我自己用了一周后,觉得最值得告诉别人的。


先跟AI说清这6件事


Skill装好之后,你只需要说一句"帮我做一份杂志风PPT",Claude会反过来主动问你6个问题:


1.


受众是谁、什么场景?(行业内部/商业发布/私享会)


2.


分享时长多久?(15分钟≈10页,30分钟≈20页)


3.


有没有原始素材?(文档、数据、旧PPT、文章链接)


4.


有没有图片、放在哪?


5.


想要哪套主题色?(5套预设里选)


6.


有没有硬约束?(必须包含XX数据/不能出现YY)


你不用一次说完,它会一条条问。答完之后,它会先给你一份大纲和主题节奏表,对齐之后再开始写代码——这一步拦截了我80%的返工。


以前用AI做PPT最痛的是什么?是它直接开始写,等你看到第10页才发现整体方向就是错的。这套澄清流程把"对齐"前置到了开头。


图片这样塞


图片放在和index.html同级的images/文件夹,文件名有规则:


ppt/


├──index.html


└──images/


├──01-cover.jpg


├──03-figma.png


└──05-dashboard.png



页号补零+英文语义——01不是1,cover不是fengmian。方便按顺序排,AI引用也清晰



照片用JPG,截图用PNG——截图带文字,PNG保真不糊



单张≥1600px宽——大屏投影才不糊


你只需要告诉Claude"第3页是Figma界面截图",它会自动写成images/03-figma.png,你把同名文件丢进文件夹就行。


无损换图的秘诀:同名覆盖


文案改完想换张图,结果要全局搜替换路径,一不小心就把HTML改坏了。


正确做法只有一句话:新图用同名覆盖旧图,HTML一个字不改。


为什么长成这样


聊完怎么用,聊聊它为什么是这个样子。


好看不是玄学,是一套可以拆解的决策。我做的事,本质上是把杂志行业一百年沉淀下来的排版语言,搬到了HTML里。


字体的三级分工


衬线→"观点"。大标题用衬线,读者一眼就觉得"这是一句该被重视的话"。

非衬线→"信息"。正文密度高、阅读不累。


等宽→"元数据"。页眉页脚的章节号、日期、页码,像杂志页脚,也像终端里的代码。


读者不用费劲想,眼睛自己就知道这句话是正文还是附注。


色彩的纪律


纸白、墨色,加一个重点色,就够了。


纯白刺眼、纯黑暴力,印刷行业从来不这么干,Kindle也是。


Skill的5套主题,底色没有一个是#FFFFFF,字色没有一个是#000000。


每套只暴露6个CSS变量,SKILL.md里写明:不允许用户自定义hex,只能五选一。


约束越严,风格越稳。保护美学,比给用户自由更重要。


网格与节奏


7:5、6:6、8:4几套固定网格保证单页秩序。

hero页和non-hero页必须交替,保证整本的节奏。

一页密、一页疏,就是翻杂志时那种呼吸感。


Skill里写了条硬规则:连续三页以上相同主题会被判为P0错误。


没有节奏的PPT就是一沓slide堆成的PDF。


写在最后


上面这些规则,没有一条是我发明的。


我做了十年设计,UI、交互、AI特效都干过,这些其实都是行业常识。


我只是把它们一条条写进了SKILL.md和checklist.md,让AI能替我逐条执行而已。


换句话说,这个Skill就是我这十年审美的一个压缩包。


以前做一份像样的PPT,我得花两天手动调网格、选字号、抠色值。


现在把素材丢给AI,它按照这些规则直接拼出来,我只需要检查一下。


也正因为这样,我才敢把它开源。


规则本来就不是我的独家,《Monocle》的设计师比我早用了几十年,我只是把它copy到了2026年的HTML里。

AI原生产品日报频道: 前沿科技
本内容由作者授权发布,观点仅代表作者本人,不代表虎嗅立场。
如对本稿件有异议或投诉,请联系 tougao@huxiu.com。
正在改变与想要改变世界的人,都在 虎嗅APP