Stop showing clients static mockups: have a coding agent build the real web page with switchable versions of each section, so the client clicks between options live on the call and picks one: AI agent prompt
On Oct 29, 2026 web designer Andrii Mazur posted on X that his studio no longer presents Figma frames to clients and shows live sites built with Claude Code instead. He built a tool that swaps versions of any element on the page (dark mode, light mode, different visuals) in the same view during the call, so clients just click and compare without scrolling a canvas or switching tabs. He made it because building sites with Claude left no easy way to test live versions side by side. The prompt below asks a coding agent for a simple version of the same switcher on your own draft site.
The prompt
I'm building a website for [client and business type] with you. Before my review call with the client, add a simple 'compare versions' mode to the page we built. 1) For these sections: [e.g. hero, colour theme, pricing block, call-to-action button], create [2-3] versions each: [describe each option, e.g. 'A: photo hero, B: video hero, C: plain text hero'; 'light vs dark theme']. 2) Add a small floating panel, visible only when the URL ends with ?review=1, with a toggle for each section so I can switch versions live on screen share. 3) Keep the switches instant (no page reload) and keep everything else on the page identical. 4) Remember which version is selected for each section and show a 'copy choices' button that copies a summary like 'Hero: B, Theme: dark' so I can paste the client's decisions into my notes. 5) Don't change the live site's normal view, and tell me how to remove the review panel once the client has chosen. Test it in the browser and show me a screenshot of each version.
Fill in the blanks, then copy
This prompt has 3 [bracket]s to fill in. Type your details below and the prompt updates as you go. Your answers stay in this browser and are reused on other prompts with the same blanks. Nothing is sent to us.
Example values are fictional, just to show how a filled-in prompt reads. Replace them with your real details.How to use it
- Copy the prompt above.
- Replace every [bracket] with your own details (use the fill-in-the-blanks box above, which remembers your answers for the next prompt).
- Paste it into Claude Code, Codex, Cursor and review the answer before you use it.
Works with: Claude Code, Codex, Cursor
Real-world example: x.com/mazur_designs/status/2115903248997786028
Before you use it: what to check
Check yourself
- Check every figure, price and total against your own records before anything is sent, posted or booked. A person approves refunds, discounts, payments and price changes.
- Remove names, contact details, account numbers and other personal data the task doesn't need before you paste, and check your AI tool's data and training settings.
- Check names, dates, numbers and any claim against your own source material before you use the answer. AI can misread or invent details.
Using an AI agent? Download this prompt as a SKILL.md agent skill with these checks built in, or get the .zip for Claude.ai. How to install skills.
Want to make this prompt even better? Grade it with the free prompt grader or build your own with the AI prompt generator.
32 copy-paste agent prompts (PDF) plus 5 new prompts every week.
Get it free