First Tools on tools.codeandlife.com: AI-Generated Zip Image Viewers
Wed, Dec 17, 2025 in post web development AI artificial intelligence tools javascript
After setting up tools.codeandlife.com last week, I needed to actually create some tools for it. Simon Willison's detailed example of using LLMs for code inspired me — his https://tools.simonwillison.net/ has over 80 single-file HTML/JS apps, all built by prompting LLMs.
My first tool idea: a browser-based zip image viewer. I just updated JZipView (a native C app), and thought a pure HTML/JS version would be a nice complement.
Two AI-Generated Viewers
I had both Claude Opus 4.5 and ChatGPT 5.2 Pro create their own versions from the same basic prompt. The results:
- zipview-opus45 — Claude Opus 4.5's take
- zipview-gpt52pro — ChatGPT 5.2 Pro's version
Both needed some polishing with Claude Code (using Sonnet) to get them working similarly — handling drag-and-drop, keyboard navigation, and the usual edge cases. But the core functionality came out surprisingly well from both models.
- You can drag a .zip file over, and it will use
import { unzip } from 'https://esm.sh/fflate@0.8.2';to decompress it and show a gallery view - Left click on an image opens it in "fit to view" mode
- Another left click will open 1:1 mode and mouse gets captures so you can just mouse move around the image
- Right click goes back to "fit to view" and again to grid mode
- Arrow keys and scroll wheel allow to browse through the images
Making the tools easy to find with Github Actions generated README.md
Simon Willison has Python scripts that auto-generate his tools index from git commits. I adapted a similar approach with two scripts:
gather_tools.py — finds all .html files and extracts their last commit info:
def get_last_commit(file_path):
result = subprocess.run(
["git", "log", "-n", "1", "--format=%H|%aI|%B", "--", file_path],
capture_output=True, text=True, check=True,
)
# Parse hash, date, and message
...
build_index.py — generates README.md from the JSON data, with alphabetical index and date-sorted details. I did not do all the fancy stuff that Simon did, just wanted to have the latest commit message per .html file for the time being.
A GitHub Actions workflow runs these on every push, so the tools index stays current automatically.
Try Them Out
Drop a zip file with images onto either viewer and use arrow keys to navigate. They both use JSZip for extraction and render images client-side — nothing gets uploaded anywhere.
The code is at https://github.com/jokkebk/tools
Notice: This post was co-written with Claude Opus 4.5 using Claude Code.