Where it started

A dinnertime dilemma

My husband is the chef in our family. One too many times he would make a dinner and we would say "We forgot about this meal. It's so good." We didn't lack recipes, we lacked a verdict. Recipe apps only made it worse: they're built to store hundreds of meals, and a wall of forty options is as paralysing as a blank page. Nothing out there actually decided for us. So instead of downloading yet another app, I set out to build exactly the one we needed: mood-first, three picks, ready-to-cook at the top, and take it all the way to an icon on my home screen.

Designed with Claude

From a feeling to a finished and considered screen

I started by building out the logo and the design in Claude Design. From the logo, to the colors, and icons, I talked back and forth with Claude to get it just right.

Once I was happy with that, I moved on to the experience. While Claude fine-tuned the design language based off my prompting (e.g. an orange gradient for the buttons, consistent spacing across every screen, etc), I refined the user experience including the user flow, how should meal options be weighted, what information should go into each recipe, etc. Each design decision was considered and tested carefully.

Prompt > After the user initiates a shuffle, generate a ranked list of recipe recommendations using a weighted scoring model. Prioritize recipes based on a combination of factors, giving greater weight to recipes that have not been prepared recently and recipes for which the user already has the highest ingredient coverage based on current fridge inventory. For each recipe, display any missing ingredients as a concise indicator ("needs 2"). Allow users to reshuffle at any time to generate an alternative ranked set while maintaining the same weighting strategy but introducing sufficient variety to avoid repetitive recommendations.

Accessibility along the way

From the design process to the coding process, I made sure to add to the requirements all contrast, components, and interactions should be accessible. All the little details were considered including error states, focus states, and even decorative elements. Even with this is the requirements, I noted several areas that didn't meet accessibility requirements during the process and had to question Claude to ensure we weren't missing anything before shipping it.

Coded with Claude

A real recommender, grounded in your fridge

Though the interface is simple on the surface, behind it is an actual scoring engine. I prompted the behavior and Claude implemented a weighted, seeded picker

Knowing when to roll back a feature

I initially had a "save a recipe from the web" feature where I could scrape a recipe site and import ingredients and steps directly from that URL. It worked for some sites but not all as every site was marked up differently. I decided there was too much uncertainty for this feature and resulted in more error than success so I rolled it back. Now a recipe can keep a link to its source rather than attempting to scrape and import any information.

Prompt > let's roll back importing and attempting to scrape. Just have the URL saved in each recipe as needed

Claude code > the scraper and its serverless function came out; the app went fully static again.

Shipped with Vercel

From a git push to the home screen

No app store, no servers, no backend at all. MealMate is a PWA: push to GitHub, Vercel builds it, and it installs to a phone straight from the browser. And because everything runs on-device, it keeps working offline.

Push
Git push > main

Build
Vercel - Vite

Live
URL

Install
on home screen

Reflections

Building an app with Claude wasn't just a few prompts and you're done. It was dozens of intentional decisions (“make this weight lighter,” “that red looks alarming, try the logo's orange,” “the back button on the fridge screen is broken”). This exercise reminded me how diligent a designer has to remain when designing and building with Claude and the product principles utilized remain unchanged even if the build can look different now. I brought the vision and the taste; Claude did the automation and Vercel put it on my home screen. And yes we actually use it!

The end of the nightly "What should I cook?"