厌倦读 AI 长文?开发者让 Agent 用 Mermaid+WireMark 出图和 UI 原型
ievkz · reddit · 2026-10-22
一位程序员受够了 AI 编码 Agent 输出的 Markdown 文字墙,摸索出让计划文档「可视化优先」的完整工作流:
- 痛点:LLM 天然爱输出文字,但人要审阅、批准、提修改,读大段文字构建系统心智模型成本高
- UI 原型:对比 draw.io、Balsamiq(手写 JSON 不现实)与 PlantUML Salt(不像界面)后,选了开源项目 WireMark——DSL 简洁,人和 LLM 都易写,渲染成 SVG 线框图
- 图表:选 Mermaid 而非 PlantUML,因它是事实标准、GitHub 自 2022 年起原生支持、LLM 默认会生成
- 关键一步:在 AGENTS.md/CLAUDE.md 加规则——UI 原型用 Wiremark、解释代码用 Mermaid;plan.md 以原型和图为主而非文字;每个屏幕一个独立 Wireframe 块。此后 Codex、Claude Code、Pi 生成的 plan.md 都带清晰图表和界面草图
- 遗留问题与解法:多数查看器/IDE 不渲染 Markdown 里的 Wiremark/Mermaid,于是他开源了 blueprint4llm:blueprint4llm plan.md --out=plan.html/pdf 导出渲染后的文档,或 --serve 启动本地预览服务器
所属事件:开发者让 AI Agent 用图表与 UI 原型替代文字墙(2 条相关)→
「编程与Agent」频道最新
- Newsletter 平台送达率 96.5%、打开率 42.7%,作者证伪 vibe coding — marclou · 2026-10-22
- 开发者自研 Obsidian 插件替代 Eagle,把笔记变成素材管理器 — jiayuan_jy · 2026-10-22
- iPhone 灵动键一键唤起 Hermes 智能体，开源方案 ConcoDispatch 走红 — Teknium · 2026-10-22
- 决策模型 Jev 替代 LLM 选择步骤，实测省钱最高 87% — femke_plantinga · 2026-10-22
- 开源工具 Scrawl 爆火：录屏圈画说话，直接把问题丢给 AI agent — aronchick · 2026-10-22
- Nous Research Hermes Agent 让每次审批直接显示价格 — Scobleizer · 2026-10-22