Revising an AI-Generated Name Card Layout:
A Personal Reflection
I recently spent a long afternoon revising a name card layout that I originally generated using Anima (a Figma-to-code tool). It was a VERY challenging but in some ways enlightening journey. In this reflection, I’ll share how I navigated between ChatGPT and Anima’s own AI features to debug and polish the design. It’s written in a personal, narrative style – more like a story of what I experienced than a formal report.
Initial work is the design I had created at the beginning of the semester. I took it for this assignment because it included different types of content: images, shapes, typography, and links.
Version 1 was created with the Anima "Fast" version, which doesn't include AI enhancement. I used ChatGPT to adjust some bugs, but it only made it worse at some point. The code became messy at some point, and I decided to explore another AI tool, which I used for Version 2.
Version 2 is a combination of Anima AI-enhanced code, with a few takes on a fully AI-powered tool that calls Playground (Anima's service as well). The code was cleaner, and I had fewer moments to clean up. I used ChatGPT for this version as well, but it was simultaneously good and bad. Some issues were solved, but others only brought more confusion into the code, and since I'm learning to code this semester, I am not yet able to catch all the bugs myself. During this work, I definitely learned a lot. I wish I had more prompts with the Playground AI tool to be able to share more about it, but unfortunately, I run out of free prompts very fast.
ChatGPT as My Go-To for Code Guidance
From the start, I leaned heavily on ChatGPT for help. It’s my go-to tool for anything I need data assistance with. I would describe the layout issues or ask how to achieve a certain look, and ChatGPT would respond with detailed suggestions, BUT not always precise.
Anima’s Playground AI...
...was another tool I attempted to use, but that experience was short-lived. The Playground is supposed to let you iterate on your design with AI prompts, but I found the interface confusing a bit confusing at first, and proceeded with the plugin options. Little I knew Anima had limited free generations for me and it affected the Playground as well... I ran out of credits with their HTML plugin generator before I could explore more AI enhanced features. But from what I saw as the first draft, it wasn’t any close to the design I created. In the end, I decided to stick with ChatGPT, since it was clearly giving me more direct and practical help on my code.
Using Anima’s Code Enhancement (Helpful but Buggy)
Apart from the Playground, Anima offers a “code enhancement” feature (I used the thorough, non-fast option) that can refine the code
generated from your Figma design. I gave this a shot on my name card layout. The result was a mixed bag: on one hand, the HTML and CSS
it produced were cleaner in structure than the initial auto-generated code. It grouped related elements more logically and even added
some nice touches (for instance, proper semantic tags like <header> and <nav> around parts of the card). I was initially
impressed to see these improvements, thinking I might not have to do as much manual cleanup myself.
However, using the code enhancement also introduced many new bugs. Suddenly, parts of the layout that looked okay before were misaligned
or not showing up correctly. For example, a decorative ellipse that was supposed to sit behind the portrait photo ended up shifting out
of place, and some text elements inherited odd styles that didn’t match the design. It felt like “two steps forward, one step back.”
Debugging with ChatGPT:
Miscommunications and Insights
Throughout this process, ChatGPT offered some debugging support. At first, I treated it like a pair programmer: describing the issue I saw (“the text is overflowing out of the card” or “the image isn’t centering correctly”) and asking for possible solutions. While this is something I can do myself in the code, I asked for these fixes to see if it's gong to speed up my workflow. In most cases, it didnt. In some cases, it make it worse! Sometimes the chat would pinpoint a likely cause or suggest a CSS tweak. For example, when a heading was unexpectedly wrapped onto two lines, ChatGPT reminded me to check for a fixed width or a <br> tag causing the break (there was an unnecessary <br> in my code causing the split, which I then removed).
Working with ChatGPT wasn’t perfect – there were a few moments of miscommunication and confusion. At some point I even got emotional in my prompt. I perfectly understand my emotional expression is at no use while prompting requests to AI tools (see screenshot on the left). But it helped! It helped not in the coding, but to calm myself down a bit. The other example of ChatGPT being correct in the advice is when I made changes to my code (changing a positioning rule for a certain class) and then reloaded my browser to see absolutely no difference. I double-checked the code and then asked ChatGPT to find a mistake. It said the code should work and mentioned: “Your browser is caching the old CSS. Try doing a hard refresh or clearing the cache.” I figured I had to use <link rel="stylesheet" href="globals.css?v=99" />... I hadn’t realized my development server wasn’t auto-refreshing the CSS, and ChatGPT’s mention of caching being an issue was actually spot-on. This little episode taught me to not only trust the advice given but also to remember the simple stuff like refreshing the browser properly or clearing cache, but also it taught me this little v=99 hack.
AI can be a great assistance and an additional research tool but it isn’t capable yet to RECREATE designs perfectly. It did help me with some issues, but it also confused me more with others.