How to Build a Landing Page from Design Comps Using Only Claude Code

From Design Comp to Live LP: A New Era

Building web pages used to demand coding expertise. The division between designers and engineers was rigid, almost sacred. But that era has passed.

Claude Code has fundamentally changed what's possible. You can now take a Figma design comp and, through simple conversation with an AI, build a production-ready landing page without writing a single line of code yourself.

The secret isn't rushing to implementation. In fact, the opposite is true. Planning and preparation are where success is won. This guide walks you through a battle-tested approach: from design comp to completed, pixel-perfect landing page.

The Preparation Phase: Use Plan Mode to Crystallize Your Vision

The biggest pitfall with Claude Code is jumping straight into implementation. When you enable Auto-Accept Mode, the AI moves forward without waiting for your approval—and sometimes that "helpful" completion doesn't match what you actually intended.

That's where Plan Mode comes in.

Plan Mode makes Claude Code show you the implementation strategy before executing anything. This is your moment to verify that everything aligns with your expectations. Check for:

Is the technology stack appropriate? (Next.js? Astro? Plain HTML+CSS?)
Does the folder structure make sense?
Is the component breakdown at the right level of granularity?
Which styling approach will be used? (Tailwind CSS? CSS Modules? Styled components?)

Here's the concrete workflow:

Enable Plan Mode and share your project overview. Claude Code will respond with a detailed plan—review it, discuss it, refine it—before you approve execution.

# Example Plan Mode Prompt

I have a design comp for a SaaS landing page in Figma.

Key sections:
- Header with navigation
- Hero section with background video
- Features (3-column grid)
- Pricing table (3 tiers)
- FAQ accordion
- Footer

Tech stack: Next.js 16 (App Router) + Tailwind CSS
Requirements: Full responsive support (mobile, tablet, desktop)

Can you create an implementation plan? Show me:
1. Build order (which section first, which last)
2. File and folder structure
3. Component names and props
4. Any potential challenges

By planning upfront, you avoid costly rework later. The AI understands your constraints and preferences before writing any code.

The CLAUDE.md Blueprint: Create Your Project Constitution

Before you start building, write down the rules that will govern the entire project. This is your CLAUDE.md—a single Markdown file that serves as your project's reference document.

What should be in CLAUDE.md?

# Landing Page Build Guide
 
## Project Overview
SaaS landing page implementation.
 
## Tech Stack
- Framework: Next.js 16 (App Router)
- Styling: Tailwind CSS v3
- Typography: Google Fonts (Sora, Roboto)
- Animations: CSS Animations (keep it simple—avoid Framer Motion unless essential)
- Hosting: Vercel
 
## Folder Structure

app/ ├── page.tsx # Main page ├── layout.tsx # Global layout └── globals.css # Global styles

components/ ├── Header.tsx # Navigation header ├── Hero.tsx # Hero section ├── Features.tsx # Feature showcase ├── Pricing.tsx # Pricing table ├── FAQ.tsx # FAQ accordion └── Footer.tsx # Footer

public/ ├── images/ # Optimized images └── videos/ # Video files


## Naming Conventions
- Components: PascalCase (Header.tsx)
- CSS classes: kebab-case (hero-section)
- State variables: camelCase (isMenuOpen)
- Images: descriptive-lowercase (hero-bg.webp)

## Color Palette
- Primary Blue: #3B82F6
- Accent Purple: #8B5CF6
- Background: #FFFFFF
- Text Primary: #1F2937
- Text Secondary: #6B7280

## Responsive Breakpoints
- Mobile: 0px–640px
- Tablet: 641px–1024px
- Desktop: 1025px and up

## Critical Implementation Rules
- Use relative paths for internal links
- Always use Next.js Image component for images
- Load all fonts in layout.tsx
- Dark mode is not required (light-only for now)
- Images must be WebP format
- Button minimum size: 44×44 pixels (mobile accessibility)
- Line heights: 1.5 for body, 1.2 for headings

When you share CLAUDE.md with Claude Code, the AI always stays aligned with your project's standards. No more explaining conventions every conversation—it's all there in one place.

Section-by-Section Implementation: The Path to Accuracy

Never implement a full LP at once. Break it into sections, implement each methodically, and review each before moving forward.

Recommended build order:

