Why Modern Creator?

Steve (Builder.io) · YouTube

Introducing /visual-plan — rich plans for Claude Code + Codex

A 4-minute demo of two open-source skills that turn Claude Code plan output into interactive MDX wireframes, API specs, and diffs — and the argument that the plan layer is where engineers will live next.

Posted

June 16th

1 months ago

Duration

04:26

Format

Demo

educational

Views

2.9K

259 likes

Big Idea

The argument in one line.

Interactive visual plans are the next abstraction layer above code — the same leap that happened when engineers stopped reading assembly and started reasoning in C.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You use Claude Code plan mode and regularly miss implementation details buried in the markdown output.
You review agent-generated code and want a faster way to see what actually changed before it ships.
You collaborate with designers or product managers who need to weigh in on agent plans but cannot parse raw markdown or code diffs.
You want consistent, versionable plan output that does not vary based on which model or agent you are using.

SKIP IF…

You do not use Claude Code or a similar agentic coding workflow — the skills are Claude Code-specific.
You want a polished finished product — this is open source you fork, customize, and maintain yourself.

TL;DR

The full version, fast.

Markdown plan output has a cognitive cost: engineers glaze over it and miss details. Steve built /visual-plan, a Claude Code skill that renders plans as MDX with interactive wireframes, API specs, schema diffs, and annotated code. The companion /visual-recap does the same after the agent executes, so you can review before shipping to production. Both are open source on GitHub with a CLI installer and a GitHub Action that drops a visual recap comment on every pull request. The underlying argument is structural: as agents become more reliable at execution, human attention should move up to the plan layer — the same way it moved from assembly to C decades ago.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →

Chapters

Where the time goes.

00:00 – 00:13

01 · The markdown blindness problem

Hook: plan mode is powerful but raw markdown output causes engineers to miss details.

00:13 – 00:58

02 · Introducing /visual-plan

Skill demo: wireframes, interactive API specs, schema diffs, annotated code, pan-and-zoom diagrams.

00:58 – 01:25

03 · The abstraction-layer thesis

Diagram: human to plan to code to machine code. Agents are becoming as reliable as C compilers.

01:25 – 02:03

04 · Introducing /visual-recap

Same format, run after agent executes — catch mistakes before they reach production.

02:03 – 02:41

05 · Spot problems before code is written

Core frame: wireframe exposes intent mismatches text descriptions hide. MDX vs HTML comparison.

02:41 – 03:29

06 · Why MDX; open sourcing

MDX is consistent, versionable, customizable. Two GitHub repos plus CLI installer announced.

03:29 – 04:10

07 · Collaboration and trust

Share plans with PMs and designers. Trust agents more as plan clarity improves.

04:10 – 04:26

08 · GitHub Action and CTA

GitHub Action posts visual recap on every PR. Free and open source.

Atomic Insights

Lines worth screenshotting.

Markdown plan output has a real cognitive cost — walls of text cause engineers to miss details that a wireframe would expose in seconds.
The leap from markdown to HTML to MDX mirrors the historical leap from assembly to C: each layer raises where humans spend their attention.
Spotting problems before code is written is categorically cheaper than catching them in code review or hand-testing in production.
MDX with reusable components gives agent-generated plans consistency across model swaps — raw HTML output varies every generation.
Sharing a visual plan with a PM or designer is a different act than sharing markdown — it makes cross-functional review actually happen.
GitHub Actions integration closes the loop: every pull request surfaces a visual recap comment reviewers can interact with without leaving GitHub.
The compiler analogy is load-bearing: as agent execution becomes reliable, the plan becomes the spec — nobody audits assembly output from a C compiler.
Interactive API specs let you catch response shape mismatches before a single line of code runs, not after integration fails.

Takeaway

The plan is the new abstraction layer.

WHAT TO LEARN

As agents get more reliable at execution, the place where human judgment matters shifts from writing code to crafting a plan clear enough that the agent cannot misread it.

A wall of markdown looks like a plan but functions like a bottleneck — the details engineers miss are always in the middle of a long paragraph, never at the top.
Interactive wireframes expose intent mismatches that text descriptions hide: what sounds correct in prose can look obviously wrong the moment you see it rendered.
The C compiler analogy is the real thesis: if you trust the compiler, you stop auditing assembly; if you trust the agent, you stop auditing the code and start auditing the plan.
Consistency beats expressiveness for agent output — reusable MDX components produce the same structure every run, which means reviews are fast and cross-model comparisons are meaningful.
Cross-functional review only happens if the artifact is legible to non-engineers — a visual plan is; a markdown essay is not.
A GitHub Action that drops a visual recap on every PR turns code review from a text-diff exercise into a structured visual audit, which is the right interface for agent-generated code at scale.

Glossary

