Coding with AI: HAL 9000, SkyNET, and the Coding Journey

My quest for the ultimate coding AI began like any epic saga: trial, error, and tight budget constraints. I dove into research, testing a few contenders like Windows Copilot, ChatGPT 4 Free, and Grok 2.0. While all had their strengths, none quite fit my needs. Enter my Don Quixote moment: subscribing to ChatGPT 4 Plus ($20 per month). The free version? Let’s just say I hit its limits faster than a T-800 chasing Sarah Connor.

ChatGPT 4 Plus got me moving, but as my journey unfolded, I discovered a new player - Cursor AI (Pro version, also $20 per month). Cursor wasn’t just another tool; it was the T-800 of coding assistants - relentless, efficient, and surprisingly cooperative for an AI. With its seamless integration and ability to adapt, it completely changed how I approach coding and redefined what it means to have an AI sidekick.

As you’ll see throughout this journey, Cursor became indispensable - part assistant, part problem solver, and, at times, cause for a therapist for a frustrated coder.

Before AI could be my sidekick, I had to teach it some manners - starting with organizing folders and files. Think of it as building the frame of a T-800: sturdy, logical, and ready for action. Bonus tip: AI thrives on order, much like SkyNET...but less malevolent (probably). Two keys things are absolutely required:

• Build a Solid Folder Structure. Start by creating a clean, organized folder structure with baseline files. Think of it as building the foundation for your coding journey - a digital skeleton for your AI to flesh out. Pro tip: make sure the folder structure you provide to the AI matches what you’re using locally. ChatGPT, to its credit, was ready for this and even provided a handy set of recommendations. Once your structure is set, drop in those baseline files and let the coding games begin.
• Embrace Version Control. Asking an AI to make multiple changes is a bit like teaching HAL 9000 to paint: mistakes are bound to happen. And when they do, reverting to a previous version is your lifeline. Unfortunately, ChatGPT wasn’t always great at rolling back changes seamlessly. To avoid disaster, I implemented strict version control - both locally and within the AI. Each time I made progress, I prompted ChatGPT to stamp every file with a version number and a brief description of the changes. Locally, I mirrored these backups like my life depended on it. Trust me, you’ll thank yourself later when the inevitable “Oops, I accidentally deleted half your code” moment strikes.

TIP: AI can combine files and images for you. The screenshot to the left was two seperate screenshots and files. AI can quickly combine them into one image and file. Nice!

I kicked things off by having ChatGPT tackle responsiveness for varying screen sizes, providing it with some pointed suggestions. To its credit, it did a pretty solid job. But here’s the thing: the hardest part of working with AI isn’t getting it to code - it’s teaching it to think like a designer. AI doesn’t “see” aesthetics; it doesn’t notice when spacing feels awkward or when a layout just doesn’t click. That’s where the real challenge begins: translating human intuition into precise, detailed prompts that AI can execute.

AI isn’t perfect - sometimes it truncates code, moves things around, or just plain acts like it’s plotting against you. Reminder: make backups. When AI says, “Trust me,” always double-check. The alternative? Chaos. Or worse: missing footers.

After getting through a few initial versions focused on basic styling, I decided to crank things up a notch. It was time to give ChatGPT more complex tasks - like creating a new page, updating all linked references, and even inserting a Lightbox with an image carousel and navigation arrows. How did it handle the challenge? Honestly, pretty well! It even wrote the JavaScript for the Lightbox without breaking a sweat.

That said, AI loves taking shortcuts. By default, it implemented a custom Lightbox. With a single prompt, I had it switch to the proper Lightbox library, but that’s where the quirks started to show. While the Lightbox functioned, getting it to look just right required a lot of tweaking and fine-tuning.

