landing-page-architect

name

landing-page-architect

description

The ultimate HTML landing page skill for Claude.ai artifacts. Use this skill EVERY TIME the user asks to build, design, create, or improve a landing page, sales page, coming soon page, product page, signup page, event page, or any marketing page as an HTML artifact. Also trigger when the user says 'landing page', 'sales page', 'hero section', 'build me a page', 'design a page', 'marketing page', 'conversion page', 'squeeze page', 'opt-in page', 'launch page', 'promo page', 'one-pager', or any variation in Arabic like 'اعملي landing page', 'صمملي صفحة', 'عايز صفحة هبوط', 'صفحة تسويقية'. Covers: design system generation (67 styles, 161 color palettes, 57 font pairings, 100 industry reasoning rules), conversion-focused layout patterns, RTL/Arabic support, SEO/AEO/GEO/AIO 2026 standards, and anti-AI-slop aesthetics. Produces single-file HTML artifacts with Tailwind CSS via CDN that look hand-designed, not AI-generated.

Landing Page Architect

Build conversion-focused, visually stunning HTML landing pages as Claude.ai artifacts. Every page should look like it was designed by a senior designer at a top agency, not generated by AI.

Core Philosophy

This skill exists because most AI-generated landing pages share the same problems:

1. They look generic and obviously AI-made (purple gradients, Inter font, predictable layouts)
2. Colors and typography lack professional cohesion
3. Layouts follow the same boring pattern every time
4. No real conversion thinking, just pretty sections stacked
5. Arabic/RTL is an afterthought or broken entirely
6. No consideration for 2026 web standards (SEO/AEO/GEO/AIO)

This skill fixes all of that by combining a data-driven design system with conversion psychology and modern web standards.

---

Step 0: Read This Before Every Landing Page

Before writing ANY code, go through this mental checklist:

Understand the Request

• What is being sold/promoted? (SaaS, service, product, event, course, agency)
• Who is the audience? (B2B decision maker, consumer, developer, Arabic-speaking, English-speaking)
• What action should the visitor take? (sign up, buy, book a call, download, register)
• What language/direction? (English LTR, Arabic RTL, bilingual)

Choose a Design Direction FIRST

Do NOT start coding. First, determine:

1. The landing page pattern (from Step 1)
2. The visual style (from Step 2)
3. The color palette (from Step 2)
4. The typography pairing (from Step 2)

Only then start building.

---

Step 1: Select Landing Page Pattern

Choose the conversion pattern that matches the business goal. These are the proven patterns from the landing page database:

Pattern	Best For	Section Flow	CTA Strategy
Hero + Features + CTA	SaaS, tools, apps	Hero > Value prop > 3-5 features > CTA > Footer	Sticky nav CTA + bottom CTA
Hero + Testimonials + CTA	Services, B2C, agencies	Hero > Problem > Solution > Testimonials > CTA	CTA placed right after social proof
Product Demo + Features	Software, interactive tools	Hero > Video/mockup > Feature breakdown > CTA	Video center + CTA right/bottom
Minimal Single Column	Simple products, MVPs, apps	Headline > Short description > 3 bullets > CTA > Footer	Single large centered CTA
Pricing-First	SaaS, subscription products	Hero > Pricing table > Feature comparison > FAQ > CTA	Pricing cards with embedded CTAs
Story-Driven	Brands, agencies, nonprofits, courses	Hook > Problem > Journey > Solution > CTA	End of each narrative section
Trust + Authority	B2B, enterprise, consulting, financial	Hero > Client logos > Case stats > Testimonials > CTA	Multiple trust signals before CTA
Social Proof Cascade	Consumer services, e-commerce	Hero > Reviews > Stats > User stories > CTA	Social proof drives every section
Waitlist/Coming Soon	Pre-launch, new products	Hero > Teaser > Email capture > Social links	Single email capture form
Event/Conference	Events, conferences, summits	Hero with date > Speakers > Schedule > Tickets > Venue	Ticket/register CTA repeated

