Claude God Tip #12: I Taught Claude to Judge Its Own Work Visually (And Fix It)
Published: December 1, 2025 • 5 min read
Welcome to another episode of Claude God tips. Today, we are going to talk about a big tip, but in a different way this time.
You see, this Claude God tip is so big that I had to extend it to a case study. Therefore, the real goal of this blog post is to tell you what the case study is going to be about.
The Problem: I Got Lazy (Again)
In this blog post about generating sophisticated images using HTML+CSS+Javascript, I mentioned that I had a gift for non-developers. This gift is an application called ViteHero, and it is supposed to help non-developers take advantage of the same concept without having to understand code. As I mentioned in this blog post, the app is only 70% complete and still needs a lot of work to get it to 100% but I believe it is at least usable right now.
While working on this application, there were obvious visual design issues that I had to communicate with Claude and as usual, I got lazy. Most likely because I was trying to really get the app done as quickly as possible, so going through the process of having to type out every visual issue with the application was not going to cut it. I had to find another way to get this done.
Now like I always say, when you use AI to take a process that used to require 2 weeks to complete using traditional methods down to 2 days, that should not stop you from wondering how to get it down to 2 hours.
The Thought Process
Here's how my brain worked through this:
-
Claude understands the specifications of this application. I planned it together with Claude. If Claude could see this application that it had built, it would know that visually, it had done a poor job compared to the requirements I described.
-
But wait, Claude CAN see the app. I just need to take screenshots of all the pages with errors and show it to Claude.
-
But hold on, I'm too lazy to take screenshots of every single page to pass it to Claude. Is there a faster way?
-
Hmm, but I am building an application that allows users to run scripts to take pictures of single-file .html solutions to use as cover images. Can I create scripts that automatically take pictures of the current state of the website and then have it seen by Claude itself? This way, Claude identifies all the errors and fixes them itself.
-
After careful research, I saw that it was possible.
Then I thought to myself, I'm a fucking genius.
Meet Campaign Wave: The Test Application
Now I didn't want to start off testing this concept with the ViteHero application itself. I wanted to start off with a simple application, so I built one.
The application is a marketing analytics dashboard that enables marketing professionals to track, visualize, and compare campaign performance metrics. It is not a full stack application as it does not have any databases connected to it. However, it temporarily stores data in localStorage allowing users to feel like they are using a fully-functional application.
In many ways, this app is similar to the ones I built when working at Outlier training AI models to create full stack applications. But there is one major difference: unlike those single-file solutions, Campaign Wave is built the proper way - modular components, clean separation of concerns, and a scalable folder structure that would make any senior developer nod approvingly.
One thing I really like about this app is that it shows off my second favourite design trend, Neumorphism.
You can check out Campaign Wave here if you want to. I will provide more details about the app as well as comprehensive test data to use in the application when I complete the case study.
What's Coming in the Case Study
Now that you have probably taken a look at the Campaign Wave application, you can probably tell it looks good. It does, right?
Well here's what I am going to do in this case study:
- I will intentionally break multiple UI components on a separate GitHub branch of this application
- Then on another completely different branch, I will have the scripts I create automatically take pictures of the application and pass them to Claude so that Claude can evaluate the errors and fix them
The goal of this case study is to see how good this workflow is.
Are you excited about the case study yet? Cause I am! I believe this workflow will be relevant to the 777-1 experiment too. The case study will be available here when it's ready.
Current Situation: The Chromebook Struggle
Now, if you read my earlier blog post, you will know that my Dell XPS 13 took its last breath just yesterday. Very bad timing because my original plan was to have this case study ready today.
Now, I have to figure out a way to get it done either using Claude Code on the web or a GitHub Codespace because there is no way I am going to download Visual Studio and install git on a Chromebook. I am not ready for the potential trauma that may cause.
Well, I am done typing for now. It is time to get to work.
As always, thanks for reading!