Terms worth knowing.

MDX: A file format that combines Markdown with JSX, allowing reusable React components to be embedded inline. Checks into a repo cleanly and renders richer output than raw HTML.
/visual-plan: A Claude Code skill that intercepts plan-mode output and re-renders it as an interactive MDX document with wireframes, API specs, and schema diffs.
/visual-recap: The companion skill to /visual-plan, run after the agent executes — produces the same visual format for reviewing what the agent actually changed.
Plan mode: A Claude Code feature where the agent drafts a step-by-step implementation plan in markdown before writing any code, giving the user a review checkpoint.
GitHub Action: An automated workflow that runs on GitHub events. Here it fires on every pull request and posts a visual recap as a comment so reviewers see a rendered diff without leaving GitHub.

Resources

Things they pointed at.

03:29linkgithub.com/BuilderIO/skills ↗

03:29linkgithub.com/BuilderIO/agent-native ↗

00:16linkThe Unreasonable Effectiveness of HTML (Anthropic blog post)

Quotables

Lines you could clip.

00:00

“I always find my eyes glazing over this huge markdown essay in my terminal.”

Universal pain point, zero setup needed→ TikTok hook↗ Tweet quote

01:03

“Almost to the degree to which we trust the C compiler to compile to assembly reliably.”

Tight analogy — implies agents are becoming infrastructure, not tools→ IG reel cold open↗ Tweet quote

02:41

“HTML slop every time, different every time.”

Visceral phrase, makes the technical choice concrete→ newsletter pull-quote↗ Tweet quote

The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

Plan mode in Cloud Code is incredible, but I always find my eyes glazing over this huge markdown essay in my terminal. And I've realized after it implements things that I totally missed some important small details that were not clear to me at first because there was just too much stuff to read, honestly. I've been experimenting with this new skill I made called visual plan.

It's somewhat inspired by that post about how HTML is better than markdown, but HTML can be slow and verbose to write. It doesn't look good checked into a repo, and 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 super visual components, diagrams, API specs that are interactive, schema design changes, annotated code, and even pan and zoomable wireframes.

So every UI lets you look at a wireframe first, comment on it, iterate, answer open questions visually and interactive, and then have the agent work. I found this to be a much more intuitive interface for me to reason about what the agent's doing. And it's really made me feel like humans and engineering is kinda entering this new abstraction phase where we reason about things at the plan level.

As long as the plan is what we want, agents are getting more and more reliable at executing on that, almost to the degree to which we trust the c compiler to compile to assembly reliably. As long as the plan is good and we make the plan clear, consumable, like easy to understand, easy for people to reason about, share, comment, etcetera, more and more we can trust the agents to implement it as expected.

I also made a skill for the reverse of this. I call it visual recap. What I can do is after the agent works, give you a recap of everything it did.

The same idea. Wireframes, interactive API specs and diffs, schemas, annotated code, etcetera.

So now when you're reviewing what the agent has done for you or looking at, like, a pull request of somebody else's code, rather than looking at a small summary or a super granular line by line mess, you can see a visual recap. Interactive, easy, intuitive. You can even share these with others to comment and then pass the comments and feedback to the agent to improve.

This has let me catch stuff way sooner. So before the agent does something, didn't realize. Because maybe the text sounded fine, but the wireframe makes me realize, oh, wait.

No. It's not what I had in mind. Or in just a more clear and visual way, I see what types of APIs it wants to create, and I'd like them shaped differently.

I'm able to catch stuff earlier as well as afterwards. In recaps of my work or someone else's work, I can make sure things that maybe aren't as obvious in the code, just looking at like React and Tailwind code, are actually what I wanted or expected. Before it goes out to production and I'm trying it out and going, oh, wait a sec.

It's not what I had in mind. That's not what I thought I told the agent. That's not what I thought I saw in the code.

And I'll be honest, it's tedious to hand test every single thing every time. Having a snapshot at a glance that's clear that I can interactively drill into, to me, been a game changer compared to just static markdown. And all of this stuff is customizable.

You can add your own components, customize the components. It's MDX. It's a better format for checking in.

It can do way more cool things, and there's consistency too. It's not just random HTML every time. This move to MDX from HTML from previously markdown, I think is the full circle that at least I needed.

I'd much rather see MDX raw files and code versus HTML. And there's so much more you can do with reusable components than generating, honestly, kinda HTML slop every time, different every time. It also means when you change agents or models, you get consistency as well.

I open sourced all of this. The skills, the application that generates MDX that you can fork and customize with your own components. You can check it out over on GitHub, install and try it out with the CLI I made, and I'd love to know your feedback.

Not just on do you like the plans or the recaps or is it handy, including the fact that you can install a GitHub action with the CLI, but also does this new idea of, like, how we reason as engineers make sense. I really believe that the plan level is really the real reasoning level that we're gonna be thinking in, talking in, and working in.

