先来看效果，下面两张图都是 AI 一句话生成的：

我没有用任何运营编辑平台，也不需要提供文案，也不用去调整细节设计，这一切，只用了一句话： 帮我根据这篇文章生成小红书封面图。 然后 AI 就吭哧吭哧开始干活。

在以前，想到这些流程 打开 Canva → 选模板 → 改文字 → 调颜色 → 调字号 → 导出 PNG → 传到手机 → 发布。

我就懒得发小红书了。从入门到放弃。

写文章本身才花 2 小时（AI 辅助），结果做封面的时间占了整个发布流程的 1/4。而且每次都是差不多的操作——改个标题、换个颜色、调个布局。不行，我忍不住了。

重复劳动 + 可模板化 = 该自动化了。

我只需要会写 Markdown 文档，打开下代码编辑器（如果是小白入门，用 workbuddy/小龙虾 也行），然后用下面的自然语言跟他对话，他就会生成一份 skill ，这份 skill 以后生成封面图都能直接复用。 

一、为什么不用 AI 画图

你可能第一反应是：让 Midjourney 生成封面不就行了？

试过了，并不行。原因有三：

文字不可控。 AI 画图最大的硬伤就是文字。你让它在封面上写"3 天涨粉 5000"，它给你画出来的可能是"3 夫涨纷 500O"。中文更惨，基本没法看。

风格不稳定。 你想要一套统一风格的封面，AI 画图每次出来的感觉都不一样。今天赛博朋克，明天水彩插画，品牌一致性直接炸裂。

改不动。 生成完了想改个字？重新跑一遍。想把标题从两行变一行？再跑一遍。每次修改都是从头来。花式燃烧 token ？

当然有些人现在都是用  Nano Banana 来生成封面图， 对于文案它处理得比较好，但是有一个缺点，贵

所以，我用了一种新的方案：HTML+CSS 

痛点	AI 画图	HTML+CSS
文字精准度	经常出错	100% 精准
风格一致性	每次不同	模板固定
修改成本	重新生成	改一行代码
生成速度	30-60 秒	不到 1 秒
费用	API 调用费	零

HTML+CSS 写封面图，本质上就是在写一个网页，然后截图。

网页能做到的排版效果，封面图都能做到——渐变背景、圆角卡片、阴影、Emoji、图标，全都能上。而且文字是你打进去的，一个字都不会错，后续你要调整文案也很方便。

二、Skill 的核心逻辑

所谓"Skill"，是 AI 编程助手（Claude Code / CodeBuddy）里的一种扩展机制。你写一份 Markdown 文档告诉 AI 怎么干活，它就按照你定义的规则和流程执行。可以看我之前的文章，有介绍过 SKill

我这套小红书封面 Skill 大致的逻辑如下，其实很简单，就三步：

第一步：AI 根据文章或主体自动提炼

你在 AI 对话框里说：

"帮我做一张小红书封面，标题是《因为太懒所以写了个 Skill》"

或者更简单：

"给这篇文章做个小红书封面"

AI 读完你的文章，自动提取标题、核心关键词、情绪色调。

第二步：AI 写 HTML

AI 根据 Skill 里定义的设计系统，自动生成一份 HTML 文件。这份 HTML 就是你的封面图——1080×1440 竖版，纯 CSS 排版，零外部依赖。

设计系统里写死了什么？

• 尺寸：1080×1440px（小红书推荐的 3:4 竖版）

• 安全区域：核心内容在画面中心 60% 区域，上下留白

• 字号体系：主标题 72-96px，副标题 36-42px，标签 24-28px

• 配色方案：预设了 6 套小红书高频配色（糖果粉、薄荷绿、克莱因蓝、暖橘、冷灰、渐变紫）

• 布局模板：大字报式、卡片式、列表式、对比式

AI 不是随便写 HTML。Skill 文档里把每种布局的 CSS 骨架都写好了，AI 要做的只是填空——根据你的标题长度选布局、根据内容情绪选配色、把文字塞进去。

这就像考试给了答题模板，AI 只需要往里填内容。准确率极高。风格也极度统一。设置你可以自己加水印，或者加一些小标题。

第三步：一行命令截图

HTML 写好之后，用 Playwright截图：

uv run render_slides.py cover.html

Playwright 打开这个 HTML，按 body 设定的尺寸截一张 3x 高清 PNG 出来。这里涉及到高分率屏幕，用3倍图，在小红书预览，清晰度很高。

接下来的整个流程：我说一句话 → AI 写 HTML → 截图出 PNG。

