how to use
1. Copy the prompt. 2. Replace everything between [brackets] with your business info. 3. Paste it into an AI that writes code: ChatGPT, Claude, Codex, Lovable or the one you already use.
step 01
The base prompt
The more detail you give about your business, the less generic the result.
I want you to build a digital menu (online catalog) for my business. ABOUT THE BUSINESS Name: [business name] Niche: [e.g. homemade meals, desserts, clothing, handmade candles] What I sell: [list the products or categories, with prices if you have them] Where I deliver: [city, neighborhoods or "ship nationwide"] How people buy: order via WhatsApp at [country code + area code + number, digits only] Order days and hours: [e.g. Monday to Friday, until 10am] Payment and delivery: [e.g. card or cash on delivery, $5 delivery fee in the area] HOW I WANT THE CATALOG - Single page, designed mobile first. - At the top: name, a short line about the business and a WhatsApp button. - Products grouped by category, each with photo, name, short description and price. - An "Order" button on each product that opens WhatsApp with the message ready: "Hi! I'd like to order: [product name]". - A simple cart, so people can pick several items and send the whole order at once via WhatsApp, with the total. - Footer with Instagram, address (if any) and hours. - Visual style: [e.g. cozy and homemade / modern and minimal / colorful and fun]. - Brand colors: [e.g. olive green and cream, or "you choose"]. - Products should live in a separate, easy-to-edit file, so I can change a price, photo or product without touching the rest of the code. DELIVERY - Build it in plain HTML, CSS and JavaScript, ready to publish for free on GitHub Pages. - Where I don't have a photo yet, use a sample image and tell me the file name so I can swap it later. - At the end, explain in simple steps: how to swap the photos and how to edit products and prices.
step 02
Refine with details
Open the result and take a good look. If it came out generic or template-like, don't start over: tell the AI exactly what to change. The more specific, the better. Use only the lines that make sense for you.
I like the base, now I want to adjust a few details: - Colors: use [main color] and [accent color], with a [light / dark / colorful] background. - Font: I want [e.g. elegant serif / rounded and cute / bold and modern] typography for the headings. - Top: replace the line with "[your line]" and use this cover photo: [file name]. - Products: show the photos [bigger / as a list / in a 2-column grid] and highlight [best seller] with a "[best seller]" badge. - Copy: write the way I talk to my customers, for example: "[paste a real message of yours]". - Reference: I want something similar to [link or description of a site, profile or brand you like]. - Remove: [what bothered you, e.g. shadows on the cards, too many icons, text too small]. Keep everything working well on mobile and don't change the cart or the WhatsApp button.
Repeat as many times as you want, one tweak at a time works too.
step 03
Put it live
Ask the AI itself to guide you, in the same chat:
Now I want to put this menu online for free using GitHub Pages. I've never done this: explain step by step, from creating the GitHub account to having the link ready to put in my Instagram bio.
- Want to change something later? Ask the AI: "change the price of [product] to $[amount]" and update the files on GitHub.
Tips that make a difference
- Real photos sell more than stock photos. It can be from your phone, near a window, with natural light.
- WhatsApp number always with country and area code, no spaces or dashes. E.g.: 15551234567.
- Short description: 1 line saying what it is and why it's good. Nobody reads paragraphs on a menu.
- If something doesn't work, describe the problem to the AI the way you'd tell a person. It'll fix it.