Pattern Selection Rules

• If the user doesn't specify, infer from the product type
• SaaS/tools default to Hero + Features + CTA
• Services/agencies default to Trust + Authority
• E-commerce/products default to Social Proof Cascade
• Events default to Event/Conference
• Pre-launch default to Waitlist/Coming Soon
• Courses/digital products default to Story-Driven

---

Step 2: Generate Design System

Run the design system generator to get data-driven recommendations:

python3 scripts/search.py "<product_type> <industry> <keywords>" --design-system -p "<Project Name>"

The script searches across 5 databases simultaneously:

• Products (161 product types with style recommendations)
• Styles (67 UI styles with implementation details)
• Colors (161 industry-specific color palettes with WCAG-compliant tokens)
• Typography (57 font pairings with Google Fonts imports)
• Landing patterns (24 conversion-optimized structures)

It returns a complete design system with: pattern, style, colors, typography, effects, anti-patterns, and a pre-delivery checklist.

If the Script is Unavailable

If you cannot run the script (e.g., environment limitations), use these reference files directly:

• Read references/products.csv to find the product type and its recommended styles
• Read references/ui-reasoning.csv to apply industry-specific reasoning rules
• Read references/colors.csv to select the color palette
• Read references/typography.csv to pick the font pairing
• Read references/landing.csv to determine the landing page pattern
• Read references/styles.csv for the full style implementation details

Manual Design System Assembly

When assembling manually, follow this reasoning chain:

1. Identify product category from products.csv (match keywords)
2. Get reasoning rules from ui-reasoning.csv (match UI_Category)
3. Select style based on Style_Priority field in reasoning rules
4. Select colors from colors.csv (match product type)
5. Select typography from typography.csv (match mood keywords from reasoning rules)
6. Select landing pattern from landing.csv (match Recommended_Pattern in reasoning rules)
7. Note anti-patterns from the Anti_Patterns field

---

Step 3: Build the HTML Artifact

Technical Foundation

Every landing page artifact MUST use this structure:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Page Title] | [Brand]</title>
  <meta name="description" content="[Compelling meta description, 150-160 chars]">

  <!-- Open Graph / Social -->
  <meta property="og:title" content="[Title]">
  <meta property="og:description" content="[Description]">
  <meta property="og:type" content="website">

  <!-- Tailwind CSS via CDN -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Google Fonts (from design system) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="[GOOGLE_FONTS_URL]" rel="stylesheet">

  <!-- Lucide Icons -->
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>

  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '[FROM_DESIGN_SYSTEM]',
            'on-primary': '[FROM_DESIGN_SYSTEM]',
            secondary: '[FROM_DESIGN_SYSTEM]',
            accent: '[FROM_DESIGN_SYSTEM]',
            'on-accent': '[FROM_DESIGN_SYSTEM]',
            surface: '[FROM_DESIGN_SYSTEM]',
            foreground: '[FROM_DESIGN_SYSTEM]',
            muted: '[FROM_DESIGN_SYSTEM]',
            'muted-fg': '[FROM_DESIGN_SYSTEM]',
            border: '[FROM_DESIGN_SYSTEM]',
          },
          fontFamily: {
            heading: ['[HEADING_FONT]', 'sans-serif'],
            body: ['[BODY_FONT]', 'sans-serif'],
          },
        },
      },
    }
  </script>

  <style>
    /* Custom styles that Tailwind can't handle */
    html { scroll-behavior: smooth; }
    body { font-family: '[BODY_FONT]', sans-serif; }

    /* Animation classes */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in-up {
      animation: fadeInUp 0.6s ease-out forwards;
      opacity: 0;
    }
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
    .delay-400 { animation-delay: 0.4s; }

    /* Scroll-triggered animations via Intersection Observer */
    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; }
    .reveal.active { opacity: 1; transform: translateY(0); }

    /* Smooth hover transitions on ALL interactive elements */
    a, button, [role="button"] {
      transition: all 0.2s ease;
      cursor: pointer;
    }

    /* Reduced motion respect */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }
  </style>
