I've been wrestling with AI agents for months, trying to get them to understand the exact UI layout I had in mind. You know the drill: you describe a "sidebar on the left with a main content area and a header," and the AI spits out something that looks nothing like your vision.
Then I discovered something that completely revolutionized my design conversations with AI: ASCII art layouts.
The UI Communication Breakthrough 🚀
Here's what changed everything for me. Instead of struggling with lengthy descriptions like "I need the navigation menu positioned horizontally at the top, with the logo on the left side, search bar in the center, and user profile dropdown on the right," I started showing AI agents this:
+------------------------------------------------------------------+
| logo | search bar | profile |
+------------+----------------------+------------------------------+-
| +----------------+ +-----------------------------------------+ |
| | | | | |
| | | | | |
| | navigation | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | content | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | log out | | | |
| | | | | |
| +----------------+ +-----------------------------------------+ |
+------------------------------------------------------------------+
Now that layout is out of the way, you can spend more time into prompting the actual functionality, without correcting prompts like "the navigation should be a separate component on the left of the content, remove it from the top", and iterating and wasting precious tokens to brute-force your way into the desired result.
This is but an example of what ASCII art can be used for. A more convenient way to make this work would be semantics: Sidebar, and Navbar are commonly used terms that are easily understood by AI.
My Personal ASCII Design Revolution 💡
The transformation in my workflow was incredible. I started mapping out every interface element visually before asking for code. Dashboard layouts, form designs, modal structures... But there's something else: It works in reverse.
Make the AI communicate though ASCII art
ASCII Art is a powerful form of input, but what if we could actually communicate bidirectionally?
ChatGPT-4 was still susceptible to jailbreak attempts by using ASCII art, which means that there's a deep connection between thoughts and it's representation. It can be interpreted, both ways. Generative AI was born out of inverting the "identify this" algorithm, on the basis that if it knows how to identify an input, it can also output.
ASCII art jailbreak was still working last year
Going back to my workspace, I make AI to show me as ASCII art any implementations it plans to do, as well as the plan on how is going to be connected. And if I want to, I can "edit" it's design to make clear my intentions.
How to ask for changes visually. Simplistic example
AI is likely good at communication through ASCII art because it's essentially, a matrix. Data flows like pixels in a canvas, and while images would very well work in this regard, the differences in algorithms that handle images make measurements (precise ones at least), less convenient than X characters wide, Y characters tall, with lines in the middle. It's precise.
Automating a 2 minutes task in 2 days
As the Python developer that I once was, I took on to automating the process of creating the ASCII art (arguably, the most uninteresting part of the method), in a single, free, web application. You can now draw in seconds and spend your time on the really important things.
Step #1: Draw in the canvas
Don't only use it for layouts, you can define smaller components and illustrate wrappers too!
Step #2: Export as ASCII Art
Besides all the necessary editing tools in the canvas, the export function has a "compress" capability that allows to make a big diagram as small as it comfortably can be.
Don't limit yourself!
This is not Layout oriented! Don't let me lie to you! This AI communication is not limited to user interfaces, be bold and use it to explain connections between elements, flows, and whatever feels appropriate at the time.
Click the link below to go to the App!
Pablo Dominguez
Full Stack Developer passionate about building interesting projects and learning new skills.