Landing Page Design
Create high-converting, visually distinctive landing pages with Vibe Discovery process and anti-AI-slop principles
Install
/plugin marketplace add 2389-research/claude-pluginsInstall command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →Landing Page Design Plugin
Build landing pages that don't look like every other AI-generated page.
Installation
/plugin marketplace add 2389-research/claude-plugins
/plugin install landing-page-design@2389-research
What this plugin provides
Main skill: landing-page-design
A workflow for building landing pages worth $50-100. Forces unique design direction through the Vibe Discovery process so you don't end up with generic AI-slop.
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, Lucide icons, generic bento grids, the same animations everywhere. This plugin forces a unique aesthetic direction for every project.
How it works
Vibe discovery
4 context questions generate a unique direction. Colors, typography, and layout are invented from scratch (not looked up from a template). Anti-convergence rules prevent generic output, and a freshness check runs before any coding starts.
The 50% rule
Half your effort goes to the hero section. It's the social media preview and the first impression. Everything else flows from the hero.
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
- Hero -- the make-or-break element (50% of effort)
- Features/Benefits -- bento grids, alternating rows, icon grids
- Social proof -- logo marquee, testimonials, stats
- How it works -- numbered steps, timeline, flowchart
- Pricing -- tier comparison with recommended highlight
- Final CTA -- repeat value prop, single focused action
- 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 -- skill reference
License
MIT - Part of the 2389 Research Claude Plugins Marketplace
If this helped you ship a page that doesn't look like every other AI-generated landing page, a ⭐ helps us know it's landing.
Built by 2389 · Part of the Claude Code plugin marketplace
Similar plugs
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…
Why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.
Production-grade engineering skills for AI coding agents.