企业官网建设流程全解析

我受够了小红书模板，所以做了一个"不套模板"的 Skill

大家好，我是王不二。

我每次写完公众号文章，只要想同步发到小红书，就得再经历一遍手工改稿和排版。

这件事说难也不难，就是很磨人。公众号是长文逻辑，小红书主要靠图片讲故事。原文不能直接搬过去，标题、节奏、分页和视觉层级都要重做。

我写了 11 年代码，页面能不能跑起来，我有把握。至于好不好看，这事就不一定了。

所以前段时间我开始找现成的 Skill，想让 AI 接手。网上能找到的方案，我陆续试了不少。第一次生成时往往挺惊艳，颜色好看，卡片精致，信息也排得很整齐。

多用几次，问题就出来了。

换了一篇文章，还是熟悉的左右布局。再换一个题材，又变成熟悉的上下结构。偶尔换了颜色和字体，骨架还是那一套。第一次看是设计，第五次看已经有点像流水线海报了。

我想做的东西不该是这样。

于是我决定自己搓一个小红书 Skill，还给它定了一条有点反常的规矩。

不准给 AI 模板。

不是少给几套。

是一套都不给。

同一个 Skill，为什么能做出完全不同的东西

先不讲原理，看结果。

我用同一个 Skill 做了三组测试：一组手机产品介绍，一组英国自驾记录，还有一组技术实测文章转小红书。你可以先看它拿到了什么，再看最终发出来的效果。

第一组，手机产品介绍。

我给它的素材是一整个产品图片目录，四视图、透明背板、侧边特写、真实使用场景都有。它得先判断每张图负责讲什么，再把这些图片组织成一组完整的产品叙事。

第二组，英国自驾记录。

这一组最麻烦，横图、竖图、路线图全混在一起。Skill 没有把它们硬裁成统一比例，而是围绕每张照片重新决定版式。

第三组，技术实测文章。

前两组至少还有一个素材目录，这一组的输入只有一个文章链接。Skill 需要先读懂文章，决定哪些测试过程值得保留、哪些截图能够承担证据，再把一篇长文拆成适合翻着看的一组页面。

如果你只看最终效果，可能会以为我提前准备了三套模板。

但其实，一套都没有。

这个 Skill 根本没有固定版式。它每次都重新读内容，再决定这一页该怎么排。

传统模板的逻辑，是把内容塞进版式。

这个 Skill 的逻辑，是让版式从内容里长出来。

这句话是整个 Skill 的核心。

值得一提的是，它根本不需要生图模型

上面这些效果，都不依赖生图模型。

Skill 用 HTML + 浏览器渲染完成整套制作。只要 Agent 能写代码、能跑浏览器，就能工作。

这是我用 Trae 的 Auto 模式跑出来的结果。

看到了吧？换了模型，布局、风格和前面完全不一样，但依然好看。

所以这套skill的使用门槛，其实比大家想象的低不少。

做 Skill 和做 Agent 有很多相似之处，背后其实一直在解决三个我做 Agent 时反复碰到的问题。

AI 应该获得多少自由，产出质量怎么兜底，人又该在什么时候介入。

Prompt 是提示，不是施工图

很多 Skill 的写法很像施工图。

标题放在左上角，字号多大；图片占页面百分之多少；正文分成几块；标签摆在哪里；底部留多少空白。规则写得越细，第一次生成越稳定。

代价也很直接：AI 失去了判断空间，换一份内容，依然只能往同一套格子里塞。

我更愿意把 Prompt 理解成它原本的意思——提示。

Skill 没必要替 AI 决定每个元素的坐标。真正缺的是一组专业判断，让它知道排版之前应该先看什么。

我最后只给图片定义了两个判断维度：

空间比重：它在页面上应该占多大。

内容比重：它在叙事里到底有多重要。

空间比重看图片本身的形状和焦点。一张狭长的路线图、一张横向风景照、一张文字密集的产品截图，占据页面的方式肯定不同。先把图片塞进一个固定容器，再想办法裁切，只会损失它原本最重要的信息。

内容比重看图片在叙事里负责什么。

有些图片已经把事情讲清楚了。比如旅行中的地标照片，它本身就是现场，也是这一页最重要的内容。文字只需要补充地点、时间这些图片里看不到的信息。

有些图片只能证明其中一个环节。比如技术测试的终端截图，它可以证明某个结果出现过，却未必能交代测试条件、对比对象和为什么得出这个结论。这时文字就得多承担一点解释。

所以每一页都先问几个问题。

这张图是什么比例，焦点在哪里？它需要多大，读者才能看清？它已经讲清楚了什么，还有什么必须靠文字补充？

回答完这些问题，版式才开始出现。

图片是竖图，就顺着竖图的力量组织页面。图片是横图，就给横向内容足够空间。图片已经把事情讲明白，文字就退后。图片只是一份证据，文字就把背景和结论补齐。

自由度给 AI，缰绳还得握住

