HTML Effectiveness
11 种模式，将 AI 输出转化为人们真正会阅读的可视化文档
模式目录
01
并排对比
在网格布局中对比方案、设计或选项，突出推荐项。
02
代码审查
带颜色标记的代码变更、严重性标签和边注。
03
架构图
SVG 方框、箭头和交互式工具提示的架构图。
04
设计系统
色板、字体层级、间距令牌和组件目录。
05
幻灯片
全视口演示，支持滚动吸附、键盘导航、演讲者模式和 36 套主题。
06
交互式讲解
通过可折叠章节、标签页代码和实时演示来教学概念。
07
状态报告
周报，包含健康状态标签、迷你图表和风险表。
08
流程图
可点击节点、详情面板和 SVG 路径的流程图。
09
SVG 插图
自包含图形，使用可复用的 CSS 描边和填充类。
10
自定义编辑器
看板，支持拖拽、切换开关和导出功能。
11
仪表盘
指标和 KPI，包含迷你图、增量指示器和颜色编码状态。
12 ✦ 新增
实时工件
可刷新仪表盘，支持模板+数据结构、自动刷新和实时数据绑定。
13 ✦ 新增
视觉特效
视觉时刻 — 故障标题、液态背景、漏光效果和戏剧性英雄区。
实时演示
模式 1：并排对比
模式 2：代码审查
10- const token = jwt.sign(payload, secret)
10+ const token = jwt.sign(payload, secret, { expiresIn: '1h' })
严重
缺少 TTL — 安全风险
模式 4：设计系统
模式 7：状态报告
模式 11：仪表盘
模式 12：实时工件仪表盘
模式 13：视觉特效 — 故障标题
视觉时刻
视觉时刻
视觉时刻
每页一个戏剧性时刻 — 故障、液态、漏光
在 GitHub 上查看
v3.0 特性演示
#14 状态覆盖演示
#15 表单验证状态机
#16 三旋钮调参面板