This guide walks you through the exact process to design a high-converting sales page with Claude, then hand it to a developer (or build it yourself).
✅ What you'll need
| What | Why |
|---|---|
| A paid Claude plan (Pro or higher) | Claude Code isn't included on the free plan. |
| Claude Code | This is where the design skill runs. Use the Code tab in the Claude Desktop app, or install it in your terminal. |
| Node.js and Python 3 | The design skill's installer and search scripts need them. If they're missing, ask Claude Code to install them for you. |
| A Fiverr account | Only if you're hiring a developer to build it. |
| About 1 hour | Most of that is answering the brief questions in Step 2. |
🎨 Step 1: Install the UI UX Pro Max design skill
This skill gives Claude professional UI/UX knowledge, so your page looks custom-built instead of generic AI output.
- Make a new, empty folder on your computer called Sales Page and open it in Claude Code
- Paste these two commands into Claude Code, one at a time:
Command
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skillCommand
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill- Restart Claude Code so it picks up the skill
Prefer the terminal? Run npx ui-ux-pro-max-cli init --ai claude inside your project folder instead. The full instructions are on the GitHub repo.
📝 Step 2: Write your website brief
Before prompting Claude, get your answers to these down:
- Who is your customer? (age, job, pain points)
- What problem does your product or service solve?
- What are your 3–5 key selling points (USPs)?
- What action do you want visitors to take? (buy, book a call, sign up)
- What proof do you have? (case studies, reviews, numbers)
- What platform will you build on? WordPress, Webflow or Shopify
🚀 Step 3: Use this prompt in Claude Code
Copy this template, fill in the brackets, and paste it into Claude Code.
Prompt
You are a world-class conversion copywriter and CRO designer.
Your job is to build a complete, high-converting sales landing page using proven frameworks from CXL, MECLABS, Unbounce and Alex Hormozi's offer framework.
Business details:
- Business name: [BUSINESS NAME]
- Service: [SPECIFIC SERVICE]
- Location: [CITY]
- Website: [URL]
- Target customer: [WHO THEY ARE + THEIR AWARENESS LEVEL]
- Unique selling point: [WHAT MAKES YOU DIFFERENT]
- Customer problems: [LIST 3x REAL PAINS, NOT SURFACE-LEVEL SYMPTOMS]
- Solutions you provide: [HOW YOU SPECIFICALLY SOLVE EACH PROBLEM]
- Proof / results: [CASE STUDIES, STATS, CLIENT WINS]
- CTA goal: [BOOK A CALL / BUY NOW / GET A QUOTE / etc.]
Desired action: [E.G. BUY NOW / BOOK A FREE CALL / START FREE TRIAL]
Build the page in this exact order:
1. Headline: One specific outcome, plain language, zero ambiguity. Makes them keep reading.
2. Subheadline: Expands the promise. Who it's for, what makes it different, what happens next.
3. Hero visual placeholder: Note what type of image or video should go here and why.
4. Pain framing: Make the reader feel understood before pitching anything. Name the frustration, the failure, the cost of inaction.
5. Solution + benefit stack: Bullet points only. Benefits, not features. What changes for them, not what you do.
6. Social proof block: Specific testimonials with names, roles, and results. Real numbers over vague praise. Use clearly marked placeholders where I haven't given you real proof. Never invent testimonials.
7. CTA: One action, repeated. Place it above the fold, after proof, and before the FAQ.
8. Objection handling / FAQ: Address the 5 real reasons someone hesitates: price, time, trust, fit, and risk.
9. Final CTA + urgency: Close the page with the CTA and a genuine reason to act now.
10. Footer: Trust signals, links, legal, contact.
Please design a full-page layout with:
1. Value proposition understood within 3 seconds
2. One goal, one CTA. No nav links, no exit routes
3. Visual hierarchy: size and weight guide the eye deliberately, top to bottom
4. Whitespace between every section. Nothing cramped, nothing competing
5. One high-contrast accent colour for CTAs only, used consistently
6. Every line of copy describes an outcome for the reader, not a feature of the product
7. Headline must match the ad or traffic source bringing visitors to this page
8. Mobile-first: tap-friendly buttons, no pinch-to-zoom, LCP under 2.5s
9. Zero trust killers: no broken layouts, blurry images, or misaligned elements
10. Forms: 3 fields maximum
11. All social proof includes specifics: names, numbers, before/after results
Make it visually striking, professional, and optimised for conversions.
Use the UI UX Pro Max skill to ensure the design is unique and not generic.
Build it as a single index.html file in this folder that I can open in my browser.🔁 Step 4: Review and refine your design
Claude builds a working page and saves it as index.html. Double-click the file to open it in your browser (or ask Claude to open it for you).
- Don't like the headline? Say: "Make the headline more urgent and benefit-focused"
- Want to change the layout? Say: "Move the testimonials section above the FAQ"
- Need different colours? Say: "Use a dark navy and gold colour palette"
- Checking mobile? Say: "Show me how this looks at phone width and fix anything cramped"
Refresh the browser after each change. It usually takes 2–5 rounds to get it right.
📋 Step 5: Export your developer brief
Once you're happy with the design, ask Claude:
Prompt
Please write a detailed developer brief for this design, including:
- Full page structure and section breakdown
- Copy for every section
- Colour palette and font suggestions
- Any animations or interactions
- Mobile responsiveness notes
Format it so I can hand it directly to a developer. Save it as developer-brief.md in this folder.Building it yourself? Ask Claude to rebuild the page for your platform instead, for example "Turn this into a Shopify section" or "Give me this as a WordPress page I can paste into a Custom HTML block".
🤝 Step 6: Hire a developer to build it
You've done the hard creative work. Now hand it to a pro.
- Go to Fiverr
- Search for a developer who specialises in your platform:
- WordPress: search "WordPress sales page developer"
- Webflow: search "Webflow designer"
- Shopify: search "Shopify landing page"
- The developer I use: Derek on Fiverr. He specialises in Webflow. Fast turnaround, great communication.
- Send them your index.html file (plus a few screenshots) and the developer brief
- Review, request revisions, and launch 🚀
🧩 Platform-specific tips
WordPress
- Ask your developer to use Elementor or Kadence Blocks so you can make edits yourself later
- Make sure they install an SEO plugin (Rank Math or Yoast)
- Ask for a staging site so you can check everything before it goes live
Webflow
- Great for pixel-perfect designs. Claude's output translates well here
- Ask your developer to transfer the site to your own Webflow workspace when it's done (or bill the hosting to you directly)
- Hosting is built in with a Webflow site plan, so there's no separate hosting to set up
Shopify
- Tell Claude your Shopify theme name up front (e.g. Horizon, Dawn, Impulse, Prestige)
- Ask your developer to build it with theme sections and blocks, so you can edit everything in the theme editor without code
- Think about where the page sends people: product page, cart and checkout should all feel consistent
❌ Common mistakes to avoid
- Skipping the design skill. Your output will look generic
- Giving Claude vague answers. Be specific about your customer and USPs
- Letting Claude make up testimonials or stats. Only use real proof
- Trying to code it yourself if you're not a developer. Hire someone
- Only designing the homepage. Think about the full journey from ad to checkout
- Not checking it on your phone before you sign off
