landing-page-design

Landing Page Design Plugin

Create high-converting, visually distinctive landing pages that stand out in an AI-saturated world.

Installation

/plugin install landing-page-design@2389-research

What This Plugin Provides

Main Skill: landing-page-design

A comprehensive workflow for building landing pages worth $50-100. The skill enforces unique design direction through the Vibe Discovery process, preventing the generic "AI-slop" look.

Quick Example

User: "Build a landing page for my productivity app"
Claude: Before writing any code, let's run Vibe Discovery.
Q1: What's one real-world place or object this brand would be?
Q2: What's the ONE emotion someone should feel in the first 3 seconds?
Q3: Pick TWO unexpected influences to collide:
Q4: What should this page NEVER be mistaken for?
[After answers, Claude creates a unique Vibe Spec and builds a distinctive page]

The Problem This Solves

AI-generated landing pages converge on the same patterns:

• Purple gradients
• Inter/Roboto fonts
• Lucide icons
• Generic bento grids
• Same animations everywhere

This plugin forces Claude to create a unique aesthetic direction for every project.

Key Features

Vibe Discovery Process

• 4 context questions that generate unique direction
• Color/typography/layout invention (not lookup)
• Anti-convergence rules to prevent generic output
• Freshness check before coding

The 50% Rule

Half your effort goes to the hero section. It's the social media preview, the first impression, the hook.

Anti-AI-Slop Principles

• Fonts: Kill Inter/Roboto. Use Newsreader, Playfair Display, Clash Display, etc.
• Icons: Avoid Lucide. Use Iconify Solar, Heroicons, Phosphor.
• Colors: No purple gradients. Derive from real-world references.
• Layouts: Break the grid. Overlapping elements, diagonal sections, asymmetry.

Animation Vocabulary

Full animation system for entrances, continuous effects, interactions, and decorative elements.

Section Composition

1. Hero - The make-or-break element (50% of effort)

2. Features/Benefits - Bento grids, alternating rows, icon grids

3. Social Proof - Logo marquee, testimonials, stats

4. How It Works - Numbered steps, timeline, flowchart

5. Pricing - Tier comparison with recommended highlight

6. Final CTA - Repeat value prop, single focused action

7. Footer - Navigation, social, legal

Resources

• superhero.design - Hero section gallery
• H1 Gallery - Headline inspiration
• Iconify - Unified icon API
• Google Fonts - Typography
• Fontshare - Free quality fonts

Documentation

• CLAUDE.md - Full plugin instructions for Claude
• skills/SKILL.md - Complete skill reference

License

MIT - Part of the 2389 Research Claude Plugins Marketplace