<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: James Koppel</title>
    <description>The latest articles on DEV Community by James Koppel (@james_koppel_3aa6e45753b4).</description>
    <link>https://dev.to/james_koppel_3aa6e45753b4</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4140296%2F0cc12667-8a35-472d-a539-cb54025d8411.jpg</url>
      <title>DEV Community: James Koppel</title>
      <link>https://dev.to/james_koppel_3aa6e45753b4</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/james_koppel_3aa6e45753b4"/>
    <language>en</language>
    <item>
      <title>Stop Letting AI Code Your GUI Before It Draws It</title>
      <dc:creator>James Koppel</dc:creator>
      <pubDate>Thu, 24 Sep 2026 03:16:58 +0000</pubDate>
      <link>https://dev.to/james_koppel_3aa6e45753b4/plan-better-guis-1ec</link>
      <guid>https://dev.to/james_koppel_3aa6e45753b4/plan-better-guis-1ec</guid>
      <description>&lt;p&gt;You want to make an interesting screen in your app. Diligently, you describe it to the AI.&lt;/p&gt;

&lt;p&gt;The AI finishes. You try it, and it’s totally off.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;You wanted the buttons to be tightly packed, but instead they’re spread out.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;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.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;And heck, when you asked for a “Reset button,” it gave you something to reset the whole app instead of just this one screen.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Don’t you wish you could have fixed it earlier?&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Describing something visual in words is hard.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;So ask your AI to give the plans for the GUI as ASCII art.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Here’s a real example:&lt;/p&gt;

&lt;p&gt;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?&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Here’s the prompt I gave explaining the dialog:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fcxty7ddwt0safjbpfcy9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fcxty7ddwt0safjbpfcy9.png" alt=" " width="800" height="973"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Despite having explained it in great detail, the AI’s initial rendering was way off:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6mpb0ndfdoonev3yal20.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6mpb0ndfdoonev3yal20.png" alt=" " width="800" height="609"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Some short feedbacks later, and it understood what I wanted:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fun2a4q5ds4sjgf9ltyl8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fun2a4q5ds4sjgf9ltyl8.png" alt=" " width="800" height="599"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;And I would have been sorely disappointed.&lt;/p&gt;

&lt;p&gt;What else can you do to do better at getting the AI to do what you want before it starts writing code?&lt;/p&gt;

&lt;p&gt;&lt;em&gt;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 &lt;a href="//cc.dev"&gt;cc.dev&lt;/a&gt;, the platform for turning vibed code into production code.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Follow me on:&lt;/p&gt;

&lt;p&gt;Twitter: &lt;a href="https://x.com/jimmykoppel" rel="noopener noreferrer"&gt;https://x.com/jimmykoppel&lt;/a&gt;&lt;br&gt;
LinkedIn: &lt;a href="https://www.linkedin.com/in/jimmy-koppel/" rel="noopener noreferrer"&gt;https://www.linkedin.com/in/jimmy-koppel/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>frontend</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