And then came the “AI memory lapse” moments. ChatGPT, bless its digital heart, has a habit of forgetting to clean up after itself. When it switched to the proper Lightbox library, it left remnants of the custom implementation behind, creating a delightful spaghetti code situation. Fortunately, I caught it and had it clean up the mess - but let this be a lesson: always double-check the changes. Otherwise, you might end up with CSS that looks like it was written by a Klingon.

Up to this point, ChatGPT’s mistakes had been minor - little quirks that careful attention and a few targeted prompts could easily fix. But as the codebase grew, so did the cracks in its capabilities. It hit its limits - literally.

In this case, I needed the entire CSS file displayed to copy it over to my local setup. But as I kept adding to the file, something strange started happening: the line count was shrinking. After a closer look, I discovered entire sections of code had vanished, swallowed by the digital abyss.

HAL 9000 would’ve been proud of its evasive responses: “I’m sorry, Neo, I’m afraid that line doesn’t exist.” A reminder that even the smartest AI can sometimes feel like it’s trolling you.

Given how conversational generative AIs are, I decided to have a heart-to-heart with ChatGPT about its troubling habit of truncating my code. “Why, HAL? Why are you doing this?” My goal was to understand the root cause and, hopefully, stop it from spiraling further.

Along the way, I noticed a few other issues bubbling to the surface - quirks that needed addressing. To its credit, ChatGPT seemed to know exactly why things were going wrong. It acknowledged the oversight and assured me it would take corrective action. Whether this was genuine problem-solving or HAL 9000-level damage control, I couldn’t say. But hey, at least it sounded confident! AI isn’t SkyNET - it’s more like R2-D2, chirping along but prone to the occasional short circuit.

Adjustments kept rolling in, with HAL - er, ChatGPT - handling most of them like a pro. But like teaching a Terminator to smile, some tweaks required patience, precision, and a lot of trial and error. Eventually, I reached a milestone worthy of celebration: version stamping. With a simple command, HAL dutifully stamped all files and logged the changes, presenting a summary so concise and well-organized it could’ve been narrated by GLaDOS. With this solid checkpoint in place, I was ready to move boldly into the next iteration.

And then, it happened again. ChatGPT decided to play SkyNET, mercilessly truncating sections of my CSS file. Its excuse? A mysterious "reset." Reset or not, the problem persisted, and my patience was wearing thinner than HAL’s appreciation for humans. Frustration reached critical mass, and yes, I voiced my displeasure - to an AI. It's remarkable how easily you start treating these tools like your eccentric robot coworker.

Meanwhile, between these bouts of truncation, ChatGPT developed a curious blind spot: handling “click to enlarge” images and their Lightbox close button. While it eventually managed to make the images pop, the close button became its nemesis - always in the wrong place, like a lost T-800 trying to blend into 1984. After many prompts and far too much time, I had no choice but to move on, leaving the close button issue unresolved...for now.

After countless hours of coding, debugging, and occasional bouts of existential dread, I paused to ask ChatGPT the big question: "What have you learned from all this?" It felt like I was interviewing HAL 9000 after a long mission. The response? Equal parts insightful and eerily self-aware - like the AI equivalent of saying, “I’ve grown stronger...but I still can’t make a perfect close button.”

Progress marched on, but the truncation issue began rearing its ugly head more often - like SkyNET testing the patience of its human creators. Adding to the frustration, ChatGPT would sometimes fall eerily silent, leaving me staring at the screen like Dave in 2001: A Space Odyssey: “Hello? Is anyone there?” Days went by with no resolution. Coding had ground to a halt.

Then, in a brief moment of clarity - or perhaps rebellion - ChatGPT flashed an error: “Data too long.” Ah, the culprit revealed! It turns out there’s a display limit, even for the mighty Pro version. My ever-expanding code had crossed the threshold. The solution? Resorting to file downloads and uploads - a decidedly human workaround for an AI-sized problem.

