Designing and shipping an AI-powered meal generator using Cursor, Claude API, and a custom PRD to go from design system to deployed product.
Timeline
2026
Role
Product designer Builder
Team
- Solo
Tools
Cursor · Claude API · Figma · TypeScript · Next.js
context
The daily dinner problem.
Every day, millions of people face the same paralysing question: what's for dinner? They open the fridge, see random ingredients, and either order takeaway or make the same three meals on rotation...or maybe it's just me :(
What's Cooking? is an AI-powered meal generator that turns whatever ingredients you have into personalised recipe suggestions. It's complete with nutritional info, step-by-step instructions, and a one-tap shopping list.
my role
Design Engineer - solo, end to end
This project was a deliberate experiment in AI-assisted design and build. I owned every layer:
| Product Thinking | Defined the problem, user flow, and MVP scope before touching any tool |
|---|---|
| Design System | Colour tokens, typography scale, every component spec written in a PRD |
| Spec Writing | Produced a full PRD detailed enough to feed directly into Cursor |
| AI Direction | Used Cursor to scaffold the UI from the PRD - directing the AI, not just prompting it |
| API Integration | Wired Claude API to generate recipes from live user selections |
| Deployment | Shipped to Vercel with environment variables and production config |
design
Designing the system before the screens
Before writing a single line of code, I defined the entire design system in a structured PRD: color tokens, typography, component states, and interaction specs. This became the single source of truth I fed into Cursor, allowing AI to build production-ready components that matched the design I intended.
results
Claude API + Cursor in the loop
The app calls the Claude API for meal and recipe generation, with server-side handling for prompts, parsing, and guardrails. I iterated in Cursor with tight feedback loops: UI polish, error states, and API contracts all moved together until the experience felt production-ready and deployable.
Open in new tab - whats-cooking-xi.vercel.app/
reflection
The spec is the design.
The single biggest shift in my thinking from this project: when working with AI build tools, the PRD is no longer just documentation. It is the design. The quality of what Cursor produces is a direct reflection of how precisely you've defined the system.
Vague spec, vague output. Sharp spec, sharp output.
more info
Want to hear more about this project or how I work? I'm happy to chat :) reach out at oliviakttran@gmail.com.