Design for a Better Start in Cooking.

My Role

UI/UX Designer

Timeline

Mar 2026

Introduction

Mise is a cooking companion designed for people with limited cooking experience. Rather than simply providing recipes, it helps users make use of the ingredients they already have and turn them into everyday meal possibilities.

Problem

Many people buy ingredients for specific recipes, only to be left with items they don't know how to use afterward. For people with limited cooking experience, figuring out what to make with what's already at home can be difficult, leaving ingredients forgotten and eventually wasted.

01 — Card Stack

From leftovers to a plan, at a glance.

Deciding what to cook with the ingredients already at home feels slow and overwhelming.

Recipe cards generated from ingredients already at home
Swipe through meal options for the day
Apply filters to generate a new set of options

02 — Pantry

Know what you have without opening the fridge.

It's easy to lose track of what's actually in the kitchen once ingredients pile up.

Ingredients organized by category for easy browsing
Tap any item to edit its emoji, name, quantity, or unit
Decide what to cook based on what's actually available

03 — Generate

Turn any combination of ingredients into a recipe.

Knowing what's available doesn't automatically turn into a recipe.

Long-press any ingredient to enter Generate mode
Select multiple ingredients to cook with
Refine results through the search bar and filters

04 — Cooking

A step-by-step guide, from prep to plate.

Following a recipe while cooking often means losing track of steps, prep, or timing.

Step-by-step guidance through the cooking process
Ingredients needing prep tracked with checklists
Timers appear automatically with the correct duration set

Reflection

This was the first project where I went beyond Figma and used vibe coding to build a highly interactive prototype. With Claude Code, I turned the swipeable card stack into something I could actually drag, test, and refine with real input.

Adjusting the movement, rotation, and spring-back helped me catch interaction details that were difficult to evaluate in a static mockup. It showed me how vibe coding can help bridge the gap between designing an interaction and actually experiencing it, giving me a faster way to test and refine ideas early in the design process.