| name | landing-page |
| description | Build complete, deployment-ready landing pages from client websites and content documents (PDFs, Word docs, brand discovery docs). Use this skill whenever the user wants to create a landing page, redesign an existing website, build a sales page, create a one-page marketing site, or convert content documents into a web page. Also trigger when the user provides a website URL and asks for a redesign, gives you a PDF/doc and wants it turned into a web page, mentions 'landing page', 'sales page', 'marketing page', 'one-pager website', 'web redesign', or asks to deploy a static site to Vercel or Netlify. This skill handles the full pipeline: research, brand extraction, content structuring, image verification, responsive HTML/CSS build, and deployment. |
| version | 1.0.1 |
| author | Akhil Aston |
| license | MIT |
| metadata | {"hermes":{"tags":["landing-pages","web-design","static-sites","vercel","client-websites"],"related_skills":["web-development","frontend-design"]}} |
Landing Page Builder
Build high-quality, deployment-ready landing pages by extracting branding and content from client websites and documents, then producing a responsive HTML/CSS page with verified images and clean structure.
This skill exists because landing pages require careful coordination of branding, content, images, and responsive design — and the most common failure mode is treating source documents as text-only, missing the images that carry half the marketing message.
The Golden Rules
1. Images are content, not decoration. When a marketing PDF shows a classroom photo next to a paragraph about student wellbeing, that photo IS the message. A landing page without those images is incomplete regardless of how good the copy is. Extract and integrate images in the first pass, every time.
2. CSS goes in styles.css, not in the HTML. Always use a separate stylesheet. Inline styles in HTML are unacceptable — they break maintainability, can't use media queries, and make the code unmaintainable. The ONLY exception is the <style> tag in the <head> for critical above-the-fold CSS if specifically requested.
3. Never invent content. Use only what the source document provides. Do not make up image captions, visual directions, testimonial quotes, statistics, or client names. If content is missing, flag it and ask — do not fill gaps with AI-generated placeholder copy.
Anti-Slop Rules (MANDATORY)
These patterns make AI-generated pages look cheap and generic. NEVER use them:
Banned Copy Patterns
- "Revolutionize", "Transform your", "Unleash the power of", "Leverage", "Empower"
- "Cutting-edge", "Next-generation", "State-of-the-art", "Best-in-class"
- "Seamlessly", "Effortlessly", "Supercharge"
- "In today's fast-paced world", "In an era of"
- Starting paragraphs with "Imagine..." or "Picture this..."
- Generic CTAs like "Learn More" or "Get Started" without context — use specific CTAs: "Get Instant Quote", "Book a Demo", "See Pricing"
Banned Visual Patterns
- Gradient mesh blobs or aurora backgrounds (the #1 tell of AI-generated pages)
- Purple-to-blue gradients as primary design language
- Floating 3D objects with no connection to the product
- Generic abstract geometric patterns as hero backgrounds
- Overly rounded cards (border-radius > 1.5rem) with heavy drop shadows
- Identical card layouts repeated 3+ times with only icon changes
- Stock photo hero images that don't match the business (e.g., generic handshake photos)
Banned Code Patterns
- Inline styles in HTML elements
- Using
!important in CSS (except for utility overrides)
- Hardcoded pixel values for font sizes — use
clamp() or rem
- Missing
alt attributes on images
- Using
<div> when semantic elements exist (<section>, <article>, <nav>, <header>, <footer>)
Workflow Overview
The build follows six phases. Do not skip or reorder them — each phase depends on the previous one.
- Research — Scrape the client site for branding, assets, and design language
- Content Extraction — Pull ALL content (text AND images) from provided documents
- Image Catalog — Build a verified inventory of every usable image
- Build — Create the HTML/CSS with proper structure and image integration
- Verify — Test all images, responsiveness, and functionality
- Deploy — Ship to Vercel (or user's preferred host)
Phase 1: Research
Before writing any HTML, understand the client's existing brand and collect every asset you'll need.
Brand Extraction
Fetch the client's website and extract:
- Colors: Inspect CSS custom properties, computed styles on key elements (headings, buttons, backgrounds, accents). Record as hex values.
- Fonts: Check Google Fonts links,
font-family declarations, and @font-face rules. Do not assume — many sites use fonts that look like common ones but aren't.
- Logo: Find the logo image URL (usually in the header or footer). Get the highest-resolution version available.
- Design language: Note spacing patterns, border-radius usage, shadow styles, section background treatments.
Asset Collection
This is critical. Crawl the site's image directories to build a complete catalog:
- Fetch the homepage and key pages, extract all
<img> src attributes and CSS background-image URLs
- Look for patterns in the image paths (e.g.,
/wp-content/uploads/YYYY/MM/ for WordPress sites)
- For each image, record:
- Full URL
- Descriptive name (what does the image show?)
- Dimensions (from the filename or by fetching headers)
- Category (photo, illustration, icon, logo, sticker)
Save this catalog — you'll reference it throughout the build.
Example catalog entry:
URL: https://example.com/wp-content/uploads/2023/08/image-13-1024x768.jpeg
Description: Students working together in classroom
Dimensions: 1024x768
Category: photo
Use for: Problem section, Gallery
Phase 2: Content Extraction
When the user provides a PDF, Word doc, or other content document:
Text Content
- Extract all headings, body copy, statistics, quotes, and CTAs
- Preserve the document's section structure — it usually maps to page sections
- Note any specific phrasing that should be kept verbatim (taglines, endorsed claims, testimonial quotes)
Image Content (DO NOT SKIP THIS)
- Identify every image in the document
- For each image, determine what it shows and which section it belongs to
- Match document images to actual hosted URLs from the client's website (from your Phase 1 catalog)
- If a document image doesn't match any cataloged URL, note it as "needs source" and ask the user
The reason this matters: marketing documents use images strategically. A PDF that shows character illustrations alongside brain science content is telling you those illustrations belong in the Brain Science section of the landing page. Ignoring them produces a text-heavy page that misses the point.
Phase 3: Image Catalog & Verification
Before building anything, verify every image URL you plan to use.
Verification Process
For each image URL:
- Fetch the URL and check the HTTP status code
- A 200 response with correct content-type means it's good
- A 404 or other error means the URL is wrong
Fixing Broken URLs
When an image URL returns 404:
- Go back to the live site and search for the image by partial filename
- Fetch the page source that originally contained the image
- Look for the correct path — filenames often have slight variations (e.g.,
GYM_Kid-at-Desk-300x295.png vs GYM_Kid_AtDesk-222x300.png)
- Never guess filenames. Always verify against the actual server.
Final Catalog
Produce a verified list mapping each content section to its images:
Hero: logo.png (verified), character-teaching.png (verified), sticker-owl.png (verified)
Problem: classroom-photo.jpeg (verified)
Brain Science: character-1.png (verified), character-2.png (verified), character-3.png (verified), character-4.png (verified)
Shift: school-kits.jpg (verified), home-products.jpeg (verified)
Gallery: classroom.jpeg, confidence.png, founders.jpeg (all verified)
Phase 4: Build
File Structure
Keep it simple — a single directory with two files:
project-name/
├── index.html
└── styles.css
No build tools, no frameworks, no JavaScript dependencies. This makes deployment trivial and the page fast.
Design System Setup (styles.css)
Start the stylesheet with the extracted brand system:
:root {
--primary: #0f4661;
--primary-dark: #0a3347;
--accent: #f37b78;
--accent-hover: #e06560;
--gray-50: #f8f9fa;
--gray-100: #f0f2f5;
--gray-200: #e2e5ea;
--gray-300: #c8cdd5;
--gray-400: #9ca3b0;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
--shadow-md: 0 4px 20px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
--shadow-xl: 0 20px 60px rgba(0,0,0,0.16);
--radius-sm: 0.375rem;
--radius-md: 0.75rem;
--radius-lg: 1rem;
--radius-xl: 1.5rem;
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body {
font-family: 'ExtractedFont', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--gray-700);
background: var(--white, #ffffff);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
Typography Rules (CRITICAL)
Bad typography is the #1 reason AI pages look amateur. Follow these strictly:
body { font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); }
h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
h1, h2 { line-height: 1.15; letter-spacing: -0.02em; }
h3 { line-height: 1.3; }
p { line-height: 1.7; max-width: 65ch; }
h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
body { font-weight: 400; }
Use BEM naming: .section__element--modifier. This keeps specificity flat and styles predictable.
Animation & Motion
Add subtle scroll-reveal animations. These make pages feel polished without being distracting:
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed {
opacity: 1;
transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.btn { transition: transform var(--transition), box-shadow var(--transition); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.gallery__item img { transition: transform 0.5s ease; }
.gallery__item:hover img { transform: scale(1.05); }
Add this JavaScript at the bottom for scroll reveals:
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('revealed');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
Section Structure
Build these sections in order, adapting based on the content provided. Not every page needs every section — but this is the standard high-converting flow:
- Header — Sticky nav with logo, section links, and primary CTA button
- Hero — Headline, subheadline, CTA buttons, and a visual element (character illustration, product image, or background)
- Trust Bar — Stats, endorsements, partner logos (builds immediate credibility)
- Problem — Pain points the audience faces. Use a 2-column grid: text on one side, supporting photo on the other. Images here make the problem feel real, not abstract.
- Approach/Solution — How the product/service addresses the problem. Cards or feature blocks work well.
- Vision — The desired future state. Emotionally driven, often with a background image.
- Evidence/Science — Data, research, methodology. If character illustrations or graphics exist, place them here — they make dry content approachable.
- Testimonials — Social proof from real users. Cards with quotes, names, and roles.
- Offer/Pricing — What the user gets. If there are two tiers, use a "Two Paths" comparison layout. Highlight the recommended option.
- Gallery — If images are available, a masonry or grid gallery showcases the product/service in action.
- Contact/CTA — Final conversion section. Form, email, phone, or booking link.
- Footer — Logo, links, copyright, social media.
Image Integration Rules
This is where most landing page builds fail. Follow these rules:
- Problem section: Always pair problem text with a relevant photo (classroom, workplace, real-world context). A 2-column grid (60% text, 40% image) works well.
- Evidence/Science section: If the client has character illustrations, mascots, or infographics, place them here. Use a horizontal flex row showing 3-4 characters with labels.
- Offer section: Show product photos or kit photos alongside the offer description.
- Gallery: Use a CSS grid (3 columns desktop, 2 tablet, 1 mobile) with
object-fit: cover and consistent heights. Add hover zoom effects.
The general principle: every section that makes a claim should have a supporting image. "Our program is used in real classrooms" needs a classroom photo. "Kids love our characters" needs character illustrations.
Responsive Design
Build mobile-first with these breakpoints:
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
}
Key responsive patterns:
- Side-by-side grids stack vertically on mobile
- Image heights reduce at each breakpoint (desktop 300px → tablet 260px → mobile 220px)
- Font sizes use
clamp() for fluid scaling
- Container padding increases slightly on mobile for comfortable reading
HTML Template
The HTML should follow this structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Page Title] — [Brand Name]</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=[Font]:[weights]&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">...</header>
<section class="hero">...</section>
<script>
</script>
</body>
</html>
Phase 5: Verify
After building, verify everything works before presenting to the user. This catches the silent failures (broken images, layout breaks) that undermine trust.
Image Verification
Use the preview server to check every image:
- Start a local server (
npx serve or equivalent)
- Take a screenshot to check overall appearance
- For each image, check if it loaded:
- In the preview, evaluate:
document.querySelectorAll('img').forEach(img => { if (img.naturalWidth === 0) console.log('BROKEN:', img.src) })
- Any image with
naturalWidth === 0 is broken — fix the URL
- Force reload (
location.reload()) before each screenshot to avoid stale cache
Responsive Check
Resize the viewport and verify at three widths:
- Desktop (1280px): All grids show columns, images full-size
- Tablet (768px): Grids reduce columns, images scale down
- Mobile (375px): Single column, hamburger menu, readable text
Fix Before Presenting
If any image is broken or any layout is wrong, fix it BEFORE showing the user. The user should see a polished result, not a work-in-progress. The typical fixes:
- Broken image → fetch correct URL from live site
- Layout overflow → add
overflow: hidden or adjust grid
- Text overflow → reduce font size at breakpoint
Phase 6: Deploy
Vercel Deployment
When the user wants to deploy:
cd project-directory
npx vercel --yes --name [project-name] --prod
If the user wants a specific subdomain, use --name to set it (e.g., --name growyourmind-redesign creates growyourmind-redesign.vercel.app).
Post-Deployment Verification
After deployment, verify the live URL:
- Fetch the deployed URL to confirm it loads
- Check that all images load on the live site (hotlinked images may have CORS or referrer issues)
- Test responsive behavior on the live URL
Common Pitfalls & How to Avoid Them
These are lessons from real projects. Each one caused a round of rework when missed.
| Pitfall | Prevention |
|---|
| Treating PDFs as text-only | Extract images in the same pass as text. Map each image to its section. |
| Guessing image filenames | Never construct URLs from memory. Fetch the live page and extract actual src attributes. |
| Not verifying image URLs | Check every URL before using it. A 404 in production looks unprofessional. |
| Stale preview cache | Force location.reload() before every verification screenshot. |
| Missing responsive images | Test at 375px, 768px, and 1280px. Images that look fine at desktop can overflow on mobile. |
| Text-heavy sections | If a section makes a visual claim, it needs an image. "Real classroom results" without a classroom photo falls flat. |
| Assuming the font | Check the live site's actual font-family. Poppins and Inter look similar but aren't interchangeable. |
Reference Files
For detailed section templates and CSS patterns, see:
references/section-patterns.md — HTML/CSS templates for each section typereferences/verification-checklist.md — Step-by-step QA checklist
SEO Essentials
Every landing page MUST include these. Missing them means the page is invisible to search engines:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Primary Keyword] — [Brand Name] | [Value Prop]</title>
<meta name="description" content="[150-160 char description with primary keyword naturally included]">
<link rel="canonical" href="https://[domain]/[page]">
<meta property="og:title" content="[Title]">
<meta property="og:description" content="[Description]">
<meta property="og:image" content="[Hero image URL — 1200x630px ideal]">
<meta property="og:url" content="[Canonical URL]">
<meta property="og:type" content="website">
<link rel="icon" href="[favicon URL]" type="image/png">
</head>
Additional SEO rules:
- Use ONE
<h1> per page (the hero headline)
- Use
<h2> for section titles, <h3> for subsection titles — proper hierarchy
- All images must have descriptive
alt attributes (not "image1" or "photo")
- Use semantic HTML:
<header>, <nav>, <main>, <section>, <footer>
- Add
loading="lazy" to images below the fold
- Add
loading="eager" to the hero image
Performance Rules
These prevent the page from being slow:
- Images: Use Unsplash/source images with
w= parameter for proper sizing. Never load a 4000px image for a 600px container.
- Fonts: Maximum 2 font families. Load only the weights you use (e.g.,
wght@400;600;700 not wght@100..900).
- CSS: Keep styles in one external file. No CSS frameworks (Bootstrap/Tailwind) for simple landing pages — they add bloat.
- JavaScript: Minimal JS only — hamburger menu, scroll reveal, smooth scroll. No jQuery, no React, no framework for a static landing page.
- Above the fold: The hero section must render without waiting for external resources. Use
font-display: swap and preconnect to Google Fonts.
Quick Start Checklist
When you receive a landing page request, run through this mentally:
