Build a Recipe Page With AI That People Actually Cook From

TLDR: A recipe printed on paper is a static list. A recipe on a web page can scale its ingredients to any serving size, let you tap items off as you add them, and time each step for you. AI will build all of that in one conversation if you feed it the real recipe and ask for those kitchen features by name. Write the recipe in plain language, request a self-contained HTML file with a serving scaler, checklists, and step timers, test it on your phone the way you will actually use it, then publish it to a live link with every interactive part intact.

Most recipe pages online are terrible to cook from. You scroll past a life story and four ads to reach an ingredient list you cannot check off, quantities that only make one fixed amount, and a “20 minutes” that you have to keep glancing back at while you hunt for a kitchen timer. The recipe is fine. The page is fighting you.

When you build a recipe page with AI, you get to fix all of that, because the page can actually do things. This guide walks through how to prompt AI for a recipe page that earns its place on the counter: ingredients that scale with the serving size, a checklist you tap as you go, and a timer wired to each timed step. Then how to get it out of the chat and onto a link you can text to your family.

Why a recipe belongs on a web page, not a photo

A recipe is one of the few documents where interactivity is not decoration. It is the whole point. Think about what actually happens in a kitchen:

• You are cooking for six, but the recipe serves four, so you are doing fraction math with wet hands.
• You lose your place in the ingredient list and add the salt twice.
• The step says “simmer 12 minutes,” and you either overcook it or stand there watching the pot.

A web page solves each of those with a few lines of code that AI writes without breaking a sweat. Change the servings, and every quantity recomputes. Tap an ingredient, and it grays out so you know it is in. Hit a timer button on the simmer step, and the page counts down and beeps. None of that survives a screenshot or a PDF. It only works when the page is a real, running page.

Start with the real recipe, not a description

The single biggest quality lever is the content you give the AI. Ask for “a nice recipe page” and you get a generic template full of placeholder ingredients. Paste your actual recipe, and the AI builds the page around real data, which is exactly what makes the interactive features work.

Give it, in plain language:

• The dish, and who it serves. “Weeknight lentil soup, serves 4.” The base serving count is the anchor the scaler math works from.
• Every ingredient with its exact quantity and unit. “1 tablespoon olive oil, 1 yellow onion diced, 1.5 cups dried green lentils, 4 cups vegetable broth.” Real numbers let the AI wire up scaling correctly.
• The steps in order, with timings called out. “Simmer 25 minutes,” “rest 10 minutes.” Any step with a number is a step that can get a timer button.
• Anything special. Prep time, cook time, dietary notes, substitutions, a serving suggestion.

You are handing the AI a filled-in spec instead of a blank one. This is the same principle behind giving AI real material instead of vague instructions, and it is why pasting the recipe beats describing it every time.

The prompt: ask for behavior, not just a layout

Here is a full prompt you can copy and adapt. Swap in your own recipe where noted. The key is that it asks for named, specific features, not “make it interactive.”

Build me a single self-contained recipe page as one HTML file, with all
CSS and JavaScript inlined and no external libraries.

The recipe (base serving size = 4):

Weeknight Lentil Soup
Prep 10 min, Cook 35 min. Serves 4. Vegan.

Ingredients:
- 1 tbsp olive oil
- 1 yellow onion, diced
- 2 carrots, diced
- 3 garlic cloves, minced
- 1.5 cups dried green lentils, rinsed
- 1 can (14 oz) diced tomatoes
- 4 cups vegetable broth
- 1 tsp cumin
- salt and pepper to taste

Steps:
1. Heat oil in a pot over medium. Cook onion and carrot 5 minutes.
2. Add garlic and cumin, stir 1 minute.
3. Add lentils, tomatoes, and broth. Bring to a boil.
4. Reduce heat and simmer 25 minutes until lentils are tender.
5. Season with salt and pepper. Rest 5 minutes and serve.

Features I want:
- A serving-size stepper at the top (minus / plus, from 1 to 12). When
  it changes, recompute and redisplay every ingredient quantity,
  rounding to sensible fractions (1/4, 1/3, 1/2).
- A tappable checklist for ingredients and for steps. Tapping an item
  marks it done and dims it. State should survive scrolling.
- On any step that mentions a number of minutes, show a "Start timer"
  button that counts down on the page and plays a short beep at zero.
- Big tap targets and large readable text, because this is used on a
  phone with messy hands. Warm, clean, appetizing look.

Deliver it as ONE complete HTML file, nothing external.

Every block is pulling weight. The base serving size gives the scaler a starting point. The exact quantities are what the scaling math multiplies. The numbered timings are what the AI turns into timer buttons. And asking for big tap targets and messy-hands usability produces a page that works where you actually cook, not just where you designed it. Feel words like “warm, clean, appetizing” art-direct the look without you specifying a single color, and if you want more control there, a small vocabulary of feel words to art-direct AI goes a long way.

