Landing Page

Generate a complete, deployable landing page from a brief. Produces a single self-contained HTML file with Tailwind CSS (via CDN), responsive design,

Source: jezweb/claude-skills
Landing Page preview 1

What Is Landing Page?

The Landing Page skill for Claude Code is a powerful design automation tool that generates complete, deployable landing pages from a brief. The skill outputs a single, self-contained HTML file leveraging Tailwind CSS via CDN, ensuring responsive design, accessibility, and modern user experience features such as dark mode. It is tailored for marketing sites, product launches, “coming soon” pages, and any scenario where a streamlined, professional one-page site is required with minimal setup and zero build steps.

Why Use Landing Page?

Manually building landing pages can be time-intensive—requiring front-end expertise, design sense, and an understanding of HTML semantics and SEO best practices. The Landing Page skill eliminates these barriers:

  • Rapid Prototyping: Instantly turn a project brief into a live, ready-to-deploy page.
  • No Build or Dependencies: The output is a single HTML file; there’s no need for Node.js, build tools, or deployment pipelines.
  • Consistency and Best Practices: Utilizes up-to-date Tailwind CSS and semantic HTML, ensuring best-in-class mobile responsiveness and accessibility.
  • Customizable: Easily adapt sections, colors, and branding to fit any business or product.
  • Deploy Anywhere: The produced HTML file works with any static hosting solution or can be opened directly in a browser.

This makes the skill ideal for developers, marketers, and entrepreneurs who need to launch pages quickly without sacrificing quality or maintainability.

How to Get Started

Using the Landing Page skill is straightforward. Begin by preparing a concise project brief containing the following:

FieldRequiredExample
Business/product nameYes"Acme Plumbing"
Value propositionYes"24/7 emergency plumbing across Newcastle"
Target audienceYes"Homeowners in the Hunter Valley"
Primary CTAYes"Get a Quote"
Secondary CTANo"Learn More"
Brand coloursNoPrimary: #1E40AF, accent: #F59E0B
Logo URL or textNoLink to logo or just use business name
Phone / emailNoFor contact or footer section
Sections wantedNohero, features, testimonials, FAQ, footer

Example Prompt

landing page for "Acme Plumbing": 24/7 emergency plumbing across Newcastle. Target audience: homeowners in the Hunter Valley. Main CTA: "Get a Quote". Brand colors: primary #1E40AF, accent #F59E0B. Sections: hero, features, testimonials, FAQ, footer.

Once you provide this brief, the skill generates a complete HTML file. Simply download and open it in your browser or upload it to any static hosting provider.

Key Features

  • Single HTML File: All content, styling, and layout are included in one document—no external assets except for CDN-hosted Tailwind CSS.
  • Tailwind CSS Integration: Uses Tailwind’s CDN, ensuring modern, utility-first styling.
  • Responsive Design: Automatically adapts to desktops, tablets, and smartphones.
  • Dark Mode Support: Detects user preference and applies a dark color palette.
  • Semantic HTML: Uses proper HTML5 elements for improved SEO and accessibility.
  • OG Meta Tags: Includes Open Graph meta tags for rich previews on social media.
  • Customizable Sections: Typical sections include hero with CTA, features, testimonials, optional pricing, FAQ, and footer.
  • Branding Support: Easily incorporates custom colors, business names, and logo.
  • Contact Details: Supports inclusion of phone numbers and email addresses in the footer or hero sections.

Example Output Snippet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Acme Plumbing | 24/7 Emergency Service</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/dist/tailwind.min.css" rel="stylesheet">
  <meta property="og:title" content="Acme Plumbing — 24/7 Emergency Service">
  <meta property="og:description" content="Fast, reliable plumbing for homeowners in the Hunter Valley.">
</head>
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <!-- Hero Section -->
  <section class="py-16 px-4 text-center">
    <h1 class="text-4xl font-bold text-blue-900">Acme Plumbing</h1>
    <p class="mt-4 text-xl">24/7 emergency plumbing across Newcastle</p>
    <a href="tel:123456789" class="mt-6 inline-block px-8 py-3 bg-yellow-400 text-blue-900 font-semibold rounded shadow hover:bg-yellow-500 transition">Get a Quote</a>
  </section>
  <!-- Features, Testimonials, FAQ, Footer... -->
</body>
</html>

Best Practices

  • Provide Detailed Briefs: The more information given (CTAs, colors, logo, brand voice), the more accurately the page will reflect your brand.
  • Review and Edit: After generation, review the HTML for accuracy and adjust text or links as needed.
  • Optimize Assets: If using a logo, ensure it is optimized for web (SVG or compressed PNG/JPEG).
  • Test Responsiveness: Preview the page on multiple devices and browsers.
  • Deploy on Static Hosts: Use platforms like Netlify, Vercel, or GitHub Pages for fast, global delivery.

Important Notes

  • The skill is compatible only with Claude Code and does not require any external build tools or frameworks.
  • All CSS is provided via Tailwind CDN; no local stylesheets are needed.
  • For optimal SEO and social sharing, customize meta tags and ensure OG images are added if desired.
  • While the skill generates a strong starting point, further customization or enhancement may be required for advanced interactions or analytics.
  • If no brand colors or logos are provided, sensible defaults will be used.
  • This tool is designed for quick launches and MVPs; for complex or dynamic sites, consider traditional development workflows.

More Skills You Might Like

Explore similar skills to enhance your workflow

Architecture

Architecture design skill with ADR records, system design checklists, scalability assessment, and architecture patterns

Nano Banana Pro

Generate, edit, and transform images effortlessly using Gemini AI technology

User Stories

Create user stories following the 3 C's (Card, Conversation, Confirmation) and INVEST criteria with descriptions, design links, and acceptance

Modern JavaScript Patterns

- Migrating from callbacks to Promises/async-await

Bats Testing Patterns

- Implementing test-driven development (TDD) for scripts

Projection Patterns

Comprehensive guide to building projections and read models for event-sourced systems