I have always wanted a website for AGI Comics, but never got around to making one. Enter vibe coding! I decided to give it a try, determined not to write a single line of code.
The result? I’m happy with the outcome! The process was fun and felt magical, and I have a comics website I like!
I also created some comics via image generation tools, supplying just the dialogue and scene description. I’ll share some observations on that too.
My process
I used openAI’s Codex. Why Codex instead of another tool? I have no idea!
After installing Codex on my MacBook, everything was achieved by just running it from the command line and giving it instructions. When you start Codex it looks like this:
I didn’t document all my steps, but my first prompt was something like this:
Me: I have a directory with comics images. Create a website, like xkcd, to display these comics. There should be next and previous buttons to navigate through the comics. There should be a text title associated with each comic. The site should be named ‘AGI Comics’. I’m planning to host it on GitHub pages.
With that Codex was off running. It created a directory structure (asking for permission at every step), put some place-holder images, created a json file corresponding to the comics, write build_site.py, and gave me instructions for testing the website locally.
Me: I don’t want to manually edit the json file after every image. Write a script to generate or update the json file from a directory of images, and don’t lose the edits I made in the previous file.
Easy peasy, said codex, and got it done.
Then it asked me… “Do you want keyboard navigation?”
Me: Of course, why the heck not? Go ahead and do it!
And it did that!
Then it asked … “Do you wan to set up the github pages and action scripts that will automatically deploy when you push the code?”
Me: Yes, yes of course!
After this1, all the commits, pushes and everything was done by codex. My instructions went as simple as:
Me: I changed some comic files. Rebuild and deploy.
Over time I added more functionality:
Keyboard navigation (one shot)
A description field for notes about the comic, ask an expandable menu. (one shot)
The name of the description field being configurable. (one shot).
Search box (Several iterations)
Drop-down when you click search and titles.
Fuzzy word matching
Like button (several iterations)
Share buttons (several iterations, I had to settle for what it did)
Swipe navigation on mobile (one shot)
Code to create previews while sharing on social media. (multiple iterations)
Preloading images (It said it did it, I haven’t tested).
Mechanism to control the ordering of comics images.
Changing from a redirect from agicomics.net to a custom domain setting in GitHub pages. (one shot)
Optimizing images for previews on Facebook/LinkedIn etc. and inserting the right opengraph magic.
After one of the pushes Codex did, I got an email from GitHub that all the jobs failed.
The fix? Just told codex about this failure message, and it fixed it!
What didn’t work…
For some of my requests Codex would assert that it implemented the change, but it wouldn’t be reflected in the output.
For example, I wanted the comic title to be in between the next and previous arrows, centered above the comic image. Codex never managed to get this right. The sequence went something like this:
Me: I want the title to be above the comic image, centered between the navigation arrows.
Codex: Got it. ……( Followed by a a lot of thinking, code in green/red flashing by….asking for approvals…pushing changes). Here, I made the changes you asked for. It is now nicely centered.
Me: No it’s not. The title is now left aligned. Also the image is now too big.
Codex: You are right..I’m going to do a blah blah on the CSS file blah blah. (More thinking, code flashing red and green, approvals…pushing). Here, I made the changes.
Me: No, the title has vanished, and the arrows vanished too.
Codex: You are right… I’m going to do this additional blah blah…. Here it is, it must be centered now.
Me: No, just give up, and go back to having the comic title below the comic.
Codex: Ok.
When I didn’t get what I wanted from codex after a few iterations, I just found other things that it could do that I was OK with.
Vibe-generating some comics…
All my comics were simple hand-created line drawings. I thought I’d add some visual variety by generating some of the comics from just the dialogue and textual description of the scenes. It mostly worked, but if you look carefully, you can see some the shortcomings of current image generation models in character consistency, instruction following etc.
For a 4 or 5 panel comic, I found it very hard to generate a comic without one of the following flaws:
character inconsistency.
spelling errors.
repetition or dropping of dialogue
speech bubble pointing to the wrong person
some other unexpected error.
Asking the image generator to fix one of the errors would often fix it, but then would introduce another error. Many of the comics I finally decided to go with took 10s of iterations, prompt edits, and luck.
I am not surprised because I know the current generative model architectures cannot fully solve the binding problem. But unlike my tests that are explicitly designed to show failures of binding, here I was trying to make it work, but these kinds of errors would still show up frequently.
I had a funny Amelia Bedelia moment in one of the generations from chatGPT for a comic titled “Artificial General Count”, where the speaker suddenly became Dracula!
Well, you can guess the reason, and ChatGPT confirmed it.
The Count looked friendly enough, so despite my safety concerns of this Amelia Bedelia incident, I decided to keep him as the speaker for just this comic.
Final verdict
Vibe-coding is fun and it can work well for simple apps that are mashups of many existing patterns, if you are willing to settle for ‘good enough’. Getting precise control of the output might still need editing the code and knowing what you are doing. Also, things are likely to go haywire as the codebase complexity increases.
On the other hand if you have a 100 small projects that are mashups of existing things, vibe-coding tools give you an easy way to switch between them on a whim because these tools dramatically reduce the cognitive costs of context-switching between projects.
Needed to set up password-less SSH. Codex gave detailed instructions for that.