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 React.
SOLUTION
Introducing Yarn Match
WHAT I LEARNED
AI tools are genuinely useful for getting a solo side project deployed fast, but the design thinking still has to come first. Knowing what you're building, why, and what the flow should feel like is what makes the prompting work. Without that, I would have just been generating noise.