---
name: al-434-stop-showing-clients-static-mockups-have-a-coding-agent-b
description: "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. Use when the user wants help with live design reviews with clients (coding) for a small business."
---

# 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

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.

## Inputs to collect first
Ask the user for anything below that they haven't already given you. Don't guess missing facts.

- Client and business type
- E.g. hero, colour theme, pricing block, call-to-action button
- Each option, e.g. 'A: photo hero, B: video hero, C: plain text…

## Instructions

Do the task below with the user's inputs in place of each [bracket].

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.

## Safety checks (share these with the user)

- 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.
- Say clearly which parts need a person to review or approve before anything is sent, paid, posted or filed.

## About this skill

- Works with: Claude Code, Codex, Cursor
- Based on this real-world example: https://x.com/mazur_designs/status/2115903248997786028
- Free prompt from AgentPlaybook Real Estate: https://agentic-library.netlify.app/prompt/al-434-stop-showing-clients-static-mockups-have-a-coding-agent-buil/
- To install in an agent that supports Agent Skills, save this file as SKILL.md in a folder with the same name as `name` above (for example in your skills directory). Install steps for Claude.ai, Claude Code, Cursor and Codex: https://agentic-library.netlify.app/skills/