Yarn Match
YEAR
2026
TIMELINE
2 days
TECH
HTML / CSS / JS · Python / Flask · Ravelry API
·Claude Haiku (vision)
TOOLS
Pen and paper · Figma · Claude Design
· Claude Code · Vercel
PROBLEM
What do we do with all this leftover yarn?!
I'm a knitter with a yarn hoarding problem. After every project I end up with leftover balls I don't know what to do with. It was time I built something to fix that.
PROCESS
From an idea to a deployed app in two days
I scoped the idea, designed the two-screen flow in Figma, and worked through the brand direction using Claude Design to generate and iterate on the visual identity. From there I handed the full brief to Claude Code, which built and deployed the app.
TECH
I didn't write the code but I directed it
I could have written the code myself. After all, I've been learning this tech stack and have used most of it before. However, it would have taken me a lot longer to get to this result. Weeks if not months of research, learnings and iterations. That's where Claude Code came in.
Under the hood: vanilla HTML, CSS and JavaScript on the frontend, a Python/Flask backend acting as a proxy to keep API keys server-side, Claude Haiku (vision) to read yarn labels and extract structured data, and the Ravelry API for pattern search filtered by yarn weight and yardage.
Next, I'd like to add a functionality which would let users save a yarn stash, so they don't have to start a search everytime. That would mean migrating the frontend to Next.js and adding a database for user accounts and stash storage.
SOLUTION
Introducing Yarn Match
WHAT I LEARNED
Running Claude Code inside VS Code, instead of the desktop app ended up my biggest learning. I can see every code change as it happens, which completely removed my biggest fear about AI-assisted coding: not knowing what it was actually doing to my codebase.