Can I use my own fonts and colors?

The skill encourages fresh palettes and typography for every project, providing a curated list of high-quality alternatives to standard web fonts.

How does this skill prevent generic 'AI-style' designs?

It utilizes a 'Vibe Discovery' process that forces the creation of a unique aesthetic spec based on real-world objects and unexpected influences before any code is written.

What is the 50% Rule mentioned in the skill?

The 50% Rule mandates that half of the design and development effort is focused on the hero section to ensure a powerful, high-converting first impression.

Does it support specific frontend frameworks?

Yes, while the skill focuses on design logic and CSS patterns, its principles can be applied to React, Vue, Tailwind CSS, or any modern frontend stack.

Landing Page Designer

Name: Landing Page Designer
Author: 2389-research

by2389-research

•

Design Tools

Generates high-converting, visually unique landing pages using a mandatory 'Vibe Discovery' process to eliminate generic AI-generated aesthetics.

Landing Page Designer is a specialized Claude Code skill designed to move beyond generic, repetitive web designs. It enforces a creative 'Vibe Discovery' workflow that synthesizes unique aesthetic directions from real-world inspirations—like a Tokyo subway or a vintage recording studio—to ensure no two pages look alike. By implementing anti-AI-slop principles, it steers Claude away from overused fonts and layouts, focusing instead on distinctive hero sections, bento grids, and professional-grade animation vocabulary to create pages valued at professional agency standards.

Key Features

01Anti-Convergence Logic: Prevents repetitive font, color, and layout patterns through mandatory variety rules.

02Section-by-Section Guidance: Structured patterns for hero sections, bento grids, social proof, and pricing tiers.

03Vibe Discovery Process: Synthesizes unique aesthetic directions from real-world references and emotional triggers.

048 GitHub stars

05Curated Asset Selection: Recommends high-quality alternatives to overused icons and typography like Inter or Lucide.

06Animation Vocabulary: Implements professional motion effects like blur-ins, marquees, and staggered reveals.

Use Cases

01Developing marketing landing pages for campaigns that require a specific atmospheric or 'vibe'-driven brand identity.

02Building a high-converting SaaS homepage that stands out from typical tech startup designs.

03Creating a visually distinctive product launch page or waitlist with professional-grade UI.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add 2389-research/claude-plugins skills

For use in Claude.ai and ChatGPT

Download Skill