2026年11月14日 · 阅读 —

Forest Editorial Design 开源：让 AI 排版有一套可复用的规则

AI 工程实践

Forest Editorial Design 开源：让 AI 排版有一套可复用的规则

让 AI 把一篇技术文章排成网页，需求不能只停在“好看一点”。正文要连续阅读，报告要交代执行状态，架构图要看清条件和回流。同一份内容换一种产物，也不该连配色、字体和信息顺序都重新商量。

Forest Editorial Design 是作者开源的一套静态设计包，也可以作为 Agent Skill 使用。它把暖纸色、森林绿和少量陶土橙，整理成可复用的样式、模板与工作规则，面向技术文章、测试与评测报告、知识卡片和架构图。

目前 README 标注版本为 1.0.0。不使用 AI 也能用：直接打开 HTML，或者取用 CSS。日常查看无需构建、启动服务或填写 API key。

[在线主页与示例入口] https://xsoway.github.io/forest-editorial-design/

长文先保住阅读，报告先保住事实

这套主题选了深森林绿 #193C35 作为主色，页面底色是暖纸白 #F5F2EA，辅以鼠尾草绿和少量陶土橙。细线、留白和标题层级负责组织信息，不使用渐变、毛玻璃或浮动投影。

但配色只是其中一部分。

技术文章模板要求保留连续正文，只在必要的位置使用观点框。长段推理需要读者记住前一句，若每段都装进卡片，视觉上的分隔也会打断论述。references/layouts.md 给文章正文设置的最大宽度是 760px，把阅读顺序放在组件展示之前。

报告模板里，通过率的位置可以先空着。

templates/report.html 明确写着“未执行真实测试”；通过率位置是“不适用”，旁边解释“没有分母，不计算比例”。复制模板时，不需要先删掉一组看似真实的通过率。

页面可以先排好，结论必须等证据。

这个选择尤其适合技术评审和评测材料。缺环境、缺样本、缺运行记录时，可以交付结构完整的页面，但页面必须把这些缺口留在读者能看到的位置。标题变得正式，不会让尚未执行的检查自动完成。

规则、样式、模板各管一件事

仓库里的主要资源可以按用途理解：

资源使用时负责什么
SKILL.md、references/告诉 Agent 怎样选产物、组织内容、保留来源与限制
assets/design-tokens.css、assets/components.css统一颜色、文字、间距与组件样式
templates/、examples/提供文章、报告、卡片、架构图的起点和查看入口
scripts/validate.py、VERIFICATION.md检查公开包的静态属性，记录已有验证范围

Skill 是交给 AI 编程助手读取的任务说明。这里的说明要求先确定产物类型，再读取相应规范、复用模板和 CSS；输出报告时保留实际状态，输出架构图时交代节点、方向、条件和回流。

这些是对 Agent 的要求，实际是否被宿主发现、是否正确执行，还需要在使用环境中确认。

CSS 中的 token 可以理解成有用途名称的样式变量。比如 --fe-bg-page 表示页面背景，--fe-text 表示正文颜色。复用页面时，通过变量统一调整，比在每一处写死色值更方便维护。

其中还有一个细节：--fe-raw-* 保留实测或历史配色，推荐的正文变量则另行定义。历史辅助色 #7D857B 不直接作为小字正文的默认颜色，当前 --fe-text-secondary 使用的是更深的 #59675E。

从参考材料里取到一个颜色，并不意味着它适合放在所有背景上。取色记录和正文可读性，需要分别判断。

先看模板，不必急着安装 Skill

最短的上手路径，是先打开在线主页里的示例，看看这套主题是否适合当前内容。

取得仓库源码并解压后，在浏览器里打开 examples/index.html。保留 HTML 与 assets/ 的相对位置，本地页面才能找到 CSS 和 SVG；只复制一个 HTML 文件，可能会丢失样式。

四类模板的入口分别是：

  • 长篇技术内容：templates/article.html。
  • 测试、评测或评审报告：templates/report.html。
  • 单个观点与短步骤：templates/cards.html。
  • 系统关系与流程：templates/architecture.html。

模板已经填有示例内容，不能只改标题就当成自己的产物。正文、指标、状态和来源说明都要逐项替换；真实材料不齐时，继续保留示例标识。

如果要交给 Agent 使用，仓库 INSTALL.md 记录的 Codex 用户级目录是：

~/.agents/skills/forest-editorial-design/SKILL.md

将完整项目目录放到宿主支持的位置，避免再多嵌套一层，也不要覆盖已有同名副本。按宿主要求刷新或重启，确认能够发现并实际调用 $forest-editorial-design。其他兼容助手的发现目录可能不同，不能照搬路径就认定安装完成。

