很多人问我：公众号排版怎么做的？
今天把我常用的两个 AI Skills 分享出来
AI 写作排版实战 · Skills 整理思路 · html2ppt
说白了，没用什么神秘工具。我就是把自己常用的几个 AI Skill 整理了一下。今天这篇，我不藏着，把思路和两个我天天在用的 Skill 一次性讲清楚。
先交代下背景。工作上，除了公司内部用的 Skill、写代码用的 Skill，我还经常给客户做分享、在公司内部做技术分享，这时候就得做 PPT——这些都是工作的一部分。
工作之余，我则喜欢写写公众号文章，把一些东西分享出来。一个是工作里要做的 PPT，一个是空闲时写的公众号，这两件事我现在都交给了 AI + Skill。
这篇就聊这两个 Skill：一个负责公众号排版，一个负责做幻灯片。两个都开源放在我的仓库里了：
github.com/zhuermu/skills-hub
1 一切的起点：先写 Markdown，再让 AI 转 HTML
我所有的内容输出，几乎都遵循同一个套路，特别简单：
• 第一步：先用 Markdown 把内容本身写清楚。只管内容，不管样式。
• 第二步：要发公众号或者做 PPT 时，让 AI 把 Markdown 转写成 HTML。
• 第三步：跟 AI 把要求说清楚——想要什么风格、什么排版、主题色、表达方式，甚至要不要画架构图、动态图，都可以提。
因为内容和样式分开，脑子才不乱。写的时候只想"我要表达什么"，排版的时候只想"它该长什么样"。这两件事一旦混在一起，效率反而最低。
关键就在第三步——把要求说清楚。但每次都从头描述一遍风格太累了，所以我把这些要求固化成了 Skill。下面这两个，就是我固化好的成果。
2 Skill 一：把 Markdown 变成公众号排版
先说大家最关心的排版。你现在看到的这篇文章，就是这个 Skill 排出来的。wechat-article
微信公众号的编辑器很"挑食"，会把大部分现代 CSS 都吃掉。所以这个 Skill 干的核心活儿，是产出一份微信能认的 HTML：
• 全部内联样式：每个标签都带 style，不用 class、不用 <style> 块
• 固化好的排版参数：行高 2.0、字间距 1px、正文不用纯黑（用 #3f3f3f），这些都是中文阅读体验的关键
• 一套配色系统：粉色主调，紫色、琥珀色做辅助，标题、引用框、表格、代码块层次分明
• 现成的组件库：标题、引用框、高亮块、表格、代码块……每个都有写好的样式，直接套
最后产出一个独立的 HTML 文件，浏览器打开预览，全选正文复制进公众号编辑器就行。比如下面这种引用框、这种高亮，都是组件库里直接调用的：
3 Skill 二：用 HTML 当幻灯片做 PPT
第二个 Skill 解决我做分享的需求。给客户讲方案、在公司内部做技术分享，都得有 PPT。但我基本不开 PowerPoint 了，而是用 html2ppt 的方式——直接用 HTML 来播放幻灯片。aws-style-presentation
先看效果，这是我用它做的一页 PPT 的实拍（动图）：
它产出的是一个零依赖、单文件的 HTML，所有 CSS 和 JS 都内联在里面。打开就能全屏播放，特点是：
• 紫粉渐变主题：卡片布局、对比表格、徽章标签、进度条导航，整体观感统一
• 能画图：架构图、柱状图、环形图、流程图，都用内联 SVG 画，不用额外贴图
• 有动画：翻页滑入、内容逐条淡入、数字滚动、图表绘制，动态效果直接拉满
• 能翻页能导出：键盘、点击、触屏滑动都支持，还能直接打印成 PDF
这两个 Skill 的底层逻辑其实一模一样：把"我想要的样子"固化成一份可复用的规则，剩下的交给 AI 填内容。
4 关键一步：把满意的输出沉淀成 Skill
这才是我最想分享的整理思路，也是大部分人没做的一步。
很多人跟 AI 折腾半天，终于调出一个满意的排版或 PPT，然后……就没有然后了。下次要用，又得从头描述一遍。等于每次都在重新发明轮子。
我的做法是：每当我得到一个比较满意的输出，就让 AI 用 skill-creator（一个专门"创建 Skill 的 Skill"）把这次的经验整理成一个标准的 Skill，方便以后直接调用。
写 Markdown → 让 AI 转 HTML 调到满意 → 用 skill-creator 把它沉淀成 Skill → 下次一句话直接复用。
做得越多，你的"AI 工具箱"就越顺手。这才是复利。
github.com/anthropics/skills/tree/main/skills/skill-creator
5 去哪找适合你职业的 Skill？
我的两个 Skill 偏写作和分享场景。如果你是别的职业，不用自己从零造，可以去 SkillHub 找别人共享的 Skill：
www.skillhub.club
顺手推荐几个当下榜单上很热的 Hot Skills：
| Skill | 能干啥 |
|---|---|
| skill-creator | 创建 Skill 的 Skill，本文那套沉淀方法就靠它 |
| systematic-debugging | 结构化排查 Bug，先定位根因再动手，写代码必备 |
| ui-ux-pro-max | 前端/设计利器，50 种风格、配色、字体搭配随便选 |
| mcp-builder | 手把手教你构建 MCP server，把 AI 接到外部 API |
| summarize | 从网页、播客、本地文件里提取/转写正文，做总结 |
别一上来贪多。先想清楚你最高频的那件事，找一个对应的 Skill 用顺，再慢慢扩展。工具是为了省事，不是为了收藏。
6 附：这篇文章的提示词原文
说到这，干脆把"作业"也交了。这篇文章本身，就是我用上面 wechat-article 这个 Skill 生成的。下面是我丢给 AI 的提示词原文，你可以照着改成自己的：
因为最近很多很多朋友问我公众号的排版是怎么做的？感觉视觉效果很不错。因此我想把我最近用的一些写材料、写文档的 skills 分享出来，主要还是分享这些 skills 的整理思路。
目前除了我日常工作用的公司内部 skills 和写代码用的一些 skills 之外，工作之外我会写公众号文章，另外就是日常给客户做分享，在公司内部分享的时候需要写 ppt，我都会用 html2ppt 的方式来实现，即使用 html 来播放幻灯片来实现。因此我主要分享这两个我常用的 skills。
我解释下这 2 个 skills 怎么做的：我通常在输出文档时会先写 markdown 格式的文档，然后我要转 ppt 或者写公众号文章，让 ai 帮我转写成 html 的输出，和 ai 说清楚想要的风格、排版、主题颜色、表达方式等等，甚至要求画架构图、动态图都行。
在做完一个我觉得比较满意的输出时，让 ai 用 skill-creator 这个创建 skills 的 skill 来整理成一个 skill，方便我后续使用。
另外大家想找自己职业合适的 skills 可以在 skillhub 找到别人共享的 skills，推荐几个 Hot Skills。基于上面写一篇微信公众号教学文章，另外这段提示词也要放进文章里。
如果这篇文章对你有帮助，欢迎点赞、在看、转发三连 🙏
关注我，持续分享 AI 时代的技术实战与深度思考