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.show more

Skill and source here:

From one steve to another steve - thankyou. My future self thanks you. My eyes thank you, after staring bleary-eyed at plans at 1am which resemble an oxford PHD level thesis-eske plan. I will use the Sh*t out of your skill.

hell yes, lmk your feedback when you do

Pretty interesting. I've been getting more and more into visual mockups before moving forward with implementation. I like this!

awesome, if you try it lmk your feedback

I'm on opencode user so I'm trying to figure out what it would take to use there. Will let you know!

perfect, haven't tested with opencode but should work as expected ootb. lmk if any issues

This is so great. We can combine this in the workflow of @mattpocockuk grill with docs - prd - visual

@mattpocockuk 100% - great combo imo

this looks cool! thanks for releasing it and I liked the video explainer too

love these ideas what @kunchenguid did here is quite nice too — 

This is great! Been working with the plan mode in codex for a while now and it's tiring to read that LONG essay of a plan everytime. This seems like a good solution to that. However, I'm worried about the extra token usage. I had the same concern with @trq212 's html approach. On an entry level paid plan, it would eat through my usage unfortunately.

the good news is mdx is way more token efficient than html. and you can add your own reusable components for things you need too would also add that finding issues in a wireframe will be way more token efficient then finding it after the final code is generated also you can tweak the skill to your needs too. like tell it how many tokens to use for what

@trq212 Fair. Will give it a shot!

Great job Steve! HTML/CSS is becoming the new design medium. We're seeing the same in The Spiel Engine, where agents generate content banners as HTML artifacts directly from build sessions.

thanks Shayan!

Looks good. Feels like a perfect feature for @plannotator

people scroll past text walls but visuals? they stick. that's why i always diagram AI outputs first

@JohnnyNel_ 100%

One up this with

great work! I have been dealing with this problem yea

Thanks, on the other end nothing beats “be non technical and concise”

Thank you for sharing!

This is really good thank you so much. Are you planning to open source the rendering of these mdz files too without agent-native mcp server?

absolutely - its full open source over here

baller drop never once read a markdown plan file loved html so i'll give this a spin didn't even know mdx was a file type

The idea of reviewing a visual wireframe before the agent even starts building is such a smarter way to work 🔥

Very slick

That sounds awesome! Visual plans definitely make things clearer. It's great to see tools evolving to be more user-friendly. Can't wait to try it out!

lmk your feedback when you do!

This is a great idea!

thanks Mike! Try it and lmk your feedback

oh, I didn't realize this required connecting to your company's back-end. bummer.

it doesn't, its all open source. the plan app is hosted by default to be easy, but you can easily fork it, or just use local only mode source here

updating the CLI now to make this more clear, will give these options on install in the next release shortly (eta about an hour)

Really nice idea, I like it so much especially that I can comment right on the plan easily and then that can be sent to the agent. Feedback: I had some issues creating and resolving comments Also was trying the local approach but the CLI didn’t seem to have the options in docs

thanks @iss_salem - would you be able to DM me more info? the more you can share the better, can have my agents debug/fix :D

Seems it requires premium, if you can send me a DM and I can share more details

This is truly awesome. Thank you.

Every major leap in software has been an abstraction shift. Assembly → C. C → Frameworks. Frameworks → Agents. We may be entering the next phase: Humans define plans. Agents execute them.

Jesus this is insane. Testing it out now

great, lmk your feedback when you do

Very helpful, well done!

The visual recap may be more important than the visual plan. Plans help before the run; recaps decide trust after it. My test would be: can I open the recap and know which files changed, which assumption failed, and what to review first?

Always love seeing you ship, Steve. 🤝

thanks Jordan!

Interesting

Nice! And by the way, what are you using for recording screencast with zooming/focusing on active elements?

I just use quicktime recorder for recording and descript for editing

Visual plans are useful, but visual recaps may be the bigger unlock. I want the reviewer to see the schema change, API touchpoints, and UI diff before reading a wall of markdown. If the recap cannot make me reject the run faster, it is just prettier slop.

nice one

oh, this is cool! im gonna try it tomorrow! thanks!!

lmk your feedback when you do, aiming to quick ship improvements as people hit issues or areas that can improve

Bro, I freaking luv you

This looks great! Reading through the raw MDs text has been a real pain. Definitely keen to try it out .

@NavdeepBeniwal_ lmk your feedback when you do!

Will do 🙌

This is great!! Thanks for sharing. Visual planning, visual verification

absolutely, try it and lmk your feedbacak!