</head>
<body class="bg-surface text-foreground antialiased">
  <!-- CONTENT HERE -->

  <script>
    // Initialize Lucide icons
    lucide.createIcons();

    // Intersection Observer for scroll animations
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('active');
        }
      });
    }, { threshold: 0.1 });

    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      });
    });
  </script>
</body>
</html>

For Arabic/RTL Pages

Change the <html> tag:

<html lang="ar" dir="rtl">

And add these RTL-specific styles:

/* RTL adjustments */
[dir="rtl"] { text-align: right; }
[dir="rtl"] .flex { flex-direction: row-reverse; }
[dir="rtl"] .space-x-4 > * + * { margin-right: 1rem; margin-left: 0; }

/* Arabic typography */
body { font-family: '[ARABIC_FONT]', 'Tajawal', 'Cairo', sans-serif; }

Recommended Arabic fonts (pair with Google Fonts):

• Tajawal - Clean, modern, works for SaaS and professional (most versatile)
• Cairo - Friendly, rounded, great for consumer brands
• IBM Plex Sans Arabic - Technical, professional, B2B
• Noto Kufi Arabic - Bold, editorial, great for headlines
• Readex Pro - Modern geometric, good for tech
• Almarai - Neutral and readable, good for body text

For bilingual pages, use separate font stacks:

fontFamily: {
  'heading-en': ['[ENGLISH_HEADING]', 'sans-serif'],
  'heading-ar': ['Noto Kufi Arabic', 'sans-serif'],
  'body-en': ['[ENGLISH_BODY]', 'sans-serif'],
  'body-ar': ['Tajawal', 'sans-serif'],
},

---

Step 4: Anti-AI-Slop Design Rules

These rules prevent the landing page from looking AI-generated. Follow them strictly.

NEVER Do These (Instant AI Detection)

1. Purple/violet gradient backgrounds - The #1 sign of AI-generated design
2. Inter, Roboto, or system fonts - Choose distinctive fonts from the typography database
3. Generic hero with centered text + gradient button - Break the pattern
4. Symmetrical 3-column feature grids - Use asymmetric layouts, bento grids, or staggered cards
5. Stock-photo-style placeholder images - Use solid color blocks, patterns, or illustrations instead
6. Identical card heights with icon + title + description - Vary card sizes and content density
7. Blue-to-purple CTA buttons - Use the accent color from the design system
8. "Get Started" as CTA text - Write specific, benefit-driven CTAs
9. Emoji as icons - Use Lucide icons exclusively (via <i data-lucide="icon-name"></i>)
10. Gray borders everywhere - Use the border color from design system tokens

ALWAYS Do These (Professional Quality Signals)

1. Distinctive typography pairing - heading font that has character, body font that reads well
2. Color palette with personality - pulled from the design system, not generic blue
3. Asymmetric layouts - hero with offset image, staggered feature cards, varied section widths
4. Generous whitespace - sections with 80-120px vertical padding, not cramped
5. Micro-interactions - hover states on cards (lift + shadow), button hover (color shift + slight scale), link underline animations
6. Visual rhythm - alternate section backgrounds (white, muted, white, muted)
7. One hero pattern per page, executed boldly - split hero, angled hero, full-bleed image, gradient mesh background
8. Real shadow depth - layered shadows (shadow-sm for subtle, custom multi-layer for cards)
9. Scroll-triggered animations - sections fade in as user scrolls (via Intersection Observer)
10. Consistent spacing tokens - use the Tailwind config, not arbitrary values

Layout Breaking Techniques

To avoid the "AI grid" look, use at least 2 of these:

