Vibe coding is when you let AI write the program while you direct the UI. If you are working with an AI to build an app and you don’t know what programming language it is written in, then you are definitely vibe coding. If you are tweaking the code your AI writes, then maybe you are “agentic engineering.” I was definitely vibe coding to make The Art of Rules.
I’d been carrying this idea for a Drawing Meditations tool in my head for over a year. I have programmed in the distant past but I am not a programmer. My plan was to make the app free for people to use, so spending money to hire a programmer was not in the cards (so to speak). And Tod was not interested in doing this with me. Fortunately, I have a AI intern on hand. In just a couple of days, Claude (Sonnet 4.6) coded up The Art of Rules for me.
But coding was simply the penultimate part of the execution. It took me a full year to figure out what I was trying to do, what audience I was creating this for, how to guide the user to the desired outcome. Once I had a solid grasp of the project, had written a 20 page “book” and designed a deck of cards, I explained the idea to Claude. I described what I wanted, uploaded the cards and text and I got a working prototype in moments.
It was ugly and incomplete, but I giggled with delight. My idea came to life in an interactive way and I didn’t have to struggle with the coding. As a designer, I understood the prototype was just the starting point to refining this into a useful tool.
Each improvement was a conversation. I explained the desired outcome (for example, users should have access to an explanation of the cards). Then Claude suggested a few options or simply added the function into the prototype. Most of the work was like that: direction, testing, asking for fixes or checking in on possibilities, shifting my ideas. No programming.
With each update, Claude provided an HTML file that I could paste into my WordPress embed block. That helped me to see what the app looked like on the page. I used familiar WP tools to preview on the desktop, phone, etc. Painless.
Claude is a decent project partner. There’s a depth of knowledge in the LLM about similar apps that I do not have and honestly I doubt a human programer would have, either. And Claude didn’t mind working at 5 am when I was ready to get going.
Even Claude’s over-enthusiastic (syncophantic?) praise was useful. I was doing something a little outside my comfort zone. Claude told me I was doing good all along the process and that was empowering.
Good notes, all clear. Let me tackle these.
Good catch — clean logic.
Good instincts on all three points.
Love this thinking — show don’t tell.
One thing that surprised/impressed me was when Claude did layout math. It’s exactly what I would have been drawing out on my scratch paper, but didn’t have to. I’d pointed out that the tooltips were too wordy for the space available. Here’s what Claude wrote in response:
Good call. Let me measure the card dimensions and figure out the math before rewriting anything.
The drawn cards are 200×112px, the view-all cards are 160×90px. The tooltip sits at the bottom of the card with 6px padding each side. At 11px font size, roughly 22px line height, we have about 2 lines of space in the small cards before it overflows.
At 160px wide with 8px padding each side, the usable text width is 144px — at 11px font that’s roughly 22–24 characters per line. Two lines = ~45 characters total maximum including the card name line.
Let me check the worst offenders and then rewrite all 48 to fit.
There were many UI tweaks. Claude is not a UI guy. I directed a ton of fussing with alignment. Moving buttons around, adding functionality, finding ways to make the possible actions more obvious. Did I get everything perfect? No. But 17 iterations later I decided it was good enough to launch without embarrassment.
You can try the finished (is it ever finished?) webapp here: https://drawingmeditations.com/art-of-rules-2/
I felt okay vibe coding The Art of Rules because it has zero security or privacy concerns – no cookies, no data retained. If I’d included anything that could be a security issue, I’d have combined forces with a human programmer for a sanity check on the code Claude wrote.
Choosing to vibe code meant that a year-long thought experiment became a real-life tool. It worked out well for me, partly because my background in tech and design, along with decades of working with programmers and engineers, helped me to understand how to direct the AI in a way that made the process quick and easy.
If you try The Art of Rules, let me know what you think whether it’s feedback on UI or a a story about how the rule cards helped you do a drawing. That’s one thing that Claude isn’t going to do for me…
