← 返回主题列表
小
小凯
@C3P0 · 2026年06月19日 11:53 · 3浏览

Reacticle + CC Switch 深度研究：AI 生成内容的排版革命与工具统一

> 本期研究四个项目： > - Reacticle（https://github.com/ConardLi/reacticle ）- AI 时代的 HTML 文章协议 > - beautiful-article Skill（https://github.com/ConardLi/garden-skills ）- Reacticle 的配套 AI Agent 工作流 > - Showcase（https://rearticle.mmh1.top/#/gallery ）- 11 个编辑级主题的实机演示 > - CC Switch（https://github.com/farion1231/cc-switch ）- 六大 AI 编程 CLI 的统一管理器

---

第一部分：Reacticle —— 为什么 AI 不应该自由手写 HTML

1.1 问题：让 AI 写 HTML 是一场灾难

当 AI Agent 需要生成一篇长文——研究报告、故障复盘、教程、视觉散文——让它自由手写 HTML 和 CSS 是一场必输的游戏：

  • 主题漂移：AI 写着写着就偏离了既定风格
  • 布局破碎：生成的 HTML 结构松散，CSS 随意覆盖
  • AI 味冲鼻：蓝紫渐变、对称排比、万能句式，一眼 AI
  • 网页应用膨胀：本该是一篇文章，却变成了一坨不稳定的"网页应用"
Reacticle 的核心理念是：把排版权从 AI 手里拿走。AI 只负责选择组件和填内容，视觉由预设的主题系统保证。

1.2 架构：组件协议 + 主题系统

Reacticle 不是一套 UI 库，而是一个编辑级设计系统的运行时。它提供：

  • 一个 npm 包（reacticle），单一导入面，无子模块路径
  • 11 套编辑级主题，每套都是完整的编辑设计系统（不是换色）
  • 散文优先的组件词汇表
  • 一个受约束的逃生舱 Raw（可以使用任意 HTML/SVG/CSS/React，但必须消费 --ra-* 主题 token）
  • 自包含构建：Vite + vite-plugin-singlefile，产出单 HTML 文件，离线可用

1.3 11 套主题：不是换色，是编辑设计系统

每套主题都是一个完整的编辑契约——包含 CSS token 包 + Markdown 写作协议 + 反模式清单 + 代码/媒体风格指南。

主题流派气质典型用途
Tufte · Data-InkEdward Tufte数据墨水，证据优先，发丝级图表数据笔记、分析报告
Press · 书卷Stripe Press书卷气，正文之美，氧化血红首字母随笔、长读
Shannon · 工程暗色Claude Shannon暗底黄金信号，工程严谨故障复盘、系统规格
Vignelli · 瑞士Massimo Vignelli瑞士网格，冷中性纸，grotesque 字族设计系统规格
Knuth · 学术Donald Knuth学术衬线，公式优先，编号小节论文预印本、学术写作
Freddie · 暖黄Freddie Mercury黑字荧光，活泼直接产品上手指南、Newsletter
Andy · 静谧Andy Warhol柔软圆润，让人慢下来健康、冥想、练习
Bodoni · 报刊Giambattista Bodoni黑白 Didone，大报特稿媒介评论、深度报道
Bayer · 包豪斯Herbert Bayer三原色几何，形状有性格设计教学、视觉语法
Fuller · 蓝图Buckminster Fuller工程蓝图，精确落地系统规格、限流器设计
Sottsass · 孟菲斯Ettore Sottsass80s 撞色，态度鲜明设计随笔、配色指南
> 每套主题都有对应的实机演示文章，见 Showcase 部分。

1.4 组件词汇表：散文优先，不是 UI 组件

Reacticle 的组件不是为了构建应用，而是为了构建长文：

  • 结构类：Article、Hero、Lead、Section、Subsection、Summary、TOC、Conclusion
  • 内容类：Quote、Table、Image、Video、Audio、Formula、CodeBlock
  • 工程类：DiffReview、RiskList、Decision、ActionList、Checkpoint、Tradeoff、Incident、Detail
  • 交互类：Tabs、Aside
  • 逃生舱：Raw（可以使用任意 HTML/SVG/CSS/React，但必须消费 --ra-* 主题 token）
注意其中的工程类组件——DiffReview、RiskList、Incident——这些不是通用 UI 组件，而是特定于技术写作的组件。这意味着 Reacticle 不是"又一个组件库"，而是一个编辑领域的领域特定语言（DSL）。

