Cindy Zhu.
Free guides
Marketing Claude

Build a converting landing page with Claude

Hey, it's Cindy 🌱 You commented PAGE, so this is the complete workflow for turning an offer brief into a responsive landing page.
btw the waitlist for AI System Club is now open! If you're keen on using AI to automate your content, video editing, job search, business or build AI agents, feel free to sign up (only if you want to hehe). Ps. the waitlist gets first dibs:)
before you build

Give Claude the inputs a real strategist would ask for

Claude can write the code quickly, but it cannot invent a strong offer from vague context. Collect these six inputs first:

Audience Who the page is for and what they already understand.
Outcome The concrete result the visitor wants.
Problem What is slow, expensive, risky, or frustrating now.
Offer What they receive, how it works, and the price if public.
Proof Testimonials, results, credentials, demos, or case studies.
Action The single next step: buy, book, apply, or join.
set it up

The four-step build

  1. 1. Install Claude Code. Follow Anthropic's official setup guide, authenticate, create a new project folder, and start Claude inside that folder.
  2. 2. Add your brief. Create a plain text file called brief.md. Put the six inputs above inside it, plus any brand colours, fonts, screenshots, logos, and examples Claude may use.
  3. 3. Build conversion-first. Run the master prompt below. Ask for semantic HTML, responsive CSS, accessible controls, and one primary call to action. Do not start with animations.
  4. 4. Review on a real phone. Test the headline, form, buttons, spacing, and loading speed. Fix the conversion path first, then add restrained motion where it clarifies hierarchy.
copy this

The master build prompt

Build the first version 
Read brief.md and build a complete responsive landing page for this offer.

Start by summarising the audience, promise, objection, proof, and primary conversion action you found in the brief. Then propose the page structure before writing code.

Build the approved structure with semantic HTML and maintainable CSS. Above the fold, include one outcome-led headline, one supporting paragraph, one primary call-to-action button, and the strongest available proof. Continue with problem, solution, how it works, benefits, proof, objection handling, FAQ, and a final call to action. Keep one primary action throughout the page.

Write specific copy from the source material in brief.md. Do not invent testimonials, statistics, customers, urgency, or guarantees. Mark any genuinely missing proof as a clear placeholder.

Make the page mobile-first, keyboard accessible, fast to load, and visually polished without excessive animation. Use the supplied brand assets. When finished, run the project locally, inspect it at mobile and desktop widths, and list anything that still needs a human decision.
make it convert

Three focused revision prompts

Strengthen the first screen 
Audit only the first mobile screen of this landing page. A new visitor should understand who it is for, what result it promises, why it is credible, and what to click within five seconds. Give me three headline and subheadline combinations using different angles: outcome, speed, and objection handling. Recommend one, implement it, and keep the primary call to action visible without scrolling.
Remove conversion friction 
Review this page as a skeptical first-time visitor arriving from an ad. Identify every vague claim, unanswered objection, distracting link, competing call to action, and form field that is not necessary. Rank the issues by likely conversion impact, then implement the highest-impact fixes without inventing new proof.
Run the mobile QA pass 
Test the landing page at 375px, 768px, and 1440px widths. Check text wrapping, tap-target size, form labels, keyboard navigation, contrast, image sizing, layout shift, and whether the primary call to action remains obvious. Fix every reproducible issue. Then give me a short manual checklist for anything you cannot verify yourself.
do not skip this

The launch checklist

  1. Promise check. The headline describes an outcome the offer can actually deliver.
  2. Proof check. Every testimonial, result, logo, and statistic is real and approved.
  3. Action check. Every primary button leads to the correct checkout, booking, or signup destination.
  4. Mobile check. Test the full path on a phone, including form validation and confirmation screens.
  5. Performance check. Run PageSpeed Insights. Google recommends an LCP of 2.5 seconds or less, INP of 200 milliseconds or less, and CLS of 0.1 or less for a good user experience.
  6. Tracking check. Confirm your analytics and conversion event fire once, with no duplicate submissions.
Start with the page's argument, not its animation. A strong page can look quiet and still convert. Motion should help visitors understand where to look next, never compete with the offer.

Official references

Anthropic: Set up Claude Code
Google web.dev: Core Web Vitals
Google PageSpeed Insights

the waitlist is now open

AI System Club is launching soon

Build AI systems with me through recorded lessons you can follow at your own pace. Join the waitlist for first access and the founding price.

btw this list gets first dibs
the moment doors open :)

Privacy · Terms