Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Generate a complete, deployable landing page from a brief. Produces a single self-contained HTML file with Tailwind CSS (via CDN), responsive design, dark mode, semantic HTML, and OG meta tags. Sections: hero with CTA, features, social proof, pricing (optional), FAQ, footer. Use when building a marketing page, product launch page, coming soon page, or any standalone landing page. Triggers: 'landing page', 'create a page', 'marketing page', 'launch page', 'coming soon page', 'one-page site'.
| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-05 | ✗→✓ | ▲ Improved | 76% | 0% |
| case-09 | ✗→✓ | ▲ Improved | 92% | 0% |
| case-13 | ✗→✓ | ▲ Improved | 115% | 0% |
| case-14 | ✓→✗ | ▼ Worse | 73% | 0% |
| case-21 | ✓→✗ | ▼ Worse | 25% | 0% |
Generate a complete, deployable landing page as a single HTML file. No build step, no dependencies — open it in a browser or deploy anywhere.
Ask the user for:
| Field | Required | Example | |-------|----------|---------| | Business/product name | Yes | "Acme Plumbing" | | Value proposition | Yes | "24/7 emergency plumbing across Newcastle" | | Target audience | Yes | "Homeowners in the Hunter Valley" | | Primary CTA | Yes | "Call Now" / "Get a Quote" / "Sign Up" | | Secondary CTA | No | "Learn More" / "View Pricing" | | Brand colours | No | Primary: #1E40AF, accent: #F59E0B | | Logo URL or text | No | URL to logo image, or just use business name | | Phone / email | No | For contact section | | Sections wanted | No | Default: hero, features, testimonials, FAQ, footer |
If no brand colours provided, suggest using the color-palette skill to generate them, or use a sensible default (slate/blue).
Produce a single HTML file with:
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<!-- Meta, OG tags, favicon -->
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind config with custom colours</script>
</head>
<body>
<!-- Nav -->
<!-- Hero -->
<!-- Features -->
<!-- Social Proof -->
<!-- Pricing (optional) -->
<!-- FAQ -->
<!-- Footer -->
<!-- Dark mode toggle script -->
</body>
</html>Responsive: Mobile-first with three breakpoints
Default: mobile (< 640px)
sm: 640px+ (tablet)
lg: 1024px+ (desktop)Dark mode: Three-state toggle (light/dark/system)
.dark class on <html> — no CSS media queryAccessibility:
SEO:
seo-local-business skill)Performance:
loading="lazy")If user provides brand colours, configure Tailwind inline:
html<script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { primary: { DEFAULT: '#1E40AF', light: '#3B82F6', dark: '#1E3A8A' }, accent: { DEFAULT: '#F59E0B', light: '#FBBF24', dark: '#D97706' }, } } } } </script>
If no colours provided, use Tailwind's built-in palette (slate for neutrals, blue for primary).
Write the file to the user's specified location, or default to ./index.html.
After generating:
open index.html (macOS) or python3 -m http.server for a local serverwrangler deploy for Workers| Request | Approach | |---------|----------| | "Coming soon page" | Hero only + email signup form + countdown timer | | "Product launch" | Hero + features + pricing + CTA-heavy | | "Portfolio" | Hero + project grid + about + contact | | "Event page" | Hero + schedule + speakers + venue + register CTA | | "App download" | Hero + features + screenshots + app store badges |
Adapt the section selection to match the page purpose. Not every page needs pricing or FAQ.
Other measured skills in the registry, with their headline benchmark lift.