40:46Jordan Urbs · Interview
The Ultimate Solopreneur Agent Harness for AI Builders
A 40-minute live demo of a 16-agent Claude Code rig that gives one developer the output of a full team.
May 11thThe 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.
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.
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 →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.
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.
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.
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.
Things they pointed at.
00:16linkThe Unreasonable Effectiveness of HTML (Anthropic blog post)
Lines you could clip.
00:00
“I always find my eyes glazing over this huge markdown essay in my terminal.”
01:03
“Almost to the degree to which we trust the C compiler to compile to assembly reliably.”
02:41
“HTML slop every time, different every time.”
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.
00:00Plan 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.
00:17It'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.
00:29It 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.
00:40So 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.
00:58As 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.
01:17I 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.
01:24The same idea. Wireframes, interactive API specs and diffs, schemas, annotated code, etcetera.
01:29So 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.
01:46This 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.
01:53No. 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.
02:00I'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.
02:15It'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.
02:19And 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.
02:31You can add your own components, customize the components. It's MDX. It's a better format for checking in.
02:35It 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.
02:45I'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.
02:58I 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.
03:10Not 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.
03:26And 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.
03:40They 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.
03:49You 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.
04:12So, 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.
04:24You 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.
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
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
FROM THE DESCRIPTION
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
