- Home
- Skills
- Frontend & Web Apps
- Client Design Variants — 3-5 Live Options, Client Picks
Works with the AI Agents you already use
Client Design Variants — 3-5 Live Options, Client Picks
Stop sending mockup PDFs. Send one page the client clicks through and get back a number.
$5
Client Design Variants — 3-5 Live Options, Client Picks
Example session with this skill installed
Make 4 versions of the hero for Harbor Plumbing. Use their real headline, phone number, and the photos from their current site. Vary the layout only.
- Read your context and instructions
- Compiled the client design variants
- Generated the app files
Summary
Built one file, variants-harbor-plumbing-hero-2026-10-02.html, with 4 live hero layouts. Nothing else on the page changes between them.
What's in the file
| # | Label | What's different |
|---|---|---|
| 1 | Bold | Full-width headline, phone number as the main button |
| 2 | Calm | Short headline, lots of white space, one soft button |
| 3 | Photo-led | Their own truck photo full-bleed, headline over a dark overlay |
| 4 | Split | Photo left, headline and phone right |
Switcher: bottom-right, labeled
Axis: layout — 1 Bold · 2 Calm · 3 Photo-led · 4 Split. Arrow keys work too.
- Real content: Harbor Plumbing's actual headline, services, and phone number. No placeholder text.
Pick line: each variant has a "Pick this one" button that reveals I pick variant 3 — Photo-led. for the client to paste into a reply.
- Mobile: all four checked at 375px wide and stack correctly.
- Zero dependencies: plain HTML/CSS/JS, opens by double-click, works offline.
Before you send it
- Their site runs on a locked-down builder, so whichever variant wins still has to be rebuilt inside that builder. The file is the decision tool, not the shipped page — tell them that now, not after they pick.
Next steps
- Open the file and click through all four once.
- Email it to the client: "Click through these and reply with the number you like."
- Save their reply — it's your written approval for the hero.
variants-harbor-plumbing-hero-2026-10-02.html
ZIP · project files
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
Builds a single self-contained HTML file that shows ONE section of a client's website — hero, pricing, header, testimonials — in 3 to 5 live variants with a floating switcher. The client flips between them, clicks "Pick this one," and pastes "I pick variant 3 — Photo-led" into a reply. Decision made, and on the record, so later changes are new scope instead of unbilled rework. The rules are what make it work: vary exactly one section and one axis (layout OR copy tone OR color) so the pick actually tells you something; 3-5 variants, never more; the client's real name, services, and phone number, never lorem ipsum; plain-word labels a client can say back to you; every variant checked at 375px; zero dependencies, so the file still opens by double-click six weeks later. It also states the two honest blockers up front — you need their real copy and photos, and a site on a locked-down builder still needs the winner rebuilt inside that builder.
New in v2: a tested HTML shell (switcher, arrow keys, pick line), photos embedded inside the file so it still works offline months later, an included checker script, and a ready-to-send message for the client.
How to use
Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
30-day refund
Not a fit? Get your money back
Trust & safety
Security scanned
Verified clean 5 days ago
- Passed all security checks, Safe to install
Requires