Agent skill · design visual · aiskillstore
landing-page-design
Landing page conversion optimization with layout rules, hero section design, and CTA psychology. Covers above-the-fold formula, social proof placement, mobile design, and F-pattern reading. Use for: startup landing pages, product pages, SaaS marketing, conversion optimization. Triggers: landing page, hero section, above the fold, conversion optimization, landing page design, cta button, hero image, landing page layout, saas landing page, product page design, conversion rate, landing page best practices
Why this skill is useful
Provides specific design principles and layout rules for optimizing landing pages that the AI wouldn't reliably generate on its own.
What it needs
Requires belt installed locally. Requires inference.sh account access. About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Install the belt CLI skill: npx skills add belt-sh/cli Landing Page Design Design high-converting landing pages with AI-generated visuals via inference.sh CLI. Quick Start Requires inference.sh CLI (belt). Install instructions Above-the-Fold Formula Everything visible before scrolling must communicate value in 5 seconds. The 5 Elements Element Rule Example --------- ------ --------- Headline 6-12 words, states the outcome "Ship docs in minutes, not days" Subheadline 15-25 words, expands on how "AI-powered documentation that writes itself from your codebase. No templates needed." Hero image Shows the OUTCOME, not the product Person looking satisfied at results, not a screenshot of your UI Primary CTA Action verb + value "Start Free Trial" not "Submit" or "Learn More" Social proof Logos, count, or micro-testimonial "Trusted by 10,000+ teams at [logos]" Headlines Formulas That Convert Formula Example --------- --------- [Outcome] without [pain] "Beautiful docs without the design skills" [Outcome] in [timeframe] "Launch your site in 5 minutes" The [better way] to [common task] "The faster way to build APIs" Stop [pain]. Start [outcome]. "Stop guessing. Start knowing." [Number] [things] to [outcome] "One tool to manage all your data" What Makes Headlines Fail Hero Images Show the Outcome, Not the Product CTA Buttons Text Good CTAs Bad CTAs ----------- ---------- "Start Free Trial" "Submit" "Get Started Free" "Click Here" "See It in Action" "Learn More" (low commitment) "Create Your First Report" "Sign Up" (vague) "Try Free for 14 Days" "Register" Formula: Action verb + value/outcome + (optional: reduce risk) Design Element Rule --------- ------ Color High contrast with background — must be the most visible element Size Minimum 44px height (tap target), wide enough for text + padding Position Above the fold, repeated after each major section Whitespace Generous padding around button, don't crowd it Secondary CTA If needed, use text link below ("or watch a demo") Section O …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/landing-page-design--8f5c0c