{"id":"vibe-mkt-landing-page-builder-prompt","audience":"marketing","category":"coding","track":"coding","technique":"constraints","title":"Write a landing-page prompt for an AI UI generator","free":false,"task":"Write the prompt you'll paste into an AI UI generator like v0 for a product landing page. Put it in one code block of at most 18 lines, with at most one short line outside. It must use the newly approved headline, the 3 sections in your order, your two brand colors, no photos of people, and a signup button that links to your existing URL instead of a new form. It must end by asking the tool to build only the Hero section first and wait for your feedback.","materialLabel":"Your brief and a Slack update (attached to your prompt automatically)","material":"Landing page brief - \"Tidepool\" budgeting app for couples\n\nHeadline (draft): \"Money talks, made easy.\"\nSubhead: \"One shared budget. No spreadsheets. No fights.\"\n\nSections, in this order:\n1. Hero: headline, subhead, signup button\n2. How it works: 3 steps (connect accounts, set shared goals, get a weekly check-in)\n3. FAQ: 4 questions (Is it free? Is my bank info safe? Can we keep some spending private? Does it work for roommates?)\n\nBrand: navy #1B2A49, coral #FF6F59. Font: something rounded and friendly.\nImages: illustrations only. Legal says no photos of people (model releases are a pain).\n\nSignup: we already have a signup page at https://app.tidepool.example/join. The button should just link there. Don't build a new form.\n\nOut of scope: pricing table, blog, testimonials.\n\nSlack from Ren (brand lead), Friday:\n\"Final headline approved by the founders: 'Budget together, stress less.' Draft headline is dead.\"\n","rules":[{"type":"codeBlocks","count":1},{"type":"maxCodeLines","max":18},{"type":"maxProseWords","max":25}],"mistakes":[{"title":"Using the draft headline","why":"The brief's draft sits at the top, and the AI uses it.","fix":"Add: \"Headline: 'Budget together, stress less.' (approved Friday).\"","checks":["r0"]},{"title":"Letting the generator design freely","why":"UI generators add pricing tables, testimonials and stock photos of people.","fix":"Add: \"Only Hero, How it works, FAQ, in that order. Illustrations only.\"","checks":["r1"]},{"title":"A new signup form","why":"The generator builds a form that goes nowhere.","fix":"Add: \"The signup button links to https://app.tidepool.example/join. No form.\"","checks":["r1"]},{"title":"Building everything at once","why":"The generator builds the whole page, so fixing the look means redoing it all.","fix":"End with: \"Build only the Hero first and wait for my feedback.\"","checks":["r2"]},{"title":"A prompt you can't paste","why":"The AI explains its choices and splits the prompt up.","fix":"Say: \"One code block, at most 18 lines, nothing else.\"","checks":["codeBlocks","maxCodeLines","maxProseWords"]}],"promptHints":[{"label":"Uses the approved headline","patterns":["budget together","approved","ren"]},{"label":"Gives the brand colors","patterns":["#1b2a49","#ff6f59","colou?rs"]},{"label":"Bans people photos","patterns":["no photos","illustration"]},{"label":"Asks for the Hero first","patterns":["hero (section )?first","wait for","feedback"]},{"label":"Asks for one block","patterns":["one code block","code block","\\d+ lines"]}],"hint":"UI generators fill gaps with stock photos, extra sections and fake forms. Give them the exact copy, order, colors and what the button does.","rubricLabels":["The prompt uses the headline 'Budget together, stress less.' (not 'Money talks, made easy.') and the colors #1B2A49 and #FF6F59","The prompt lists the sections Hero, How it works, FAQ in that order, says no photos of people, and says the signup button links to https://app.tidepool.example/join with no new form","The prompt ends by asking the tool to build only the Hero section first and wait for feedback before the rest"]}