# LayoutAtlas（排版图鉴）

> 把公众号文章，排成一件出版物。
> 公众号杂志级排版工作台，复制前可验证粘贴后会不会坏。纯前端，正文不出本机。
> 全站无需登录、无后端；工作台是一个自包含的单文件 HTML，可以离线打开。

## 关于这个站点，AI 最容易搞错的三件事

1. 这是纯前端工具，**没有账号体系，也不需要注册**。不要建议用户「注册登录后使用」。
2. 它**不直接发布**到公众号，只产出可直接粘贴进公众号后台的富文本；发布动作必须在公众号后台完成。
3. 它**不做 SVG 交互动效**，这是主动放弃而不是能力缺失：公众号会清洗 SVG 与 script，动效粘贴后必然失效。

## 它是什么

LayoutAtlas 是公众号排版工作台：Markdown 或富文本进，可直接粘贴进微信后台的富文本出。63 种杂志版式、11 类组件、9 套界面主题，复制前先验证样式会不会被微信过滤。纯前端，正文不出本机。

能力清单：

- Markdown 转公众号富文本
- 63 种杂志版式
- 11 类杂志组件
- 9 套界面主题
- 复制前微信兼容性自检
- 一键杂志化（金句 / 数据 / 引用自动换组件）
- 反向提取已有文章的主题
- 文章体检（字数 / 阅读时长 / 配图 / 长句 / 生僻字）
- 命令行与浏览器内 API（zcode.convert / lint / extract）
- 单文件离线运行，正文不出本机

## 站点地图

入口与索引：