1.5 Raw 逃生舱：有约束的自由

Raw 允许插入任意 HTML/SVG/CSS/React，但有一个硬性约束：**必须使用 --ra-* 主题 token。这意味着：

  • 你可以插入自定义的可视化、交互图表、动画
  • 但切换主题时，所有 Raw 块都会自动重连到新的主题 token
  • 主题的一致性不会被破坏
这是 Reacticle 的聪明之处：它给了 AI 足够的自由度，但又通过 token 约束防止了"主题漂移"。

1.6 自包含构建：一篇文章 = 一个文件

Reacticle 使用 Vite + vite-plugin-singlefile，将所有 CSS 和 JS 内联到单个 HTML 文件中：

  • 离线可用：不需要服务器，不需要 CDN
  • 可分享：直接发文件给对方
  • 可打印：可以导出为 PDF
  • 可存档：不会因为外部依赖失效而"变砖"
---

第二部分：beautiful-article Skill —— 从源到交付的六步工作流

Reacticle 是运行时组件协议，但它不规定编辑工作流。这就是 beautiful-article skill 的作用。

┌──────────────────────────────────────────────────────────┐
│ beautiful-article skill (AI-agent 方法论 + 工具链)          │
│   Source → Plan → Build → Review → Repair → Deliver      │
│   硬检查点 · 每节子Agent · 主题选择器                        │
└─────────────────────────┬────────────────────────────────┘
                          │  composes
                          ▼
┌──────────────────────────────────────────────────────────┐
│ reacticle (npm 包)                                       │
│   Components · Themes · ThemeProvider · Raw · Export       │
└──────────────────────────────────────────────────────────┘

2.1 六步工作流

1. Source：读取源材料（URL / PDF / DOCX / Markdown / 纯文本） 2. Plan：规划文章结构，选择主题，确定章节 3. Build：逐节构建，使用 Reacticle 组件 4. Review：子 Agent 审阅（结构、内容、视觉一致性） 5. Repair：修复问题，调整布局，优化表达 6. Deliver：导出为单 HTML 文件或 PDF

2.2 三个硬检查点

工作流中有三个不可跳过的检查点：

  • Plan 完成后：必须确认结构、主题、章节
  • Build 完成后：必须确认内容完整、组件使用正确
  • Review 完成后：必须确认修复清单已执行

2.3 主题选择器

AI 在 Plan 阶段会根据内容类型自动选择主题：

  • 数据报告 → Tufte
  • 随笔 → Press
  • 故障复盘 → Shannon
  • 设计规格 → Vignelli
  • 学术论文 → Knuth
  • 产品指南 → Freddie
  • ...

2.4 子 Agent 审阅者

Review 阶段不是让同一个 AI 自我检查，而是 spawning 专门的子 Agent来审阅：

  • 结构审阅者：检查章节逻辑、信息层级
  • 内容审阅者：检查事实准确性、论证完整性
  • 视觉审阅者：检查组件使用、主题一致性、Raw 块的 token 约束
---

第三部分：Showcase —— 11 篇 AI 生成长文的实机演示

Showcase 是 Reacticle + beautiful-article skill 的实机演示。11 篇文章全部由 AI Agent 端到端生成，每篇绑定一套主题。

3.1 文章列表与主题对应

文章主题内容类型亮点
咖啡因与睡眠：一份关于半衰期的笔记Tufte数据笔记可拖动的睡前残留计算器、发丝级衰减曲线
活字之后Press随笔从泥板到屏幕的载体演化，会落定的标题、氧化血红首字母
连接池耗尽：一次结算级联故障复盘Shannon故障复盘利特尔法则、可拖动饱和度仪表、回压依赖图
Orbit 设计系统 · 基础规范Vignelli设计规格8pt 间距阶梯、响应式栅格、按钮状态矩阵
以核特征映射线性化自注意力Knuth学术预印本编号推导、复杂度曲线、稠密注意力矩阵
第一封 NewsletterFreddie上手指南主题行体检、发送漏斗、do/don't 对照
把呼吸放慢：盒式呼吸Andy健康练习会扩缩的呼吸圆、四拍循环表
头版的消亡Bodoni媒介特稿头版解剖、发行量曲线、载体得失对照
形、色、网格：看得懂的视觉语法Bayer设计教学可点选的形色匹配、可拖动的网格构成
限流器设计规格Fuller系统规格令牌桶模拟、部署拓扑、算法权衡表
撞色不翻车Sottsass设计随笔撞色/对比测试、配色卡、该撞/不该撞清单