从输入到拿到封面图，不到 10 秒。

三、一张封面图长什么样

拿个实际例子。

我跟 AI 说："帮我做一张小红书封面，主题是 AI 算命赚钱拆解"。

AI 自动生成的 HTML 结构：

封面图 HTML 层级：
├── body (1080×1440, 背景色 #FFF5F5)
├── .content (居中内容区)
│   ├── .tag         → "💰 AI 搞钱指南"（顶部标签药丸）
│   ├── .title       → "一毛钱成本"（主标题第一行，96px 粗体）
│   ├── .title-line2 → "卖 9.9 一单"（第二行，关键数字用强调色）
│   ├── .divider     → 装饰分割线
│   ├── .subtitle    → "AI 算命赚钱，我拆干净了"（副标题）
│   └── .points      → 3 个要点列表（每个一行短句）
└── .footer          → "@你的小红书号"（底部水印）

对应的 CSS 只有不到 100 行。没有任何外部依赖，不加载 Google Fonts，不引 Tailwind CDN 等外部资源。

纯系统字体。system-ui, -apple-system, "PingFang SC" 就够了。

这套方案最大的好处：你可以无限微调。

觉得标题太长？改一行文字。想换个配色？改两个色值。想加个 Emoji 装饰？加一个 <span> 标签。改完重新截图，1 秒出新版。

四、为什么要做成 Skill 而不是写个脚本？

你可能会说：这不就是写了个 HTML 模板吗？为什么非要包成 Skill？

其实，区别就在于AI 理解上下文。

一个 Python 脚本，你得手动传参数：标题是什么、用什么配色、什么布局。每次都要想。

Skill 不一样。你说"给这篇文章做个封面"，AI 会：

1. 读完文章全文，提取核心主题和情绪

2. 自动选配色——搞钱类用暖橘，技术类用克莱因蓝，情感类用糖果粉

3. 自动选布局——标题短用大字报式，要点多用列表式

4. 自动提炼标题——文章标题 30 个字，封面标题压缩到 10 个字以内

5. 自动生成 HTML 并截图

你要做的只有一件事：说一句话。

这就是 Skill 的价值——把决策逻辑也交给 AI，不只是执行层面的自动化。

Skill 本质上是一份结构化的 Markdown 文档，里面定义了：

部分	内容
设计系统	尺寸、配色、字号、布局模板的 CSS 代码
决策规则	什么内容用什么配色、什么标题长度用什么布局
工作流程	从读文章到生成 HTML 到截图的完整步骤
约束条件	零外部依赖、安全区域、字号下限

AI 读了这份文档，就知道怎么干活了。现在把你的skil，扔给任何人，他都能生成封面图。

五、你也能做一个自己的 Skill

不止封面图。这套思路可以复用到任何"重复性设计"上：

公众号封面图。 我自己的公众号封面就是这么生成的。1024×1024 Dark Tech 深色科技风。每篇文章写完，AI 自动生成封面 HTML、截图、上传微信图床。

小红书内容总结卡片。 1080×1350 竖版 Dark Tech 风格，适合小红书和公众号贴图。每张卡片一个核心要点，5-8 张一组。

这三种配图，全部是 HTML+CSS + Playwright 截图。零 Canva，零 Figma，零 AI 画图 API。

做一个 Skill 的步骤也不复杂：

1. 定义设计系统——把你想要的视觉风格固化成 CSS 代码（配色、字号、间距、布局）

2. 写几个模板——3-5 种布局变体的 HTML 骨架

3. 定义决策规则——什么内容匹配什么模板、什么配色

4. 写工作流程——从输入到输出的完整步骤

5. 打包成 Markdown 文档——扔进 Skill 目录，AI 就能用了

在这整个过程中，你不需要会设计。你只需要在小红书上找到你喜欢的封面风格，用浏览器开发者工具看看人家的配色和字号，然后抄到你的设计系统里。设置你直接截图发给 AI ，让 AI 给你分析。

写在最后

懒人驱动开发，永远是最好的自动化动力。

你有什么每天都在重复做的事？发朋友圈配图、写周报、做数据表格、截图标注？如果它可模板化、可规则化——那它就可以变成一个 Skill。

如果你对我的 skill 感兴趣，可以在评论区评论，人数多的话我会直接公开分享我的 skill。 或者你动手能力强一点，可以直接把我这篇文章喂给 ai , 让它根据这个来写一个 skill 

📌 关注公众号，不错过下一篇拆解。

觉得有收获？点赞 + 在看 + 转发，是对我最大的支持 🙏