Stop Letting AI Code Your GUI Before It Draws It

A developer recommends having AI coding agents render GUI plans as ASCII art before writing any code, arguing that text descriptions of layouts lead to mismatched expectations. In a real example from Command Center, an agent's initial rendering of a session-porting dialog was far off until the developer reviewed an ASCII sketch and gave feedback. The tip is aimed at catching layout, sizing and control-scope mistakes during the planning stage rather than after implementation.

You want to make an interesting screen in your app. Diligently, you describe it to the AI. The AI finishes. You try it, and it’s totally off. You wanted the buttons to be tightly packed, but instead they’re spread out. Most of the screen is taken up by stuff that’s not very important, with the important bits in a tiny pane to the side. And heck, when you asked for a “Reset button,” it gave you something to reset the whole app instead of just this one screen. Don’t you wish you could have fixed it earlier? People might tell you “just correct it in plan mode.” But when the plan says “I’ll create a line of buttons at the top and the settings controls below,” you might not realize that you and the AI have completely different ideas of what the layout and size of these things will be. Describing something visual in words is hard. A picture is worth 1000 words. You might not want to spend the effort to create that picture. But for the AI’s, it’s fine. So ask your AI to give the plans for the GUI as ASCII art. Here’s a real example: You’re working on a feature in Claude Code, and then you hit your session limit. But you still have quota left in Codex. Wouldn’t it be nice if you could finish it up in Codex? In Command Center, we are building a feature that lets you do that, taking a session started in one agent, and continuing it in another agent. That requires porting the records of the coding agent session from one coding agents’ format to another. This isn’t always possible, and we need this clearly communicated in the GUI. Here’s the prompt I gave explaining the dialog: Despite having explained it in great detail, the AI’s initial rendering was way off: Some short feedbacks later, and it understood what I wanted: If I had simply let it write some text in the plan based on what I told it, I would have thought the plan was good. And I would have been sorely disappointed. What else can you do to do better at getting the AI to do what you want before it starts writing code? Liked this post? I've written a few dozen more tips and explainers on AI coding. We've been sending them to everyone who signs up for a free account at cc.dev //cc.dev , the platform for turning vibed code into production code. Follow me on: Twitter: https://x.com/jimmykoppel https://x.com/jimmykoppel LinkedIn: https://www.linkedin.com/in/jimmy-koppel/ https://www.linkedin.com/in/jimmy-koppel/