Forest Editorial Design

01这是什么What it is

一套 Agent 指令、CSS 令牌与组件、四份 HTML 模板与离线示例。强调可读的中文技术正文、连续的文章叙述、明确的证据与清晰的局限；不用作通用前端框架，也不要求每个绿色界面都遵循它。

A collection of agent instructions, CSS tokens and components, four HTML templates, and offline examples. It emphasizes readable Chinese technical prose, continuous article narrative, explicit evidence, and clear limitations — not a general frontend framework, nor a rule every green interface must follow.

不依赖 Agent 也能用：直接浏览器打开 HTML，或复用其 CSS。九页 HTML（五份示例 + 四份模板）全部使用本地资源与系统字体回退。

It also works without an agent: open the HTML files or reuse the CSS directly. All nine HTML pages — five examples and four templates — use local resources and system font fallbacks.

02为什么需要Why

目标是让呈现一致，同时不让底层证据看起来比它实际更强。

The goal is consistent presentation without making the underlying evidence appear stronger than it is.

即兴做法

每页各自重排样式，视觉随意漂移
Restyle every page separately, visuals drift
把每段都放进装饰面板，打散长文
Every paragraph in a decorative panel
用未标注的演示指标，显得像背书数据
Unlabeled demo metrics that look like endorsements
依赖托管字体或脚本，假设读者在线
Hosted fonts/scripts, assume the reader is online

本设计包的做法

共享语义令牌与组件 CSS，一套视觉体系
Shared semantic tokens & component CSS
连续正文，配合有选择的强调
Continuous prose with selective emphasis
保留范围、状态、来源与局限
Preserve scope, status, sources, limitations
本地 CSS、系统字体与渲染好的 SVG
Local CSS, system fonts, rendered SVG

03快速开始Quick Start

无需安装依赖或本地服务器；素材解压后保持相对路径即可。

No dependency installation or local server needed; keep the relative paths after extraction.

# 打开离线总览画廊（无网络依赖）
$ open examples/index.html

# 校验公共包结构、本地引用、CSS 令牌与对比度（Python 3.9+，仅标准库）
$ python3 -B scripts/validate.py
→ PASS

# 可选：作为 Agent Skill 使用（安装/发现方式因宿主而异）
# 四份模板：templates/article | report | cards | architecture

04四种模板，一个视觉体系Four templates, one visual system

模板是有内容的布局示例，不是空白表单 —— 替换标题、正文、指标与来源注释，并在填入真实证据前保留明确的示例标注。

Templates are filled layout examples, not blank forms — replace titles, prose, metrics, and source notes, and keep an explicit example label until real evidence is supplied.

技术文章

templates/article.html

章节标签 → 标题 → 上下文 → 正文 → 结论与局限 → 来源。连续推理排版，不打断正文流。

Section label → title → context → prose → conclusion & limits → sources. Continuous reasoning without breaking the flow.

测试 / 评测报告

templates/report.html

记录范围、环境、样本、实际执行状态、断言与证据，明确标注未执行项。

Record scope, environment, sample, actual execution status, assertions, and evidence; mark not-executed items explicitly.

知识 / 洞察卡片

templates/cards.html

一卡一个核心观点、短序列、来源与限定。图片卡片以 1080px 为工作默认宽度。

One core point per card, a short sequence, source, and qualification. Cards use 1080px as a working image width.

架构 / 流程

templates/architecture.html

显式说明节点、边、方向、条件、反馈与图例；离线优先使用渲染好的 SVG，而非依赖 CDN 的 Mermaid。

Explicitly document nodes, edges, direction, conditions, feedback, and legend; prefer the rendered SVG for offline use over CDN Mermaid.

核心原则

编辑部层级：标签 → 标题 → 上下文 → 正文 → 结论与局限 → 来源
Editorial hierarchy: label → title → context → prose → conclusion & limits → sources
语义令牌优先：--fe-bg-page、--fe-text 描述角色
Semantic tokens first: --fe-bg-page, --fe-text
可读中文正文：正文 / 次级 / 强调文字加深以保证对比度
Readable Chinese body: darker text/secondary/accent for contrast
证据分级别：像素统计、推断、建议是不同声明
Evidence has levels: pixel stats, inference, recommendations differ
约束与留白：无渐变、毛玻璃、浮动投影；高密度优先拆图
Restraint: no gradients, glass, floating shadows; split figures at high density

安全与证据边界

三张原始参考图不随包分发，MIT 未授予其使用权
Three original reference images are not distributed; MIT grants no rights to them
历史 CSV/JSON 记录支持数值一致性校验，不等于恢复原图
Historical CSV/JSON records support numeric checks, not image recovery
示例报告与图表是布局演示，不是你的测试结果或业务结论
Example reports/diagrams are layout demos, not your tests or business results
校验过的对比对并非整页无障碍认证
Checked contrast pairs are not whole-page accessibility certification

05离线画廊Offline gallery

总览页展示配色、组件与来源边界；其余四页可离线打开。以下直接指向本地示例。

The overview page shows palette, components, and provenance; the other four pages open offline. Below links to the local examples.

examples/index.html — overview gallery — 总览画廊
examples/article.html — article — 文章
examples/report.html — report — 报告
examples/cards.html — cards — 卡片
examples/architecture.html — architecture — 架构
README 徽章需要联网；HTML 页面本身离线可用。README badges need network; the HTML pages are offline.