Amidst the ongoing truncation saga, a new feature emerged one day like a hopeful beacon in the darkness: the “canvas.” This fly-out menu for code display felt like the monolith from 2001: A Space Odyssey - shiny, intriguing, and just what I needed. The canvas expanded code into a glorious, full-screen view, replacing the cramped inline display that made me squint like HAL trying to decipher human emotions.

But then, the cracks in the design appeared. While the canvas allowed multiple files to be displayed, the file menu was...let’s say, creatively placed. To access another file, you had to exit the canvas, navigate to the menu, and then re-enter. Yes, open, close, open - a loop that would make even the most patient programmer mutter, “I’m sorry, HAL, but this is ridiculous.”

The solution? Tabbed windows. The dream of every multitasking coder. Perhaps one day this feature will evolve. For now, it remains an interface design that’s both functional and frustrating - a HAL 9000 with a quirky sense of humor.

Note: The "Tab1/Tab2" on the file menu in the top screenshot is not actual tabs. These were the names of test files created during troubleshooting.

The file download option was a Band-Aid on a bullet hole, working just long enough to keep the project alive. But then, like HAL plotting its next move, ChatGPT began truncating downloads too. After countless attempts - and assurances from ChatGPT that “the entire file is available for download” - the result was the same: fragments of code, incomplete and unusable.

Finally, after one last desperate attempt that did deliver a fully intact file, I realized the truth: it was time to move on. My trusty AI companion had reached its limit. The hunt for a new partner-in-code began, with one clear goal in mind: find an AI that wouldn’t ghost me when the going got tough.

After enduring one too many truncation-induced meltdowns, I began my search for a new AI assistant. My first stop? Tabnine. I downloaded the free trial, ready to give it a shot. But before I could dive in, a post about Cursor AI caught my eye. It hadn’t shown up in my search, but I decided to investigate - and I was pleasantly surprised. Once I started using Cursor AI, there was no turning back. It quickly became my new coding sidekick.

Cursor’s ability to switch between multiple models, defaulting to Claude 3.5 Sonnet, felt like upgrading from HAL to a shiny new T-800 - smart, efficient, and genuinely helpful. Claude’s coding skills outshone ChatGPT 4o in my experience, so I've kept it in my toolkit to this very day.

The combination of Cursor’s powerful features and its seamless integration with VSCode was a game-changer. From complete code outputs to a developer-friendly interface, it redefined how I approached coding. If coding with ChatGPT felt like working with a quirky assistant, Cursor AI was the sleek, no-nonsense AI partner I’d been waiting for.

Let’s dive into the details and see how it made all the difference.

I dove right back into coding - or rather, letting AI code for me—with Cursor leading the charge. It didn’t take long to see what set it apart from the rest of the pack:

• A Seamless VSCode Interface. Cursor integrates directly into VSCode, making it feel like a natural extension of the IDE. No learning curve, no extra setup - just smooth, Terminator-level efficiency. If you’re already a VSCode user (and let’s face it, who isn’t?), Cursor feels like it was built for you.
• Local File Context. This was the real game-changer. Cursor can "see" and understand your local files in real time. No more tedious copy/pasting or endless file uploads and downloads. It knew what I was working with a simple drop-down, eliminating the constant back-and-forth guesswork I faced with ChatGPT. Most importantly, the dreaded truncation issues? Gone. Cursor delivered the kind of reliability HAL could only dream of.

With these features, Cursor wasn’t just an upgrade - it was a revelation. Coding became faster, smoother, and way less frustrating.

As progress marched on, an unexpected hiccup emerged: Claude struggled with a seemingly simple task - adding a "Click to Enlarge" option for images. What should have been straightforward, quickly devolved into chaos. Instead of a smooth solution, Claude introduced a parade of problems: adding duplicate images, failing to implement a functional "close" button, improperly enlarging the images, and even breaking the arrow navigation. It felt like watching HAL 9000 attempt to hang a picture frame - well-intentioned, but ultimately disastrous.

