ChatUI: 一个晚上的 Vibe Coding 产物

周末花了一个晚上做了个小东西：ChatUI，一个用自然语言生成 React UI 的工具。

起因

最近在玩各种 AI 工具，突然想试试能不能让 AI 直接生成可渲染的 UI。不是生成代码让你复制粘贴，而是实时流式输出 JSON Schema，前端即时渲染出来。

架构设计

虽然是一晚上的产物，但架构上还是花了点心思。主要有两个核心设计：

记忆持久化

Agent 不能只靠 system prompt 里的例子来生成 UI，那样容易出错。所以设计了一个强制读取文档的机制：

• System prompt 只列组件分类，不给例子
• Agent 必须调用 read_component_docs 读取组件文档
• 文档成为唯一的 truth source

这样更新组件只需要改文档，不用动 Agent。

中间层设计

复杂 UI 不能一次性生成，所以做了个五阶段流水线：

1. 骨架生成 - 先出大框架，用 $placeholder 占位
2. 并行展开 - 多个 Agent 同时展开各个区域
3. 数据绑定 - 配置数据源
4. 逻辑生成 - 添加交互逻辑
5. UX 增强 - 规则式优化

中间层的好处是可以流式输出部分结果，用户能看到 UI 逐步成型。

后来发现

做完之后发现已经有人做了类似的东西，比如 v0.dev。不过自己动手实现一遍还是有收获的，至少对 Agent 设计有了更深的理解。

技术栈

• 后端：FastAPI + OpenAI SDK + SSE
• 前端：React 19 + Tailwind + shadcn/ui
• 110+ 组件，支持拖拽编辑

代码在 GitHub，感兴趣可以看看。

---

本文由 Claude Opus 4.5 生成，项目代码由 Claude + Minimax 辅助实现。