不给模板，不等于没有规则。

构图可以让 AI 自己决定，但有些底线不能碰：真实截图的关键文字不能裁掉，图文要有主次，字体必须能读，配色不能每页各玩各的，内容也不能为了填满页面凭空扩写。

我还把这些规则做了分层。事实边界、图片完整性、质量检查这些稳定的原则放在核心层；配色、字体、视觉气质放在独立的参考层。以后想加新风格，只需要增加视觉规则，不用动核心逻辑。

稳定的原则和经常变化的偏好，最好不要绑死在一起。

AI 生成完以后，先别急着交卷

自由度有了，下一个问题更现实。

AI 第一次生成的东西靠谱吗？

我的答案是，别赌。

最简单的办法是让它生成完以后先检查，发现问题就改，再重新生成。我之前专门写过一篇文章讨论这个思路，叫 Loop Engineering。说白了，就是别让 AI 写完就交卷。先给它一个可以检查的产出标准，再让它在提交前自己多走一轮。

在这个 Skill 里，HTML 生成只是中间步骤。页面会先检查一遍结构，再渲染成图片，检查分辨率、图片比例、文字溢出、异常空白和画布边缘碰撞。检查发现问题，AI 就回去修改，然后重新跑一遍。

但是这里有一个很关键的点：

自检的前提，是你得先定义什么叫对。

文字有没有跑出画布，可以检查。截图有没有保持完整比例，可以检查。标题有没有被拆出一个孤零零的字，也可以检查。

但如果你只说 “再检查一下”，这不是 QA，能明确说出检查什么，才算 QA。如果标准只写成"看看是否美观"，循环多少次都没有意义。AI 连错误是什么都不知道，只能反复表达自己觉得还不错。

想深入了解这个概念，可以看我之前写的文章。

Loop Engineering 深度拆解：从内循环外循环到退出条件定义

不过，能写成明确规则的错误，只占实际问题的一部分。

尺寸可以测量，溢出可以检测。至于"这页的视觉重心有点怪"、“这个风格和内容不搭”、“两种方案我到底更喜欢哪一个”，这种问题很难提前变成一条稳定的自动规则。

这时候，人就该进场了。

别把自己干成 Yes 工程师

说到这里，就绕不开 Human in the Loop。说白了就是，机器负责跑，人负责关键选择。

人什么时候该进来？绝对不是最后结果烂了，再回来骂 AI。

我身边不少朋友使用 Agent 时，对话大概是这样的。

Agent 问，要不要按这个方向做？

Yes。

这个架构可以吗？

可以。

我继续？

继续，开干。

一路确认到底，最后结果跑偏了，又开始问 AI 为什么这么傻。

这种状态就是Yes 工程师。表面上每一步都有人批准，实际上人已经退出了决策——AI 已经当项目经理了。

Agent 主动反问时，很多时候意味着它碰到了一个会改变结果的分叉口。风格选错了，后面所有页面都会跟着错。页面命题理解偏了，排版做得再精致，也只是在错误方向上继续加工。

所以我在做这个 Skill 时，会认真看 AI 提出的问题。它说"波普海报"、“暗调电影氛围”，我看不懂这些词具体对应什么，就让它直接画出来。先看一张页面，再决定要不要把这套风格放进 Skill。

人不需要接管每个像素，但也不能放弃真正影响结果的选择。

我现在更习惯把分工写成三句话。

AI 能自己做的，让 AI 自己做。

AI 能自己检查的，让 AI 自己检查。

剩下判断不清楚的，人进来。

还有一个经验：AI 一旦顺着错误思路跑了太远，别舍不得开新窗口。

上下文是资产，也可能是负债。

当纠正旧上下文的成本，比重新讲一遍需求还高，就果断重开。

Skill 已经开源，拿去用

我一开始只是想解决自己的问题，把公众号文章同步到小红书时，少做一点重复劳动。

最后做出来的，其实已经不只是一个"小红书排版工具"。它更像一套小红书图文的制作流程：先读懂材料，安排每一页要讲什么，再根据真实图片和文字决定怎么设计。

项目已经开源，地址：wang-bool/xiaohongshu-storycraft

可以用 Skills CLI 安装：

npx skillsaddwang-bool/xiaohongshu-storycraft

也可以把仓库地址交给你的 Agent，让它按照 README 完成安装。不同 Agent 的 Skill 目录和刷新方式不一样，具体以各自的Agent为准。

你如果喜欢其他的风格，下载后可以继续改配色、加风格、调整判断规则，或者把你踩过的坑变成新的检查项。

我其实挺期待看到有人把它改得面目全非。

有人拿去做读书笔记，有人拿去做旅行攻略，有人拿去做产品发布，甚至有人改出一套我完全没想过的玩法。

如果最后所有人用出来都跟我的一样，那反而说明这个 Skill 失败了。

因为它从一开始想解决的，就是"千篇一律"。

毕竟，一个强调内容驱动的 Skill，也不该把使用它的人框死。