• Overlapping elements - hero image breaking into the next section
• Full-bleed + contained alternation - some sections span full width, others are contained
• Asymmetric grid - 60/40 splits, offset cards, staggered columns
• Decorative elements - subtle background shapes, gradient meshes, dot patterns
• Section transitions - angled dividers, wave SVGs, or overlap between sections
• Bento grid sections - for features or stats, use uneven grid cells

---

Step 5: Conversion Architecture

Every section must serve the conversion goal. Not decoration, function.

Hero Section (The First 5 Seconds)

• Headline: One clear value proposition. Not clever, clear. 6-12 words max.
• Subheadline: Explain what it does and for whom. 15-25 words.
• CTA: High-contrast button with specific action text. "Start Free Trial" not "Get Started"
• Visual proof: Screenshot, demo, illustration, or social proof number
• Above the fold: Headline + CTA must be visible without scrolling on mobile

Social Proof Section

• Client logos (if B2B): Row of 4-6 logos, grayscale, with "Trusted by" label
• Testimonials: Real name + role + company + photo placeholder. 2-3 max.
• Stats: 3-4 numbers with labels. "10,000+ users" not "Many users"
• Trust badges: Payment security, certifications, guarantees

Features Section

• Do NOT list more than 6 features
• Each feature: icon + bold title + 1-2 sentence description
• Use varied layouts: bento grid, alternating left-right, or card mosaic

CTA Repetition Strategy

• Primary CTA in hero (above fold)
• Secondary CTA after social proof
• Final CTA before footer (different urgency angle)
• Sticky nav CTA (visible on scroll)

Urgency/Scarcity (When Applicable)

• Limited time offers: countdown timer or "Offer ends [date]"
• Limited availability: "Only X spots left"
• Social proof urgency: "Y people signed up today"

---

Step 6: SEO/AEO/GEO/AIO 2026 Standards

Every landing page must include these for modern search visibility:

Technical SEO

<!-- Required meta tags -->
<meta name="robots" content="index, follow">
<link rel="canonical" href="[CANONICAL_URL]">

<!-- Structured Data (JSON-LD) -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "[Organization|Product|Event|Service]",
  "name": "[Name]",
  "description": "[Description]",
  "url": "[URL]"
}
</script>

Semantic HTML Structure

<header>  <!-- Navigation -->
<main>
  <section aria-label="Hero">        <!-- Hero -->
  <section aria-label="Features">    <!-- Features -->
  <section aria-label="Testimonials"> <!-- Social Proof -->
  <section aria-label="Pricing">     <!-- Pricing -->
  <section aria-label="FAQ">         <!-- FAQ with <details>/<summary> -->
</main>
<footer>  <!-- Footer -->

AEO (Answer Engine Optimization)

• Use <details> and <summary> for FAQ sections (Google Featured Snippets)
• Structure headings as questions when possible
• Include "How it works" sections with numbered steps

GEO (Generative Engine Optimization)

• Write content that AI systems can cite: clear, factual, structured
• Use semantic headings that describe content accurately
• Include statistics and specific claims with context

AIO (AI Overview Optimization)

• Front-load key information in each section
• Use concise, scannable paragraphs (3-4 sentences max)
• Structure content with clear hierarchy (H1 > H2 > H3)

Accessibility (WCAG 2.2 AA)

• All text: minimum 4.5:1 contrast ratio against background
• All interactive elements: minimum 44x44px touch target
• All images/icons: descriptive alt text or aria-label
• Keyboard navigation: visible focus states, logical tab order
• prefers-reduced-motion: disable animations
• prefers-color-scheme: support if dark mode variant exists

---

Step 7: Pre-Delivery Quality Check

Before presenting the artifact, verify every item:

Visual Quality

• No emojis as icons (Lucide icons only)
• Font pairing is distinctive (not Inter, Roboto, Arial, or system fonts)
• Color palette is cohesive and from design system
• No purple/violet gradients unless specifically requested
• Layout breaks the "AI grid" with at least 2 breaking techniques
• Generous whitespace between sections (py-16 minimum, py-24 preferred)
• Visual hierarchy is clear (one H1, structured H2s, readable body)

