Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
GitHub Copilot
Gemini CLI+20 moreClaude CodeCursorCodex CLIGitHub CopilotGemini CLI
OpenClaw
Manus
Grok+17 agentsClient Design Variants — 3-5 Live Options, Client Picks
Stop sending mockup PDFs. Send one page the client clicks through and get back a number.
$9
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.
client-design-variants-3-5-live-options--app.zip
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.
What you get
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 that make it work
- Vary one section and one axis (layout OR copy tone OR color) so the pick actually tells you something
- 3-5 variants, never more — past five, clients freeze and ask for a sixth
- Real content only — the client's name, services, and phone number, never lorem ipsum
- Plain-word labels ("Calm," "Bold," "Photo-led") a client can say back to you
- Every variant checked at 375px wide
- Zero dependencies — 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.
Use cases
- Replace the mockup round in a paid site build and kill the "can it feel more like the first one?" email loop
- Send a prospect their own hero rebuilt three ways as a free, no-login-needed capability demo
- Settle a headline or pricing-table argument with a client who keeps changing their mind
- Get a written, dated approval on a design choice before building the rest of the site
How to install
Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.
- 1
Download the ZIP
Free skills download straight away. Paid skills unlock right after purchase.
- 2
Unzip into your skills folder
Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.
- 3
Ask your agent to use it
Restart the agent if it was already running. It picks the skill up automatically - no config needed.
Skills folder by agent
Click the path to copy it. Create the folder if it does not exist yet.
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 6 days ago
- Passed all security checks, Safe to install