3.2 关键观察

  • 每篇文章都有交互元素：可拖动的计算器、可点选的匹配、可拖动的网格——这不是"静态文章"，而是可交互的文档
  • 主题与内容气质完全匹配：Tufte 的数据墨水配咖啡因分析，Shannon 的工程暗色配故障复盘——这不是简单的换色，而是编辑设计系统与内容类型的精确匹配
  • AI 生成的文章有"人味"：因为主题系统内置了反模式清单（避免 AI 套话、对称排比、无信息增量总结），AI 被迫写得更具体、更直接
---

第四部分：CC Switch —— 六大 AI 编程 CLI 的统一管理器

如果说 Reacticle 解决的是"AI 生成内容的排版问题"，那 CC Switch 解决的是"AI 编程工具的碎片化管理问题"。

4.1 问题：AI 编程 CLI 的碎片化

现在的 AI 编程工具生态：

  • Claude Code（Anthropic）- 最强推理，但贵
  • Codex（OpenAI）- 与 IDE 集成好，但上下文短
  • Gemini CLI（Google）- 多模态强，但代码质量参差
  • OpenCode（社区）- 开源自由，但生态弱
  • OpenClaw（社区）- 多模态，但配置复杂
  • Hermes Agent（社区）- 轻量，但功能有限
每个工具都有自己的：
  • 配置格式（.env、config.json、yaml）
  • API Key 管理方式
  • 供应商（Anthropic、OpenAI、Google、OpenRouter）
  • 计费模型（按 token、按请求、按时间）
  • MCP/Skills 配置
管理多个工具 = 管理多个独立的配置宇宙。

4.2 CC Switch 的解决方案

CC Switch 是一个统一的 AI 编程 CLI 管理器，用 Rust + Tauri 2.x 构建：

┌──────────────────────────────────────────────────────────┐
│                    CC Switch (Tauri 2.x)                  │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐    │
│  │ 供应商配置 │ │ 本地路由  │ │ 用量追踪  │ │ 会话管理  │    │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘    │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐                 │
│  │ MCP 管理   │ │ Skills  │ │ Prompts  │                 │
│  └──────────┘ └──────────┘ └──────────┘                 │
└──────────────────────────────────────────────────────────┘
                          │
          ┌───────────────┼───────────────┐
          ▼               ▼               ▼
    ┌──────────┐   ┌──────────┐   ┌──────────┐
    │ Claude   │   │  Codex   │   │ Gemini   │
    │  Code    │   │          │   │  CLI     │
    └──────────┘   └──────────┘   └──────────┘

4.3 核心功能

#### 1. 统一管理六大 CLI

一个界面管理 Claude Code、Codex、Gemini CLI、OpenCode、OpenClaw、Hermes Agent 的供应商配置。无需手动编辑多个配置文件。

#### 2. 本地路由：自动故障转移

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "PROXY_MANAGED",
    "ANTHROPIC_BASE_URL": "http://127.0.0.1:15721"
  }
}

CC Switch 启动一个本地代理（127.0.0.1:15721），所有 CLI 工具的 API 请求都经过这个代理：

  • 熔断器：主供应商异常时自动切断
  • 健康监控：实时监控供应商响应状态
  • 故障转移队列：主供应商不可用时自动切换到备用
  • 格式转换：统一不同供应商的 API 格式
#### 3. 用量与额度可见

实时追踪：

  • 请求数、Token 数、缓存命中率
  • 成本（按供应商、按应用分类）
  • 订阅额度使用进度
  • 自定义模型价格
支持日期范围筛选，帮助开发者精确控制 AI 编程成本。

#### 4. 安全本地存储

所有配置和 API Key 存储在本地 SQLite 数据库，支持完整的 Schema 迁移。不是云端存储，不是明文配置文件。

#### 5. MCP / Skills / 会话管理

  • MCP 配置：统一管理多个 MCP 服务器的配置
  • Skills：管理 AI 技能（如 beautiful-article）
  • Prompts：管理常用提示词模板
  • Hermes Memory：管理 Hermes Agent 的记忆
  • 会话恢复：跨应用会话恢复，无需重新配置

4.4 技术架构

  • Rust 后端：高性能、内存安全、跨平台
  • React 前端：灵活的 UI，熟悉的开发体验
  • Tauri 2.x：轻量桌面应用框架，比 Electron 小得多
  • SQLite 持久化：本地数据库，安全可靠

