文章视觉系统 Demo：从文字草稿到视觉文章
用一篇 Demo 验证新的文章视觉系统：先做视觉方案，再把流程、判断、风险和结论设计成可扫读的 MDX 页面。
这篇 Demo 用来验证一个新规则：文章不是写完以后再套模板，而是写之前先做视觉编排。
这里故意不直接复用“功能矩阵、报告看板、决策树”三个现成骨架，而是学习它们的视觉气质：信息分层、标签化、产品界面感、低饱和背景和明确的阅读路径。
一篇文章，先被设计成一张可读的结构图
读者不应该先进入大段文字，而是先看到：这篇文章讲什么、怎么读、重点在哪里、最后能得到什么。
证明文章可以先做视觉方案，而不是后期套模板。
总览、流程、路由、风险、审查。
按内容重做视觉块，不照搬三个模板。
以后写文章可以按这套顺序检查。
文章视觉方案
这篇 Demo 本身先给出视觉方案，方便后面审查。
这篇文章最适合被看成一条“视觉编排生产线”
它不是功能介绍，也不是普通教程，而是在展示一篇文章从文字草稿变成视觉文章的过程。
总览面板
先告诉读者：这篇文章验证什么规则，以及视觉重点是什么。
编排流水线
展示从素材到 MDX 的五步过程，强调先设计再写正文。
内容关系路由器
说明不同信息关系应该选择不同视觉方式，而不是只套模板。
审查看板
用状态面板检查这篇 Demo 是否符合新规则。
不适合的表达方式：只放一张 Mermaid 流程图，或者把文字塞进几个普通卡片。那样仍然是在“套结构”，没有真正设计阅读路径。
1. 从草稿到视觉文章：先编排，再写 MDX
如果一篇文章只有文字，Agent 很容易直接开始写段落。新的做法是先把文章看成一个页面：哪里给读者地图，哪里讲核心逻辑，哪里收束成行动。
理解素材
先判断这篇文章到底是在讲经验、流程、决策、复盘还是教程。
输入：用户想法、旧文、规则提炼关系
把长文字拆成流程、判断、对比、分层、风险和结论。
输出：信息关系设计视觉方案
决定开头、正文、结尾分别用什么视觉块承载信息。
关键：先设计，不先写写成 MDX
用短段落承接视觉块，让页面有节奏，不把正文全部塞进组件。
输出：可读页面视觉审查
检查是否只是套模板，是否真的帮助读者理解文章。
输出：审查结论这个流程的重点不是多加几个组件，而是把“文章结构”先可视化出来。
2. 内容关系路由器：不同关系用不同表达
真正要固定的不是模板名，而是选择逻辑：文章在表达什么关系，就用什么视觉表达。
先识别关系，再选择视觉块
同一篇文章可以组合多种表达，但每个视觉块只表达一种核心关系。
有先后顺序
用流程轨道、步骤卡或 Pipeline，让读者按顺序走。
有判断条件
用决策路径或分支卡，每条路径落到明确动作。
有方案取舍
用对比面板，重点写适用边界，而不是堆字段。
有问题和风险
用风险分层或状态看板，标出风险、影响和下一步。
有系统分层
用架构面板或文件地图，说明每层职责和边界。
需要落地执行
用行动清单或检查面板，把文章结论变成可操作动作。
这就是“学习风格”，而不是“套骨架”：功能矩阵、报告看板和决策树只是三个样板间，真正要学的是这种关系识别能力。
3. 失败样式：什么时候看起来好，但其实没遵守规则
有些文章看起来有卡片、有图、有颜色，但仍然没有遵守视觉系统。常见问题是视觉块没有表达信息关系，只是在装饰。
视觉不是越多越好，关键是有没有帮读者理解
直接套三个模板
文章看起来高级，但每一节都像填空，没有根据主题重新设计。
卡片太多，信息太散
读者看到很多块，但不知道主线是什么，反而比纯文字更累。
Mermaid 过小过密
复杂关系全塞进一张图，移动端读不清，也没有分层说明。
视觉块有明确任务
总览负责建立地图，流程负责顺序，路由负责选择，审查负责结论。
以后审查文章时，不能只问“有没有可视化”，还要问“这个可视化在表达什么关系”。
4. 本篇 Demo 的自审结果
下面直接按新规则审查这篇 Demo。
结论：基本符合新规则，可以作为后续 Agent 写文章前的参考
这篇文章不是把三个模板拼起来，而是围绕“文章如何视觉编排”重新设计了一套页面结构。
先给了视觉方案
文章先说明类型、核心关系、开头、正文和结尾视觉块。
有开头总览块
开头 Hero 和指标卡让读者先看到文章目标和结构。
有正文核心视觉块
流程轨道、关系路由器和风险看板分别表达不同信息关系。
有结尾审查块
最后用自审面板把规则落到检查项，而不是只写一句总结。
视觉密度偏高
作为 Demo 可以接受；正式文章要根据长度控制模块数量。
没有照搬固定骨架
学习了产品界面感和标签化表达，但没有直接复用三个现成模板。
5. 可以沉淀给后续文章的规则
这篇 Demo 最有价值的地方不是某个 HTML 结构，而是这套判断顺序：
每篇文章先问：它最适合被看成什么图？
- 如果是流程，就设计成一条生产线。
- 如果是判断，就设计成一条决策路径。
- 如果是复盘，就设计成一个状态看板。
- 如果是教程，就设计成学习路线和检查清单。
- 如果是生活经验，就设计成情况、判断、边界和行动记录。