The Evolution of an AI Coder
My journey into AI development has mirrored the rapid evolution of the technology itself. Just over a year ago, I was wrestling with Claude 3.5 Sonnet to build basic websites. Its 8,000 token output limit felt like a straitjacket, forcing me to constantly break down code into tiny, unmanageable chunks. The free tier was so restrictive I had to juggle three separate accounts just for a two-hour coding session.
Then came Google's models. Gemini 2.0 Pro was a huge leap forward, allowing me to build FNote v1. But the real game-changer was Gemini 2.5 Pro (who I'm working with right now to write this page). With a massive 65,000+ token output limit and an almost nonexistent free-tier restriction (150 requests/minute!), the floodgates opened. I could now generate thousands of lines of code for complex projects like FNote v2 without the AI breaking a sweat. It’s a completely different world.
Meet the Contenders
Choosing the right AI is crucial. They each have distinct personalities and strengths. For up-to-the-minute rankings, LiveBench.ai is an excellent resource. Here’s my "Pokedex" entry for the big three:
ChatGPT: The Popular All-Rounder
The friendly kid everyone knows. Its biggest strength is customization; you can tailor its personality and response style to your exact needs. It has a massive feature set including web search, image generation, and a "deep research" mode that consults dozens of sources. It's a fantastic, versatile tool, but its coding-specific limits can be frustrating for large projects.
- Tone: Informal-Semi-Formal (but highly customizable).
- Input/Output Limit: ~32k input / 4k output.
- Speed (Free): Fast (o4-mini).
- Free Limits: Limited prompts, 3 image gens/day, 5 deep researches/month.
Gemini: The Brute-Force Coder
My go-to assistant for development. Gemini's strength is raw power. With a 1 million token input and 65k output limit, it's nearly impossible to overwhelm. It can write thousands of lines of high-quality code in a single go. While it lacks ChatGPT's deep customization, its sheer coding capacity and analytical prowess are second to none for serious projects.
- Tone: Formal and comprehensive.
- Input/Output Limit: 1,048,576 input / 65,536 output.
- Speed (Free): Medium-Fast (2.5 Pro).
- Free Limits: 150 requests/minute (practically unlimited for solo dev). unlimited image generation (flash 2.0 image gen), limited image gen (imagen 3.0)
Claude: The OG Specialist
The ol' reliable. Claude was once the king of coding, and some benchmarks still place its raw coding ability slightly ahead of others. However, it has fallen behind in versatility and user-friendliness. Its strict free tier and lack of features like image generation make it a niche choice today, best for users who need its specific flavor of code generation and nothing else.
- Tone: Semi-Formal.
- Input/Output Limit: ~128k input / 8k output.
- Speed (Free): Medium.
- Free Limits: Very restrictive, even for basic chat. No image generation.
My Workflow: A Live Example
How do I actually code with an AI? Well, you're looking at the result of the process right now. I'm not writing this HTML by hand; I'm instructing Gemini to do it. Here is a summary of the prompt I used to generate this very page:
Initial Command: "Let's create the AI coding page. It shares a similar layout as the OBS page, and will be written in `./tutorials/ai/ai.html`."
Content Breakdown:
- A short story on AI progress (Claude -> Gemini).
- A link to `livebench.ai`.
- An interactive "Pokedex" comparing ChatGPT, Gemini, and Claude with specific details and stats for each.
- An explanation of the workflow, analyzing this very prompt.
- A "Tips & Tricks" section.
- A story box about the TSB wiki minigame failure with Claude.
By providing a clear structure, existing files for reference (`obs.html`), and detailed content points, I guide the AI to produce exactly what I envision. I act as the architect; the AI is the builder.
Tips & Tricks
- Go Wide, AND Deep: Open multiple tabs of Gemini in AI Studio and assign them all with the same task. Thanks to the lenient rate limits, you can have multiple shots of getting the correct code simultaneously. Gemini can usually 1-shot the code, but this tactic is useful for complex requests.
- Universal Adapter (`.txt`): If you need to send a file type the AI doesn't support, just convert it to `.txt`. I do this constantly to feed the AI entire project structures and code files for context. I even had Gemini write a Python script to automate this for me.
- The "Nuke & Pave" Method: Sometimes, trying to make an AI debug its own broken code is a waste of time. If a feature isn't working after one or two attempts at a fix, it's often faster to scrap the new code, go back to the last working version, and re-prompt the AI with a fresh, clearer instruction. The Universal Adapter script is also useful for keeping backups.
- AI-ception: Use the AI to improve your prompts. If I'm stuck on how to improve or what to add on FNote v2, I'll ask Gemini to create an "Action Plan." It will often break down the problem into logical steps, suggesting UI/UX improvements and features I hadn't considered, which I then turn into new prompts.
A Quick Story: The Minigame That Couldn't Be
Before Gemini even existed, I was using Claude Sonnet 3.5 to build a small wiki website for TSB. One feature I was excited about was a contributions page with a fun twist: a top-down 2D arena where contributors' avatars would fight. It was ambitious, and Claude was... not up to the task.
No matter how many times I prompted, the result was a buggy mess. The physics were wrong, the UI was broken, and it just wouldn't work. Each attempt ate into my tiny free-tier prompt limit, making the process incredibly frustrating. The project was too complex for the AI's limited context and output size. It's a perfect example of a creative idea that was simply impossible to realize with the tools of the time, but would be a straightforward task for a model like Gemini 2.5 Pro today.