正在打开每日关注
正在打开每日关注
用 MDX 生成图表、API 规格、Schema diff 与线框,让人先审计划再交给 Agent 执行。
Introducing /visual-plan - a skill to generate rich, visual plans for Claude Code and Codex. Plan mode in Claude Code is incredible. But I always find my eyes glazing over when it gives me this huge markdown essay in my terminal. I found I can make much better visual plans with reusable components. So I made a skill called `/visual-plan`. It generates plans as MDX with visual, interactive components. Diagrams, interactive API specs, schema design changes, annotated code, and even pan and zoomable wireframes. So for any UI work, you can look at a wireframe first, comment on it, iterate, and then have the agent work. I’ve found this to be a much more intuitive interface for reasoning about what the agent is doing. It’s somewhat inspired by that popular post about how HTML is better than Markdown. But HTML can be slow and verbose to write. And it doesn’t look good checked into a repo. This has really made me feel like humans and engineering are entering a new abstraction phase, where we reason about things at the plan level. As long as the plan is good, agents are getting more and more reliable at executing on it. Almost to the degree that we trust the C compiler to compile to assembly reliably. Plans are the new intermediate representation. I also made a skill for the reverse of this, called `/visual-recap`. After the agent works, it gives you a recap of everything it did. Same idea: wireframes, interactive API specs and diffs, schemas, annotated code, etc. So now when you’re reviewing what the agent did for you, or looking at a pull request of somebody else’s code, you can see a visual recap instead of just reading a wall of text. It’s all free and open source. You can find it on my GitHub. Will link to it in the reply because we all know how dumb these algorithms are with links.
是什么
这条推文提出 /visual-plan:把 Agent 的长篇终端 Markdown 计划转换成包含图表、交互式 API 规格、Schema 变更、标注代码和可缩放线框的 MDX 文档;/visual-recap 则在执行后用同样的媒介复盘结果。画面通过 HTML→MDX 对照、ProjectHosting 字段级 diff 以及 ADDED/MODIFIED 标记,具体展示了这种审阅方式。
核心设计 它把“计划”定义为人和 Agent 共同阅读、评论、迭代的中间表示:先用视觉结构降低理解成本,再让 Agent 执行;完成后把过程和变更重新可视化。MDX 兼顾组件可组合性、交互能力与仓库内可维护性,弥补纯 HTML 过于冗长、纯 Markdown 缺少交互的两端。
关键洞察 价值不只是生成漂亮文档,而是为 Agent 工作流增加可观察、可讨论、可追溯的界面层,尤其适合 UI、API 和数据模型这类关系密集的任务。
边界与风险 视觉化计划可能制造“看起来正确”的错觉,不能替代测试、权限审查和运行验证;还需关注 MDX 渲染安全、无障碍、版本 diff 可读性,以及计划与代码之间的漂移。