{"id":"vibe-fl-mobile-pricing-fix-prompt","audience":"freelancers","category":"coding","track":"coding","technique":"constraints","title":"Write a one-bug fix prompt for a mobile layout problem","free":false,"task":"Your client's AI-built site has one layout bug on phones. Write the follow-up prompt for the AI builder in one code block of at most 8 lines, with at most one short line outside it. It must name the page and the exact screen width, say what's wrong and what it should look like, say not to change the desktop layout or any other page, and give one check at 375px wide.","materialLabel":"The client's message and your notes (attached to your prompt automatically)","material":"Client message (Odile, owner of Driftwood Yoga):\n\"Hi! On my phone the prices page looks broken, the three boxes are squished on top of each other and the 'Book now' buttons are cut off. Desktop looks perfect, please don't change it!! Also maybe one day we can add a blog?\"\n\nMy notes (I built the site with an AI app builder):\n- Page: /pricing. Three pricing cards: Drop-in $22, 10-class pass $190, Monthly unlimited $135.\n- On desktop they sit side by side in a row. That's right.\n- On my phone (375px wide) the cards overlap and the buttons get cut off at the right edge.\n- On a tablet (768px) it's fine.\n- Expected on phones: cards stacked in one column, full width, each button fully visible.\n- Last time I asked the builder to \"make the site mobile friendly\", it changed fonts and the nav on every page. Never again.\n","rules":[{"type":"codeBlocks","count":1},{"type":"maxCodeLines","max":8},{"type":"maxProseWords","max":20}],"mistakes":[{"title":"Asking for 'mobile friendly'","why":"That vague ask lets the builder restyle every page, like last time.","fix":"Add: \"Only fix /pricing at phone widths.\"","checks":["r0","r2"]},{"title":"No picture of 'right'","why":"The builder guesses a new layout instead of the one you want.","fix":"Add: \"On phones: one column, full-width cards, buttons fully visible.\"","checks":["r1"]},{"title":"No fence around desktop","why":"The builder 'improves' desktop too, which the client loves as is.","fix":"Add: \"Don't change desktop or any other page.\"","checks":["r2"]},{"title":"A prompt wrapped in chat","why":"The AI explains the fix and writes CSS for you.","fix":"Say: \"One code block, at most 8 lines, nothing else.\"","checks":["codeBlocks","maxCodeLines","maxProseWords"]}],"promptHints":[{"label":"Names the page","patterns":["/pricing","pricing page"]},{"label":"Gives the width","patterns":["375"]},{"label":"Describes the fix","patterns":["one column","stack","full.width"]},{"label":"Protects desktop","patterns":["desktop","other pages?"]},{"label":"Asks for one block","patterns":["code block","\\d+ lines"]}],"hint":"'Make it mobile friendly' invites a rewrite. Name the page, the width, the right layout, and what must stay the same.","rubricLabels":["The prompt names the /pricing page and says the problem happens on phones around 375px wide (cards overlap, buttons cut off)","The prompt says the expected phone layout: cards stacked in one full-width column with each Book now button fully visible","The prompt says not to change the desktop layout or any other page (fonts, nav), gives a check at 375px wide, and does not mention a blog"]}