What this prompt does
This prompt generates a full recipe app UI specification covering every screen a real cook needs — from browsing and filtering to a distraction-free, full-screen cooking mode. The template's value is in its opinionated anti-patterns section: it explicitly bans scroll-during-cooking, tiny ingredient text, and account walls on recipe views. These aren't UX preferences — they're the specific frictions that kill retention in cooking apps, and baking them into the prompt significantly reduces the likelihood the AI defaults to these failure modes, rather than requiring multiple correction rounds.
The [framework] variable at the end pulls working code for the cooking mode component, including step progression and integrated timers. This means you get both a design spec and a functional starting point in one pass, rather than needing separate prompts for design and implementation.
When to use it
- You're building a recipe or meal-kit app and need to spec out the cooking mode UX before writing a single line of code.
- You want a shopping list feature that auto-groups by aisle — useful if your
[content_type]is a curated meal plan subscription. - You're designing for a specific audience (
[target_audience]= busy parents, athletes, seniors) and need dietary filters and serving scalers that match their context. - You need a Figma-ready component breakdown to hand off to a designer alongside a working prototype.
- You're adding a cooking section to an existing food or health app and need to match the screen flow to the industry-standard Browse → Detail → Cook pattern the prompt enforces.
Example output
Cooking Mode — Step 3 of 7
─────────────────────────────
Add the garlic and stir constantly
for 60 seconds until fragrant.
[ TIMER: 1:00 ▶ Start ]
← Back Swipe or say "Next" →
Ingredients used this step:
☑ 4 cloves garlic, minced
Timer is embedded inline per step. Screen-keep-on is active. No navigation chrome.
Pro tips
- Set
[target_audience]to something specific — "home cooks meal prepping for the week" yields tighter UX decisions than "everyone." The meal planner and shopping list sections are directly shaped by this variable. - Use
[key_feature] = voice navigationif your users will have wet or oily hands; the template already mentions voice-to-advance but this flag prompts the AI to expand that section with wake-word and fallback touch targets. - For
[framework], specify your actual stack (React Native, SwiftUI, Flutter). The cooking mode timer component differs significantly between them — don't let the AI default to a generic web implementation if you're building mobile. - The serving scaler in the ingredient list is handled in step 3 of the template. If your
[content_type]includes recipes with non-linear scaling (baking ratios, for instance), add a note — the default output assumes linear multiplication, which breaks for leavening agents and salt. - Pair the generated shopping list output with a grocery API integration prompt next. The grouped-by-aisle feature works best when it's backed by a real store layout, which is a separate concern this template doesn't cover.
