What is the landing page design skill?
The landing page design skill is a SKILL.md in 101-skills/superpowers. It gives an AI coding agent an above-the-fold formula with five elements, headline formulas, CTA text and button rules, a nine-section page order, social proof placement, form rules, mobile rules and page speed targets. Image generation depends on the inference.sh belt CLI.
It is the landing-page-design guide in the 101-skills/superpowers repository. It covers conversion-focused layout rules, hero section design and CTA psychology, and its frontmatter allows the belt command line for generating visuals through inference.sh.
The skill expects the belt CLI for its image steps. Layout and copy rules work without it, but the visual generation examples need it.
What changes in your agent's output
- The first screen has five elements: a 6 to 12 word headline, a 15 to 25 word subheadline, an outcome-focused hero image, a primary CTA and social proof.
- CTA copy uses an action verb plus value, such as Start Free Trial, instead of Submit or Learn More.
- Pages follow a nine-section order from hero to final CTA.
- Forms ask for name and email at most, in a single column with inline validation.
- The mobile checklist asks for a full-width CTA, a 16 px minimum font and tap targets of at least 48 by 48 px.
What the skill covers
Headline formulas, why headlines fail, hero images that show the outcome, CTA button design, section order, social proof types and placement, form design, mobile optimization, an OG image for sharing and page speed targets. A closing table lists common mistakes with fixes.
Who the landing page design skill is for
Best for
- Startup and SaaS landing pages that need a structure before design starts.
- Agents that fill pages with vague headlines and several competing CTAs.
- Pairing with frontend-design for styling and page-cro for a post-build review.
Not for
- Auditing an existing page's analytics. For that see the conversion audit skill.
- Teams unable to install the belt CLI who need the image generation steps.
Use it with UiChemy
Apply the section order and CTA rules, then build the page where it will live. UiChemy Composer writes the page as real HTML, CSS and JavaScript inside Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install Landing Page Design Skill: Layout and CTA Rules for AI Agents
git clone https://github.com/101-skills/superpowers.gitClone the repository
Run
git clone https://github.com/101-skills/superpowers.git. The skill lives under guides/design/landing-page-design.Copy the skill folder
Copy guides/design/landing-page-design into your agent's skills folder.
Optional: set up the belt CLI
The skill's visual steps call belt, the inference.sh CLI. The repository's cli-install.md has the instructions. Skip this if you only want layout and copy rules.
Ask for a page
Request a hero section or a full landing page layout and check the first screen against the five-element formula.
Check that it loaded
Ask for a landing page for a product. The first screen should have a short outcome headline, a subheadline, one primary CTA with value-led copy and a social proof element, and the sections should follow the nine-part order.
Key features
- Above-the-fold formulaHeadline, subheadline, hero image, primary CTA and social proof, all readable within five seconds.
- Headline formulasPatterns such as outcome without pain, outcome in a timeframe, and stop pain start outcome, plus what makes headlines fail.
- Hero image ruleShow the outcome, not a screenshot of the product.
- CTA text and button designAction verb plus value, high contrast, a minimum 44 px height, generous whitespace and a text link for secondary actions.
- Nine-section orderHero, social proof, problem, solution, how it works, testimonials, pricing, FAQ and final CTA.
- Social proof typesLogos, user counts, star ratings, testimonials, case study stats and trust badges, each with a placement.
- Form rulesMinimize fields, single-column layout and inline validation. The skill cites about 11 percent lost per extra field.
- Mobile rulesFull-width CTA, sticky CTA on scroll, no horizontal scroll, 16 px minimum font and 48 px tap targets.
- Page speed targetsHero image under 200 KB, page under 2 MB, JavaScript under 200 KB and LCP under 2.5 seconds.
- Common mistakes tableEight frequent landing page errors with the fix for each.
Frequently asked questions
What is the landing page design skill?
It is a SKILL.md in 101-skills/superpowers that gives an AI coding agent rules for landing page layout: an above-the-fold formula, headline and CTA rules, section order, social proof, forms, mobile behavior and speed targets.
How do I install it without npx?
Clone the repository with git and copy guides/design/landing-page-design into your agent's skills folder. The skill's own header mentions an installer command for the belt CLI, but copying the folder avoids it.
Do I need the belt CLI?
Only for the skill's AI image generation examples, which use inference.sh. The layout, headline, CTA, form and mobile rules do not depend on it. The repository's cli-install.md covers setup if you want the visuals.
Where does the 11 percent form claim come from?
It is the skill's own rule that every extra form field reduces conversion by about 11 percent. The skill gives no study for it, so treat it as a heuristic and test your own form.
What is the recommended section order?
Hero, social proof, problem, solution or features, how it works, testimonials, pricing, FAQ and a final CTA. Each section has a purpose and a key element listed in a table.
How does it differ from page-cro?
This skill tells the agent how to lay out and write a page before or while building it. page-cro reviews a finished page and returns quick wins, tests and copy alternatives. Use this first, then CRO after traffic arrives.
What license does it use?
GitHub detects no license for the repository, although the README shows an MIT badge. The 39.3K install count on this page comes from a third-party skills listing and is not stated in the repository.