And I wanna make it clear and beautiful and a good experience. So as we trust agents more to implement correctly and other agents check to work against the plan, against the implementation spec, we can work faster. We can get our minds out of the details, like how people don't look at assembly much anymore.

They would reason at the level of c and then open up all new potential and abstractions and the ability to move fast relative to before, but safely. And I think this opens up new ways of collaborating.

You can share the same thing with your product managers, designers, etcetera. Make an extra reason about it similar to you, at least the areas they care about, like the designer or the wireframe and the PM about the behavior. And one more thing I think is cool is there's also a GitHub action I made that can run this automatically on every pull request and show you a snapshot of a visual plan right there in the comments every time you can click in and interact with to make it easier and more consumable to review pull requests.

So, again, it's not just a choice between a short description and a long granular line by line, but actually see visuals, diagrams, interactive API specs, more consumable code views, and even annotated code. Anyway, it's all free and open source.

You could find it on my GitHub. Let me know what you think.

The Hook

The bait, then the rug-pull.

Every Claude Code user knows the feeling: plan mode generates a wall of markdown, your eyes glaze over, and three hours later you find the agent missed a detail that was there all along — buried in paragraph six. Steve from Builder.io built a way out.

Frameworks

Named ideas worth stealing.

00:58model

Human to Plan to Code to Machine Code abstraction stack

Human (visual interface)
Plan (intermediate representation)
Code (agent implements)
Machine code (compiler compiles)

Engineers are moving from reasoning at the code layer to reasoning at the plan layer, the same way they moved from assembly to C. Agents handle the layer below.

Steal forAny pitch about why AI coding tools change engineering workflow, not just speed it up

CTA Breakdown

How they asked for the click.

VERBAL ASK

03:29link

“It's all free and open source. You could find it on my GitHub. Let me know what you think.”

Soft, no hard sell. GitHub repo shown on screen. CLI install and GitHub Action both mentioned as additional entry points. No subscribe push.

MENTIONED ON CAMERA

03:29linkgithub.com/BuilderIO/skills ↗

03:29linkgithub.com/BuilderIO/agent-native ↗

FROM THE DESCRIPTION

OTHER LINKSAlso linked in the description.

Storyboard

Visual structure at a glance.

hook

hookhook00:00

/visual-plan

value/visual-plan00:13

thesis

valuethesis00:58

/visual-recap

value/visual-recap01:25

spot problems

valuespot problems02:03

open source

valueopen source02:41

GitHub Action

ctaGitHub Action04:10

Frame Gallery

Visual moments.

hook

Frame at 00:04 from Introducing /visual-plan — rich plans for Claude Code + Codex

Frame at 00:08 from Introducing /visual-plan — rich plans for Claude Code + Codex

Frame at 00:11 from Introducing /visual-plan — rich plans for Claude Code + Codex

/visual-plan

Frame at 00:16 from Introducing /visual-plan — rich plans for Claude Code + Codex

Watch next

More from this channel + related breakdowns.

Video of the Day19:21

Pat Simmons · Tutorial

Claude Fable 5 Just Built the Ultimate Agent Harness

A creator builds daemon, a single Mac app that runs every AI coding agent he owns, by giving Claude Fable 5 four rounds of blunt feedback instead of writing a line of the UI himself.

July 7th

11:25

Matt Pocock · Tutorial

I Open-Sourced My Own AFK Software Factory

Matt Pocock built and open-sourced Sandcastle, a TypeScript library that runs Claude Code and other coding agents inside sandboxes to plan, implement, review, and merge whole GitHub issues without a human clicking approve.

April 30th

13:11

AI Edge · Tutorial

I Tried GLM 5.2 Inside Claude (it's f*cking incredible)

A 13-minute breakdown of the Chinese open-source model that nearly matches Opus 4.8 intelligence at one-fifth the price, and the four-step setup to wire it into Claude Code.

June 23rd

36:31

AI Andy · Tutorial

EVERY Loop From Matthew Berman's New Loop Library

A 36-minute tour of all 45 copy-paste agent loop prompts from Forward Future, with the verify/stop condition for each explained in plain English.

June 21st

Video of the Day14:34

Nick Saraev · Tutorial

GLM-5.2 is Basically Opus (For 1/5 the Price)

A 14-minute benchmark rebellion: seven live side-by-side demos, one OpenRouter API key, and a four-path procurement map that makes Opus 4.8 look expensive.

June 19th

28:32

Simon Scrapes · Tutorial

14 GENIUS Ways to Give Claude Code SUPERPOWERS

A 28-minute field guide to the setup decisions that separate Claude Code power users from people still using it like a chatbot.

June 12th