If you want the AI to reliably hand you one portable file instead of scattering code, it helps to know the tricks for getting self-contained HTML out of AI.

What to check before you trust it

The first build will look right and be slightly wrong in one or two places. Recipe pages have a few specific failure modes worth checking:

The way to catch these is to test the page the way you will use it: on your phone, imagining flour on your hands. Bump the servings to 12 and check the math. Tap through the whole checklist. Start a timer and let it hit zero. Send the AI short, specific notes, one round at a time, the same rhythm that works for iterating on any AI-generated page. Two or three rounds usually gets a recipe page from “nice demo” to “actually cook from this.”

While you are polishing, it is worth making sure the page reads well on a small screen, since that is where it lives. A quick pass on mobile-friendly AI pages covers the layout side.

Make it look like a real recipe, not a wireframe

A recipe page can be genuinely beautiful, and that matters more here than on most pages, because appetite is visual. A few things to ask for:

• One good hero photo of the finished dish. If you have a photo of your own cooking, even better. It sets the tone before anyone reads a word.
• A warm, food-friendly palette. Creams, deep greens, a warm accent. Avoid the cold blue-and-gray that AI defaults to. A short guide to color palettes for AI pages helps you pick something that reads as “kitchen,” not “SaaS dashboard.”
• Clear typography with a real hierarchy. A friendly display font for the title, a clean readable body, quantities that stand out from the ingredient names. Small typography choices are most of what separates a designed page from a wireframe.
• Room to breathe. Generous spacing, a comfortable line length, big numbers for the timer.

If you want a gallery of several dishes, you can ask the AI to build a small multi-page project with an index that links to each recipe, closer to a photo gallery layout than a single card. That comes back as a ZIP of files instead of one page, which is fine, and we will get to publishing it below.

Get it out of the chat and onto a link

Here is where most AI-built recipe pages quietly die. The page works perfectly in the chat preview, and then it stays there, because the chat is private and a file on your laptop does not help the person who wants to cook the dish.

A recipe is made to be shared, and its value is entirely in the parts that move. So the way you share it matters. Text a screenshot and you have sent a picture: no scaler, no checklist, no timer, just an image someone has to pinch-zoom. Attach the HTML file and most people cannot open it, or they open a broken copy. What you want is a real, live page at a link, with every interactive part still working on whoever taps it.

That is exactly what VisiblePage does. Paste your recipe’s HTML, or drop the ZIP if you built a whole collection, and you get a live URL in seconds. No build step, no server, no hosting account. The scaler still scales, the checkboxes still check, the timer still beeps, because you are sharing the actual page, not a flattened copy of it. It loads fast from the edge, works on any phone, and you can keep it public, make it private, or password-protect it if it is a family recipe you would rather not put on the open web.

One more thing that fits recipes especially well: the link is a single canonical address you can update without changing the URL. Tweak the seasoning, fix a step, add a photo, and everyone who has the link sees the new version. No “lentil-soup-final-v3.html” floating around anyone’s messages.

Try it now: Publish your AI-built recipe page with VisiblePage and get a live link in seconds.

The whole flow, in one table

Frequently asked questions

Can AI build a recipe page that scales the ingredients?

Yes. Ask for a serving-size control and the AI writes the JavaScript that recomputes every quantity when you change it, so 4 servings becomes 6 with correct amounts. It is a small, well-understood feature that modern models get right on the first or second try, as long as you give it the real numbers to start from.

Do the interactive parts still work when I share the page?

They work if you share the actual page rather than a screenshot or a PDF. A recipe page’s value is in the live parts: the scaler, the tappable checklist, the timer. Publish it as a real web page and every one of those keeps working on whoever opens the link. A picture of the page is just a picture.

I am not a developer. Can I really make this?

Yes. You write the recipe in plain language and describe what you want it to do, the AI writes the code, and you publish the result by pasting it into a host that gives you a link. You never open a code editor or set up a server. The skill is describing the page clearly, not writing HTML.

How do I share the finished recipe with family?

Publish it to one live link and send that. A link opens instantly on any phone, keeps the interactive features intact, and can be updated in place when you tweak the recipe, so everyone always sees the current version instead of a stale attachment.

Can I put several recipes in one place?

Yes. Ask the AI for a project with an index page that links to each recipe, delivered as a ZIP. Publish the whole ZIP as one site and you get a small recipe collection at a single link, with each recipe on its own page.

The short version

Feed the AI the real recipe, exact quantities, steps, and timings, and ask for the features that make a recipe page useful: a serving-size scaler, tappable checklists, and a timer on every timed step, all in one self-contained HTML file. Test it on your phone the way you actually cook, send a couple of short fixes, and give it a warm, appetizing look. Then publish it to a live link so the whole thing, scaler and checklist and timer, keeps working for everyone you send it to. A family recipe on a card is nice. A family recipe that scales itself and times the simmer is the one people will actually use.