Back/Marketing/Claude
IntermediateMarketingClaude

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

Use Claude Design to quickly generate a high-fidelity, on-brand landing page from a simple conversational prompt by leveraging an imported design system for brand consistency.

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

Tools Used

Claude

Anthropic AI assistant

02Step-by-Step Guide
1

Import or Select a Design System

Before prototyping, ensure your brand's design system (colors, fonts, components) is imported into Claude Design. You can do this by uploading HTML files, images, or connecting a GitHub repo to ensure brand consistency.

2

Write a Conversational Prompt

Start a new Hi-Fi prototype and describe the landing page you want in plain language. Include the product's purpose, target audience, and desired tone, referencing your design system.

Prompt:
Please help me make a landing page for a PRD generator and AI PM coach powered by all the data in Lenny's newsletter adhering to the Lenny newsletter design system. Make it awesome.
3

Answer Follow-up Questions

Engage with Claude's Q&A function to provide specific details like the product name ('Lenny Doc'), tagline ('an AI PM in your pocket'), and target audience ('New and aspiring PMs') to refine the generation.

4

Generate and Review Variations

Allow Claude Design to generate multiple (e.g., three) variations of the landing page. It is often easier to choose from a few options than to describe the perfect design from scratch. Be aware this can take several minutes.

5

Refine Using the Tweaks Panel

Use the 'Tweaks' panel to make quick adjustments. Toggle between different headlines, change the hero layout, switch the CTA text to 'Try it Free', or add new sections like pricing, all with a few clicks.

Start shipping
better products.

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

Free to start
No credit card
SOC 2 certified
Enterprise ready