不依赖 Agent 的使用方式也完整保留。静态网站可以先加载 design-tokens.css，再加载 components.css；要交付单文件 HTML，则按同样顺序把 CSS 内联进去，并嵌入所需 SVG。最终文件不能链接到某台机器的 Skill 安装目录。

架构示例附带预渲染 SVG，因此查看页面不需要 Mermaid 运行库。只有修改 Mermaid 源码、重新生成图时，才需要支持 Mermaid 的工具。

模拟一次：把客服方案整理成评审材料

以二手车平台的智能客服方案为例。评审材料需要说明用户咨询怎样进入客服流程、什么时候转人工，以及哪些内容还没有得到真实业务验证。

以下是模拟示例，用于说明组织材料的方法，不代表项目已接入客服系统或完成业务测试。

先提供材料，而不是先要求生成一张效果图：

材料类型：智能客服方案评审
当前状态：方案说明，尚未进行真实业务验证
目标：说明车辆咨询与人工接管的处理流程
已知规则：超出知识范围或用户明确要求时，转人工
现有证据：流程说明；无真实会话运行记录
需要交付：评审报告、流程图、一张人工接管规则卡片

这里先确定材料状态。没有运行记录，就不设置成功率、解决率或响应耗时，报告标题也不写成上线验收通过。

在已正确安装并发现 Skill 的宿主中，可以使用这样的请求。

模拟提示词：

使用 $forest-editorial-design，将以上材料整理成评审用 HTML。
以报告模板组织范围、方案、现有证据和未验证项。
另用架构模板表达咨询、回答判断与转人工的流程。
用卡片模板单独呈现人工接管条件。
所有页面保留“模拟方案，非业务执行结果”标识。
不得新增运行指标、测试通过结论或来源。
交付可离线打开的产物，保留材料出处。

报告页面承载完整上下文。范围里写清只讨论车辆咨询和人工接管，证据区说明目前只有流程材料。状态与来源不能被移到一段很难找到的小字里。

流程图要保留超出知识范围和明确要求人工这两个转人工条件。Forest Editorial Design 提供图表规范与模板；具体客服流程来自输入材料。材料没有给出的判断规则，应标为未定义，不能让 Agent 为了把图画满而补出来。

卡片只提炼人工接管条件，不承担整份报告。这样同一条规则有了适合快速阅读的版本，详细依据仍能回到报告查找。

产物的预期收益是共用视觉规范、减少反复描述排版的工作；这里没有测量节省了多少时间，也没有业务指标对照。

验收时，先对照输入逐项核对：有没有新增指标，未验证状态是否可见，转人工条件是否被改写，来源是否还在。然后再打开实际文件检查手机宽度、中文折行、图表可读性和离线资源。这两类检查都需要做，包校验不能代替内容验收。

校验通过，具体通过了什么

仓库提供的标准库校验命令如下，来源是 README 的快速开始章节：

python3 -B scripts/validate.py

它需要 Python 3.9+，检查公开包结构、本地引用、CSS token、受支持文字色对、数值记录一致性与文件哈希。成功时退出码为 0，并输出 PASS 摘要。

这条命令不验证客服方案是否正确，也不证明某个 Agent 已经调用了 Skill。

仓库在 2026 年 11 月 14 日的 VERIFICATION.md 中记录：本地公开源码包的五个示例和四个模板，曾在 Chromium 下按 360px、1440px 两种宽度完成 18 项页面与视口检查，检查了页面级横向溢出、缺失图片和捕获到的控制台错误等问题。

这是仓库记录的验证范围，本次介绍未重新运行这些检查。记录也明确没有覆盖 Safari、Firefox、Windows/Linux 字体表现、微信导入和实体打印；不能据此承诺所有环境显示一致。已声明文字色对的对比度检查，同样不等于整页无障碍认证。

开源许可也有明确范围。项目原创指令、CSS、模板、文档与脚本采用 MIT，复用时需保留适用的版权与许可声明。三张原始参考图因尚无可核实的再分发授权，不随公开包提供；留下的历史 CSV/JSON 数值记录，也不能代替原图去独立重做像素采样。

给内容一套固定的呈现方式

如果文章、报告和架构图需要共用暖纸色与森林绿主题，可以先选一个模板，用一份现有材料判断它是否合适。只需要 CSS 时，也不必为了用这套样式再引入 Agent。

排版规则固定下来以后，讨论可以回到内容：这句话有没有依据，这个流程少了哪个条件，这份报告现在能下什么结论。

森林绿可以统一，业务结果不必全绿。

来源

GitHub：https://github.com/xsoway/forest-editorial-design #开源项目 #AgentSkill #技术写作 #ForestEditorialDesign

Continue reading

继续阅读