Interactions

• All buttons have hover states with smooth transitions (200-300ms)
• Cards have hover lift effect (translateY + shadow change)
• Links have underline or color-change hover
• cursor-pointer on all clickable elements
• Scroll-triggered animations on sections (Intersection Observer)
• Smooth scroll for anchor links

Conversion

• CTA is above the fold on mobile
• CTA text is specific and benefit-driven
• CTA button has high contrast against its background
• Social proof exists before or near CTA
• CTA is repeated at least 2-3 times on the page

Responsiveness

• Works on 375px (mobile), 768px (tablet), 1024px (laptop), 1440px (desktop)
• No horizontal scroll at any breakpoint
• Font sizes scale appropriately (heading: text-3xl md:text-5xl, body: text-base md:text-lg)
• Grid layouts collapse to single column on mobile
• Navigation collapses to hamburger on mobile

RTL (If Arabic)

• dir="rtl" on <html> tag
• lang="ar" on <html> tag
• Text alignment respects RTL
• Flexbox direction is correct (row-reverse where needed)
• Arabic font is loaded and applied
• Icons that imply direction are flipped (arrows, etc.)
• Spacing utilities work correctly in RTL context

SEO/Technical

• Semantic HTML (<header>, <main>, <section>, <footer>)
• aria-label on sections
• alt text on images
• Meta description included
• Open Graph tags included
• JSON-LD structured data included (when applicable)
• <h1> used once, heading hierarchy maintained
• FAQ section uses <details>/<summary> pattern

---

Reference Files

The references/ directory contains the data used by the design system:

File	Records	Content
styles.csv	67+ styles	Full style definitions with colors, effects, implementation checklists
colors.csv	161 palettes	Industry-specific color tokens (primary, secondary, accent, background, etc.)
typography.csv	57 pairings	Font combinations with Google Fonts URLs and CSS imports
landing.csv	24 patterns	Landing page structures with CTA placement and conversion strategy
products.csv	161 types	Product categories with style and pattern recommendations
ui-reasoning.csv	100 rules	Industry-specific reasoning for design system generation
ux-guidelines.csv	99 guidelines	UX best practices with do/don't examples and severity
html-tailwind.csv	44 guidelines	HTML + Tailwind-specific implementation rules

When you need more specific data (e.g., "what style works for fintech?"), read the relevant CSV:

python3 scripts/search.py "fintech banking" --domain product
python3 scripts/search.py "glassmorphism" --domain style
python3 scripts/search.py "elegant luxury" --domain typography
python3 scripts/search.py "trust authority" --domain landing

---

Common Scenarios

"Build me a landing page for [X]"

1. Run design system generator (Step 2)
2. Select landing pattern based on product type (Step 1)
3. Build HTML artifact (Step 3) following anti-slop rules (Step 4)
4. Apply conversion architecture (Step 5)
5. Add SEO structure (Step 6)
6. Run quality check (Step 7)

"اعملي landing page لـ [X]" (Arabic request)

Same flow, but:

• Set dir="rtl" and lang="ar"
• Use Arabic font (Tajawal or Cairo as default)
• Adapt CTA text to Arabic
• Ensure all layout directions respect RTL
• Consider bilingual toggle if audience is mixed

"Improve this landing page"

• Read the existing code
• Identify which anti-slop rules are being violated
• Run design system for the product type
• Rebuild with proper design system tokens
• Add missing conversion elements
• Check against quality checklist

"Make it look less AI-generated"

Focus specifically on Step 4 (Anti-AI-Slop Rules):

• Replace generic fonts with distinctive pairing
• Break symmetric layouts with asymmetry
• Replace purple gradients with design-system colors
• Add micro-interactions and hover states
• Vary section layouts and card sizes
• Add decorative elements (background shapes, gradients, patterns)