←Back/Marketing/Claude
IntermediateMarketing

How to Build a High-Fidelity Landing Page with Claude Design

Import a real design system into Claude Design, generate several high-fidelity landing-page directions, and refine the strongest one through direct visual choices.

How to Build a High-Fidelity Landing Page with Claude Design

Source episode · 02:30

How I Put Claude Design and GPT Images 2.0 to the Test: Building Landing Pages, Slides, and Brand Kits

with Claire Vo

02:30 to 16:10: Claire Vo imports Lenny’s design system from HTML and image assets, creates a PRD landing-page prototype, compares variations, and adjusts the chosen direction.

Read the full episodeWatch on YouTubeListen on SpotifyListen on Apple

Before you start

What you need

  • A saved webpage or connected repository that represents the current design system
  • Logos, fonts, images, and other brand assets
  • A product concept, primary audience, and core value proposition
  • Claude Design access

What you’ll make

A high-fidelity landing-page prototype that uses the selected brand system and includes a clear product story, interactive detail, and a chosen visual direction.

Tools used

Step by step

The workflow

Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.

5 steps

Step01

Import or Select a Design System

Build the design system from materials that show how the brand actually works. Claire saves Lenny’s homepage HTML, logo, campfire mark, and hero graphic; a repository connection can provide deeper component coverage.

Example prompt
Create a design system for [brand] from the attached HTML, logo, images, and fonts. Extract the typography, palette, brand marks, interface components, spacing, and illustration rules. Show the system before using it in a prototype.
Step02

Write a Conversational Prompt

Start a high-fidelity prototype with the imported system selected. Name the product, what it does, who it serves, and the brand system it must follow.

Example prompt
Create a high-fidelity landing page for [product], a [plain-language product description] for [primary audience]. Use the [brand] design system. The main promise is [value proposition]. Include a product preview and one small live interaction.
Step03

Answer Follow-up Questions

Answer Claude’s product and layout questions with concrete decisions. Claire specifies the product name, positioning, audience, interaction depth, and preferred hero direction while letting the tool propose the section mix.

Example prompt
Use these decisions:
Product name: [name]
Positioning: [one sentence]
Primary audience: [audience]
Interaction depth: [static, small live interactions, or functional prototype]
Required sections: [list or decide for me]
Pricing: [include, omit, or decide for me]
Hero direction: [selected option and why]
Step04

Generate and Review Variations

Generate several directions and compare them as whole pages. Choose the version with the strongest hierarchy and brand fit rather than trying to perfect the first result through vague requests.

Example prompt
Generate three distinct variations. Keep the product facts and design system fixed, but vary the hero composition, headline approach, page rhythm, and product demonstration. Make each direction meaningfully different.
Step05

Refine Using the Tweaks Panel

Use the tweaks panel and component comments to resolve specific choices. Claire selects headline style, hero alignment, background, primary action, and pricing, then comments directly on the call to action.

Example prompt
Refine the selected variation with these changes:
Headline approach: [operator, blunt, question, or custom]
Hero layout: [centered or split]
Background: [choice]
Primary action: [exact label]
Pricing section: [on or off]
Component note: [targeted change]
Keep the rest of the chosen direction intact.

What good looks like

  • The prototype uses recognizable brand colors, typography, marks, and components
  • The page explains the product and audience without placeholder positioning
  • The selected variation has a clear hero, primary action, and enough detail to test the concept

Build your next product with ChatPRD

Turn an idea into a PRD, user stories, and a plan.

Try ChatPRD free

After the steps

Runbook notes

How to recover when the loop fails and where human judgment helps.

Recover

If it goes sideways

The imported design system misreads an important font, color, or component.
Correct the extracted rule directly and name the asset that should govern it before starting the prototype.
The page follows the brand colors but still looks like a generic AI landing page.
Add a specific product promise, audience, reference layout, and content constraints, then generate distinct variations again.
Long generation cycles make small visual changes frustrating.
Bundle related choices into one iteration and use the tweaks panel or direct component comments for localized changes.

Keep building

Related workflows

How to Implement AI Governance with Context-Aware Project Controls
advancedEngineeringClaude

How to Implement AI Governance with Context-Aware Project Controls

Create context-aware guardrails for your enterprise AI agent using a 'Project' governance layer. As a project owner, define rules, scope tools, and require human-in-the-loop approval for sensitive actions, ensuring safe and effective AI use.

Open
How to Turn a One-Off AI Chat Session into a Reusable Workflow for Your Team
intermediateOperationsKai (Stripe)

How to Turn a One-Off AI Chat Session into a Reusable Workflow for Your Team

Transform a successful AI chat session into a reusable skill that anyone in your company can use. Package prompts, tools, and code into a standardized workflow, making it easy to share and scale automation across your organization.

Open
How to Create a Custom Data Dashboard On-the-Fly with a Natural Language AI Agent
beginnerDataKai (Stripe)

How to Create a Custom Data Dashboard On-the-Fly with a Natural Language AI Agent

Use a natural language AI agent to instantly generate and iterate on custom data dashboards. This workflow queries your company's data securely, allowing non-technical users to perform their own 'last mile' data analysis without filing tickets.

Open

Start shipping
better products.

Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.

Start building freeRequest a demo
Free to start
No credit card
SOC 2 certified
Enterprise ready