Nono.MA
Sketch.Nono.MA

The machine codes for me

AI has reached a point where you can write working software in minutes without knowing what technologies were used.

‌Create a web app I can drag an image into and display the image with a glitch filter. Claude Sonnet 4 starts writing code.

The Glitch Image Filter App label appears below my prompt, next to an atom icon that references web technologies. Claude writes CSS, HTML, and vanilla JavaScript for me. After a few minutes, a futuristic web interface shows up. An animated floating folder icon prompts me to Drop an image or click to browse. I drag an image, but it doesn't work. I click and select an image—it works! Four sliders let me adjust the intensity, RGB shift, scan lines, and noise values. As I move the sliders, my image is displayed with the glitch filter.

‌The RGB Shift filter makes the image blue, it doesn't shift RGBs—I tell Claude.

‌You're absolutely right! The RGB shift filter is broken - it's not properly shifting the color channels and is making the image blue instead. Let me fix the RGB shift algorithm to actually separate and offset the red, green, and blue channels.

The app works now as expected. The RGB channels are shifted as I move the slider.

Make the aesthetics minimal and subtle. No superfluous colors. The interface centers attention on the output image, while the rest of UI components are relegated to the background.

I can now see Claude's code edits as it adjusts the styling.

Now we are talking; This looks much better.

I see a dropdown at the top of the web app with v8 · Latest selected. I can go back to previous versions, some of which Claude hasn't even shown me. It took Claude Sonnet 4 six iterations to simplify the style.

Before everything works, I need to request a few fixes.

The reset button should bring the slider values to 0. Fixed. The app doesn't load my image when I drop it. Not working yet. I'm using Google Chrome on macOS, and the drop area doesn't catch image files when I drop them. It doesn't work.

I skim through the code and can see what it's doing at a high level. I understand the code and am familiar with the tech stack—HTML, CSS, JavaScript. But I don't know how the glitch filters work at a low level. And, at this point, I don't have to.

Now, at v19, I hit Publish.

The Glitch Filter app is online.

May 27, 2025
Nono Martínez Alonso


My sketches and stories, in your inbox.

One email per week. No spam ever.

Pencil sketch of Nono Martínez Alonso.