How I Design Landing Pages with AI: 50 Versions, One Winner

I'm not a designer. I'm a developer who builds SaaS products. But every product needs a landing page, and hiring a designer for every iteration isn't realistic when you're bootstrapping.

So I built a workflow. It uses AI to generate dozens of landing page variations, then I filter, combine, and refine until I get something that actually looks good. I've used this process for Pixeria (a photo proofing tool for photographers) and Fetchpipe (an email integration API for developers). Both times, it worked better than I expected.

Here's the full process.

Step 1: Research and brief

I start by telling Claude Code what the page is about. Not just "make me a landing page" - I describe the product, the audience, the tone I'm going for, and what the page should contain.

Then I ask it to research modern, lightweight landing page templates and trends. What layouts are working right now? What patterns do top SaaS pages use? The goal is to generate a Markdown brief I can reference throughout the process.

Why this matters: If you skip the research, you get generic output. The brief grounds everything that follows.

Step 2: Jobs to Be Done

Before any design work, I run the content through a Jobs to Be Done framework. I ask Claude Code to analyze:

• What problems does the product solve?
• What's the user's "struggling moment" before they find this tool?
• What functional, emotional, and social outcomes does the user want?

This gives me the copy foundation. A landing page isn't about features - it's about showing the visitor that you understand their problem and have a solution.

For Pixeria, the struggling moment was clear: photographers drowning in email ping-pong with clients, sending galleries through Dropbox links, losing track of revision requests. The landing page needed to reflect that frustration before showing the solution.

Step 3: Generate 10-20 variations

This is where it gets interesting. I already have a rough project structure with Tailwind CSS set up. Now I tell Claude Code:

"Create 10-20 landing page designs. Fresh, modern, following current trends. Use the design skills and web design guidelines. Light and dark versions. Don't extract components - keep each template as one self-contained file. Number them, don't name them. Also create an index page so I can quickly preview each one."

I specifically reference skills for design quality - Vercel's web interface guidelines, frontend design patterns, and other design-focused tools I have installed in Claude Code.

Each template is a complete, standalone HTML page with Tailwind. The index page gives me one-click access to all of them.

Key detail: I tell it not to extract components yet. At this stage, I want fast iteration, not clean architecture. Architecture comes later.

Step 4: Not satisfied? Generate 20 more

If the first batch doesn't spark anything - and sometimes it doesn't - I ask for another round:

"Create 20 more landing pages. Completely different from the previous ones. Different layout approaches, different visual styles, different structural ideas."

The word "completely different" matters. Without it, AI tends to give you variations of the same theme. Push for diversity.

Step 5: Filter ruthlessly

At this point I have 30-50 landing pages. I open each one in the browser and scan quickly. Most get eliminated in seconds. I'm looking for:

• Color combinations that feel right
• Section layouts that catch my eye
• Hero designs that communicate quickly
• Overall "feel" - does this look like a product I'd trust?

I narrow it down to 5-15 keepers. Then I ask Claude Code to generate 5-10 more variations based specifically on these winners, with notes on what to emphasize and what I felt was missing.

Step 6: Mix and match

From the filtered set plus the new batch, I start the real selection. This time I'm more deliberate:

• Which template has the best color palette?
• Which one has the strongest hero section?
• Which one nails the pricing layout?
• Which one has the best use of whitespace?

I pick elements from different templates and describe what I want combined. "Take the hero from template 12, the feature grid from template 27, the color scheme from template 34."

This is where human taste makes the difference. AI generates the raw material. You curate it.

Step 7: Refine section by section

Once I have one template, I go section by section:

"Redesign the hero section. Give me 3 different approaches - different headline styles, different layouts, different visual treatments."

Then the same for features, pricing, testimonials, footer. Each section gets its own mini-competition.

This is slower but worth it. The difference between a good landing page and a great one is in the details of individual sections.

Step 8: Production-ready

When the design is locked, I shift to engineering mode:

1. Extract components - Move from one monolithic file to proper React/Next.js components
2. Full audit - Ask Claude Code to review the entire page for issues: accessibility, responsive behavior, copy consistency, missing sections
3. Lighthouse testing - I use Playwright to run automated tests. Claude Code opens the browser, checks element rendering, tests responsive breakpoints, and runs Lighthouse audits
4. Fix what's broken - Low performance scores, missing alt tags, layout shifts - fix them iteratively

The Playwright integration is powerful here. Claude Code literally opens a browser, takes screenshots, checks if elements render correctly, and reports back. It catches things you'd miss in manual testing.

Why this works

Volume beats perfection. If you try to design one perfect landing page from scratch, you'll agonize over every decision. When you have 50 options, you stop overthinking and start recognizing what works.

AI handles the grunt work. Generating 50 Tailwind pages manually would take weeks. With Claude Code, it takes an evening session. Your job shifts from "create" to "curate" - which is a much better use of your time as a founder.

You don't need to be a designer. You need taste. And taste is easier to exercise when you have many options to compare. You might not be able to design a great hero section from a blank canvas, but you can absolutely tell which of 10 hero sections feels right.

The JTBD step prevents "pretty but useless" pages. Without grounding the design in real user problems, you end up with something that looks nice but doesn't convert. The struggling moment analysis gives you copy that actually resonates.

The tools

• Claude Code - the AI doing the heavy lifting (research, generation, auditing)
• Tailwind CSS - fast styling without writing custom CSS
• Playwright - browser automation for testing and Lighthouse audits
• Claude Code skills - design guidelines, web interface patterns, frontend design frameworks

Try it yourself

You don't need my exact setup. The core idea is:

1. Start with research and user problems, not visuals
2. Generate many options, not one
3. Filter with your own taste
4. Combine the best elements
5. Refine section by section
6. Audit and test before shipping

The first time you see 40 landing page variations side by side, something clicks. You stop thinking "I can't design" and start thinking "I know which one feels right."

That's enough. That's the skill.