Header → The foundation everything else rests on
Hero → Your most visible section—get this right first
Features → The substance of what you're selling
Pricing → The conversion mechanism
FAQ → Answers to objections
Footer → Legal, links, closing elements
Polish pass → Unified styling and micro-refinements

When you ask Claude Code to build a section, be specific about what you're referencing.

# Section-by-Section Implementation Example

## Build the Header First

Look at the very top of the design comp.

Create a Header component with:
1. Logo (text "ACME")
2. Navigation links (Product, Pricing, Company, Docs)
3. CTA button ("Start Free Trial")

Desktop: All elements horizontal, right-aligned
Mobile: Hamburger menu for nav links

Styling:
- Background: white
- Bottom border: 1px solid #E5E7EB
- Fixed position (stays at top when scrolling)
- Logo color: #1F2937
- Link color: #6B7280
- Button uses primary blue (#3B82F6)

Specific, bounded, visual—Claude Code knows exactly what to build because you've narrowed the scope and referenced the design.

Comparing to Comps: Close the Gap

After each section, compare the output to your design comp. Look for discrepancies:

Common differences to catch:

Colors — Is that shade of blue accurate? RGB values must match.
Typography — Font family, size, weight all correct?
Spacing — Padding and margins aligned with the comp?
Line height — Text not too cramped?
Button sizing — Large enough for comfortable clicking?

When you spot a difference, tell Claude Code exactly what you see:

# Feedback on Hero Section

Comparing the Hero section to the comp, I notice:

Design comp shows:
- Headline font: Sora Bold, 48px
- Headline color: #1F2937
- Subheading: Roboto Regular, 18px
- Subheading color: #6B7280
- CTA button padding: 12px 32px

Current implementation:
- Headline is 40px (too small)
- Subheading color is too dark

Please adjust these sizes and colors to match the comp exactly.

This specific feedback helps Claude Code make surgical corrections rather than broad changes.

Handling Images and Videos

Your design comp likely includes images and videos. These need optimization before integration.

Image optimization:

Format: WebP (convert from Figma PNG exports)
Max width: 1200 pixels for desktop
File size: Aim for 100KB or less per image
Resolution: 2x pixel density for retina displays

# Convert PNG to WebP using ImageMagick
convert hero.png -quality 80 hero.webp
 
# Batch convert all PNGs in a folder
for file in *.png; do
  convert "$file" -quality 80 "${file%.png}.webp"
done

Video requirements:

Format: MP4 (H.264 codec)
Resolution: 1920×1080 or 1280×720
File size: Under 5MB (keeps page load fast)
Autoplay: Always use muted attribute (browsers require this)

<!-- Example video implementation -->
<video
  autoPlay
  muted
  loop
  className="w-full"
>
  <source src="/videos/hero-bg.mp4" type="video/mp4" />
  Your browser doesn't support HTML5 video.
</video>

Tell Claude Code where your optimized files live, and let it handle the integration using Next.js best practices.

Making Assets Web-Ready

Before asking Claude Code to build anything with images or videos:

Export from Figma (or your design tool) at 2x resolution
Optimize with a tool like TinyPNG or ImageMagick
Convert to WebP
Upload to your public/ folder
Reference the paths in your instructions

Claude Code will wrap these assets with proper Next.js Image components, lazy loading, and responsive attributes—you just need to point to where they live.

The Build Checklist

Before you consider a section "done," run through this checklist:

[ ] All text matches the design comp exactly
[ ] Colors match the design palette
[ ] Spacing and alignment are pixel-perfect
[ ] Responsive behavior works on mobile and desktop
[ ] All links and buttons are clickable
[ ] Images and videos load smoothly
[ ] No console errors or warnings
[ ] Tested in Chrome, Safari, Firefox (at least two browsers)

Next Steps: From Functional to Excellent

You've now taken a design comp and built a working landing page with Claude Code. Congratulations—that's real progress.

But there's another level: taking that functional page and transforming it into a polished, professional product. That journey involves responsive design mastery, animation implementation, performance optimization, and accessibility compliance.

Your next challenge: Learn the advanced techniques that separate "good enough" from "professional-grade."

Start today. Open your design comp. Fire up Claude Code in Plan Mode. The bridge between vision and reality is closer than you think.