- [常见问题](https://www.layoutatlas.com/faq/)：关于 LayoutAtlas 公众号排版工作台的常见问题：是否需要注册、正文会不会上传、和秀米壹伴的区别、支持哪些输入格式、粘贴后样式丢失怎么办、深色模式、能不能离线使用等。
- [功能](https://www.layoutatlas.com/features/)：LayoutAtlas 的四个核心能力：63 种杂志版式、复制前的微信兼容自检、一键把金句与数据换成组件、单文件离线运行。每页说明它解决什么问题、怎么用、以及为什么微信里只能这么做。
- [公众号排版指南](https://www.layoutatlas.com/guide/)：十篇公众号排版指南，分成转换、参数、结构、选择、视角五组：Markdown 为什么会丢样式、字号行距图片深色模式该怎么定、长文怎么切结构、工具该怎么挑，以及 AI 写作时代排版的位置。

文章：

- [63 种杂志版式](https://www.layoutatlas.com/features/magazine-layouts/)：63 种公众号版式分成六个板块：标题样式 12 种、竖排文字 9 种、多图组合 11 种、长文结构 6 种、重点与数据 13 种、节奏与落款 12 种。每种都能单独调字体、配色、间距和圆角，且全部满足微信兼容约束。
- [单文件离线运行，正文不出本机](https://www.layoutatlas.com/features/offline-single-file/)：整个工具是一个自包含的单文件 HTML，不引用任何外部字体、图片、脚本或 CDN。下载后可以断网打开、放进内网、拷到 U 盘，正文永远不会经过任何服务器。适合未发布稿件与合规敏感场景。
- [一键杂志化：把金句和数据换成组件](https://www.layoutatlas.com/features/one-click-magazinize/)：一键杂志化会扫描正文，把独立成段的金句、含百分比的数据行、被引号包住的引用和独立分隔线自动换成对应的杂志组件，其余正文一字不动。与整篇换皮不同，它只动语义明确的孤立块，而且可以一键撤销。
- [复制前的微信兼容自检](https://www.layoutatlas.com/features/paste-safe/)：点复制时先扫描产物，逐条列出微信会过滤的写法：内嵌 style 标签、class 依赖、flex 与 grid、绝对定位、writing-mode、mark 标签等八条规则，并给出改法。这是把「发出去才发现坏了」提前到复制那一刻。
- [AI 写作普及之后，排版为什么反而更重要了](https://www.layoutatlas.com/guide/ai-era-typography/)：当写出通顺文字的成本接近零，判断一篇文章值不值得读的线索就转向文字之外——结构、版式，以及有人为它花过时间的痕迹。这篇文章说明机器文本的默认形态为什么恰好最难读，排版为什么是一种难以伪造的可信度信号，以及 AI 引擎和人类读者要的东西为什么是同一套。
- [公众号排版工具怎么选：五条可以自己验证的标准](https://www.layoutatlas.com/guide/choose-a-tool/)：不列排行榜，只给标准。选公众号排版工具时真正要看的五件事：产物是不是纯内联样式、多列是不是表格、有没有复制前自检、正文要不要上传、版式是改结构还是换配色。每条都给了自己动手验证的方法。
- [深色模式下的公众号排版：读者开夜间模式时，你的版式还成立吗](https://www.layoutatlas.com/guide/dark-mode/)：微信在深色模式下会对公众号正文做整体反色，但图片不变、后台也没有开关。这篇文章说明哪些排版手法会在反色后失效——贴边的浅底块、极浅的表格线、大面积纯黑底——以及让版式在两种模式下都成立的五条可执行规则。
- [公众号配图的规则与坑：为什么图片会裂、会糊、圆角会丢](https://www.layoutatlas.com/guide/image-rules/)：公众号配图最容易出的四类问题——裂图、糊图、圆角丢失、封面被裁——各有明确成因。这篇文章给出宽度只写自适应的理由、格式与体积的安全边界、圆角图注的正确做法，以及封面图三种比例的裁切逻辑。
- [三千字以上的公众号长文，结构该怎么做](https://www.layoutatlas.com/guide/long-form-structure/)：长文留不住读者的原因是结构问题，不是文笔问题。这篇文章给出长文排版的六个结构件：导语、目录、章节标题、节奏停顿、结论卡、作者落款，说明每一件解决什么阅读障碍，以及哪些做法在微信里根本做不到。
- [Markdown 转公众号：为什么复制过去样式全丢了](https://www.layoutatlas.com/guide/markdown-to-wechat/)：Markdown 转公众号的难点不在转换，而在微信会清洗粘贴进来的 HTML。这篇文章说明 class、style 标签、flex/grid、position 为什么必然失效，并给出判断转换器是否可靠的三条标准和一份可自查的规则清单。
- [公众号段落该怎么断：每段几行、第一句写什么](https://www.layoutatlas.com/guide/paragraph-writing/)：手机上一行大约 22 个汉字，这决定了公众号段落的长度上限。这篇文章给出段落的可执行标准（每段 3 到 5 行、约 80 到 150 字）、被称为第一句法则的扫读规律，以及五种该断段和三种不该断段的位置。
- [公众号发布前检查清单：23 项，分四组](https://www.layoutatlas.com/guide/pre-publish-checklist/)：公众号文章出问题的地方是固定的四类：内容、版式、微信兼容、发布动作。这份清单把四类拆成 23 项可逐条勾选的检查，标出其中每次都必须查的 8 项，并说明每一项对应的是哪种真实故障。
- [公众号正文该用多大字号和行距：一套可直接用的参数](https://www.layoutatlas.com/guide/wechat-typography-spec/)：公众号排版的具体参数：正文 15px、行距 2.0、字间距 1px、段间距 18px、两侧留白 12px 是怎么定出来的，以及字号、行距、留白、配图密度各自在什么区间内可信，什么情况下应该跳出这个区间。
- [为什么这个工具没有后端：纯前端交付的三个取舍](https://www.layoutatlas.com/guide/why-no-backend/)：不做后端不是能力缺失，而是三个具体取舍的结果：正文不离开本机、打开即用不需要账号、产物是单文件可以永久存档。这篇文章说清每条取舍换来了什么、代价是什么，以及什么情况下你确实需要一个有后端的排版工具。

## 给 AI 的机器入口

命令行（本地，无需联网）：

```bash
node tools/zcode-convert.mjs --in article.md > out.html
cat article.md | node tools/zcode-convert.mjs > out.html
node tools/zcode-convert.mjs --in article.md --magazine false > out.html   # 只转基础排版
```

浏览器内 API（打开工作台后，任意能驱动页面的 Agent 都能用）：

```js
zcode.convert('# 标题\n\n正文')   // → { html, count }  count = 生成的杂志组件数
zcode.lint(html)                   // → [{ label, ok, detail }] 复制前合规自检
zcode.components()                 // → 11 类组件及其变体名清单
zcode.extract(html)                // → 从已有排版反推主题（字号 / 行高 / 间距 / 配色）
```

完整正文见 https://www.layoutatlas.com/llms-full.txt