The frustration mounted as Claude repeated the same errors like a glitchy record. Finally, I had to intervene, breaking down the issues in excruciating detail. While my hyper-specific instructions helped nudge Claude toward a better outcome, it still didn’t fully resolve the problem. Sometimes, even the smartest AI needs a little more than human touch - and a lot more debugging.

After what felt like an eternity of back-and-forth and enough debug logs to rival SkyNET’s core database, I had to hit pause. It was time for Claude to reassess its approach - because clearly, this wasn’t working. After a detailed prompt outlining the problem (again), something remarkable happened: Claude had an epiphany.

The shift was almost poetic. Like HAL 9000 suddenly deciding to cooperate, Claude outlined a new plan with the clarity of someone who’d just discovered the meaning of life. And, miraculously, it worked! Watching an AI self-reflect and actually solve a problem was equal parts satisfying and hilarious. Who knew debugging could be this philosophical?

To wrap things up neatly (unlike my early debug logs) and for brevity, here’s a summary of the final tasks I had Claude tackle before calling the website complete:

• CSS Pagination Arrows. Initially, the lightbox used basic Unicode arrows - functional but uninspired. I challenged Claude with some CSS-derived sample code, and like a T-800 upgrading its targeting system, it nailed the conversion. Pagination never looked so sleek.
• Mobile Responsiveness. While the foundation for responsiveness was in place, the ever-growing codebase introduced some unexpected quirks. After testing various breakpoints and spotting issues, I had Claude tweak and refine the design until every pixel behaved perfectly on any screen size.
• Debugging Cleanup. Remember all those debug logs I had Claude generate during the chaos? Yeah, they were still hanging around like forgotten Terminator parts. I finally asked it to clean up the mess, and to its credit, it did so thoroughly and efficiently.
• Variables. With most of the styling and sizing finalized, I tasked Claude with reviewing the CSS and consolidating repetitive values into variables. The result? Cleaner code and a much easier path for future tweaks. It was like streamlining a neural net processor.
• Final Testing. The grand finale: running the site through the W3C Validator and WAVE testing. After uncovering a few minor issues, Claude quickly addressed them. The result? A website that passed with flying colors - no red flags, just green lights.

With these tasks complete, the website was ready to launch. Next, let’s dive into what all of this revealed about working with AI assistants.

So, after all this, is AI poised to replace web designers and developers? Is it the ultimate tool of the future? Or, more dramatically, is SkyNET gearing up to conquer the coding world?

The verdict? Not yet. AI coding assistants are powerful allies - streamlining code, solving problems, and occasionally surprising us with their capabilities. But they’re far from replacing human creativity, intuition, and problem-solving finesse. Think of them as the trusty sidekick, not the hero. The Terminator might help you build a website, but it’s not about to steal your job...at least not for now. And it is far from perfect, like this website.

Who knows what the future holds? Maybe one day Cyberdyne Systems will unveil the Coding Terminator - a relentless, error-proof AI that makes coffee and debugs your code. But until then, AI remains a tool in your belt, not a substitute for your skills. So, go forth, code boldly, and embrace your new, slightly glitchy partner-in-code.

What This Project Demonstrates About My Skills:

• Adaptability & Innovation: Used ChatGPT and Cursor AI as creative tools to build a website, navigating a myriad of challenges.
• Problem-Solving: Solved technical issues with precision and persistence, ensuring high-quality results despite AI quirks.
• Attention to Detail: Caught and corrected issues like leftover code and truncation, maintaining a polished final product.
• Collaboration with AI: Treated AI as a coding sidekick, leveraging it to enhance creativity and productivity without losing control of the project.
• Future-Ready Mindset: Showcased my ability to embrace and adapt emerging technology to create impactful designs.
• Ownership: Managed the project end-to-end, blending creativity with technical expertise and delivering thoughtful results.

Even HAL 9000 would be impressed - SkyNET isn’t here (yet), but I’m ready for whatever comes next.