公众号排版网站使用说明

把一篇文章变成适合微信公众号发布的精致排版，不应该是一件反复调字号、复制样式、修图片位置的苦活。这个网站的目标很直接：先选一个好看的公众号样式，再把你的文章放进去，系统自动完成结构识别、样式渲染和公众号兼容复制。

你可以用它做什么

如果你已经有一篇文章，只需要完成四步：

1. 01在样式库里选择一个喜欢的公众号风格。
2. 02打开样式预览，确认它适合你的内容气质。
3. 03点击“制作同款”，粘贴文章、上传图片，交给 AI 识别结构。
4. 04预览满意后，一键复制到微信公众号后台。

样式预览页展示的是网页里的 HTML 效果；复制按钮输出的是尽量适配微信公众号编辑器的富文本 HTML。两者视觉接近，但技术目标不同。

第一步：浏览样式库

首页会展示多套公众号排版样式。每张卡片都包含样式名称、适用场景、缩略图和操作按钮。你可以把它理解成一个“公众号样式橱窗”：先看整体气质，再决定是否进入详情。

适合内容团队快速判断的维度包括：

• 01这套样式适合长文还是短文。
• 02标题和小标题是否醒目。
• 03图片、表格、代码块的展示是否清楚。
• 04整体气质是否适合品牌账号。

第二步：查看完整预览

点击某个样式后，会进入完整文章预览页。为了方便比较，所有样式都会使用同一篇说明书作为预览内容，也就是你正在看的这篇文章。

这样做的好处是，不同样式之间的差异会更明显：

• 01同一段正文，在不同风格里会有不同的行距、字号和段落节奏。
• 02同一个引用块，可以看出品牌样式的强调方式。
• 03同一张图片，可以看出边框、圆角、说明文字和留白处理。
• 04同一个表格和代码块，可以测试复杂结构是否稳定。

第三步：制作同款

当你看中某个样式，点击“制作同款”进入编辑页面。你可以粘贴三种内容：

你不需要先把文章整理成完美格式。第一版会让 AI 做一次结构识别：生成摘要、提取小标题、识别重点句，并判断图片应该插入到哪里。

第四步：上传图片并自动插入

文章中的图片可以直接上传。图片会存储在 Supabase Storage 中，再由系统插入到文章结构里。

如果你的文章已经包含图片位置提示，可以这样写：

## 产品界面

这里放一张样式库首页截图。

[图片：样式库首页]

AI 会把这类提示理解成图片插入点。后续生成预览时，图片会和对应段落一起进入排版模板。

第五步：AI 自动识别文章结构

系统会把原始文章转换成统一的结构化内容。这个过程不是简单套 CSS，而是先理解文章，再生成可复制的公众号 HTML。

结构识别会重点处理：

• 01标题、副标题和摘要。
• 02一级小标题、二级小标题。
• 03重点句、金句、提醒信息。
• 04引用块、列表、表格、代码块。
• 05图片位置、图片说明和上下文段落。

下面是一段示例代码块，用来测试样式是否能清楚展示技术内容：

const clipboardItem = new ClipboardItem({
  "text/html": new Blob([wechatHtml], { type: "text/html" }),
  "text/plain": new Blob([plainText], { type: "text/plain" }),
});

await navigator.clipboard.write([clipboardItem]);

第六步：复制到公众号

当你确认预览效果后，点击“复制到公众号”。系统会把最终内容复制为微信公众号编辑器更容易识别的富文本格式。

复制结果会尽量保留：

• 01图片。
• 02表格。
• 03代码块。
• 04引用块。
• 05小标题。
• 06重点句样式。
• 07段落间距和基础排版。

使用建议

为了让最终效果更稳定，建议你在粘贴文章前保留清楚的段落层次。小标题可以直接写出来，图片位置可以用方括号标注，表格尽量用 Markdown 表格或从表格工具中复制。

如果你只是想快速测试，也可以把一整段文章直接粘进去。系统会先给出一个自动识别版本，你再看预览效果是否需要调整。

一句话总结

这个网站要解决的不是“生成一个普通网页”，而是帮你把文章变成可以直接进入微信公众号后台的排版结果。样式库负责审美选择，AI 负责结构识别，复制功能负责把最终 HTML 尽量稳稳地送进公众号编辑器。