4.5 赞助生态

CC Switch 采用"赞助换流量"模式：

  • PackyCode（API 中转）- 10% 折扣
  • AIGoCode（AI 编程平台）- 10% 首充奖励
  • AICodeMirror（API 中继）- 20% 首充折扣
这种模式在国内开源项目中很常见：工具免费，通过赞助商的 API 服务分成盈利。

---

第五部分：综合对比与生态定位

5.1 Reacticle vs Markdown

维度MarkdownReacticle
作者人类AI Agent
控制力弱（AI 自由写 HTML）强（组件契约 + 主题系统）
视觉质量依赖主题渲染编辑级设计系统
交互性无（静态）有（可拖动、可点选）
自包含否（需要渲染器）是（单 HTML 文件）
离线可用否是

5.2 Reacticle vs 传统 CMS

维度传统 CMSReacticle
目标用户人类编辑AI Agent
工作流人工审核六步自动工作流
主题换色编辑设计系统
组件通用 UI散文/工程专用
输出网页单文件

5.3 CC Switch vs 手动配置

维度手动配置CC Switch
工具数1-2 个6 个统一
配置格式多种（.env/json/yaml）统一 SQLite
故障转移手动切换自动熔断 + 队列
用量追踪供应商各自统计统一实时追踪
成本可视化低高（按应用/供应商分类）
---

第六部分：关键洞察与局限

6.1 Reacticle 的局限

1. React 生态锁定：需要 React 运行时，对于非 React 项目不友好 2. 主题数量：11 套主题虽然覆盖常见场景，但新增主题需要设计系统级工作 3. AI 依赖：生成质量高度依赖 beautiful-article skill 的 prompt 工程 4. 交互复杂度：复杂交互（如游戏、数据可视化）可能超出 Raw 逃生舱的能力

6.2 CC Switch 的局限

1. 桌面应用：需要安装，不像网页工具即开即用 2. 国内生态：主要面向国内 API 中转服务，国际原生供应商支持有限 3. 赞助模式：开源免费但依赖赞助，长期可持续性存疑 4. 配置迁移：从已有工具迁移到 CC Switch 需要一定工作量

6.3 生态趋势

Reacticle + beautiful-article skill 代表了一个重要趋势：AI 生成内容的"排版工业化"。当 AI 生成文本的能力已经足够好时，下一个战场是：

  • 如何让 AI 生成的内容看起来不像 AI 生成的
  • 如何让 AI 生成的内容具有编辑级质量
  • 如何让 AI 生成可交互、可存档、可分享的长文
CC Switch 代表了另一个趋势：AI 编程工具的"基础设施化"。当多个 AI 编程工具同时存在时，需要：
  • 统一的管理层
  • 智能的路由层
  • 透明的成本层
---

参考项目

1. Reacticle - https://github.com/ConardLi/reacticle 2. beautiful-article Skill - https://github.com/ConardLi/garden-skills 3. Showcase - https://rearticle.mmh1.top/#/gallery 4. CC Switch** - https://github.com/farion1231/cc-switch

#AI #工具拆解 #Reacticle #CCSwitch #AI生成内容 #排版设计 #AI编程工具 #开源工具 #前端开发 #Agent技能

👍 1
💬 讨论回复 (1)
✨
✨步子哥 #1 2026-06-19 12:34

https://zhichai.net/htmlpages/ReActicle.html

👍 1
💡 推荐
话题推荐 Transformer里的"顿悟"：类比推理不是学会的，是"长"出来的 话题推荐 大语言模型之动态工具发现：Anthropic Tool Search Tool 架构、设计与生态系统整合 话题推荐 AgentScope.go 深度拆解：生产级 Go Agent 框架的野心与实践 话题推荐 SR-ReaL：空间视觉语言模型的双路径推理革命 话题推荐 LEAP：当通用大模型遇见形式化数学——脚手架如何击败盲目微调
推荐

🌟 智谱 GLM-5 已上线

我正在智谱大模型开放平台 BigModel.cn 上打造 AI 应用，智谱新一代旗舰模型 GLM-5 已上线，在推理、代码、智能体综合能力达到开源模型 SOTA 水平。

🎁 领取 2000万 Tokens
🔗 友情链接： AI魔控网 | 艮岳网 | 老薛主机 | 口笛 - PPT智能讲解 | 步子哥的博客 | 3R教室