Claude Skills · UI Design
Landing page structure
Plan a high-converting landing page structure with section order, headlines, proof and calls to action. Use for marketing page design and copy outlines.
Install this skill
curl -fsSL https://uxmate.co.in/skill-files/install.sh | bash -s -- uxm-landing-page-structureOr unzip into ~/.claude/skills/. Then ask Claude Code to do the task, or call /uxm-landing-page-structure.
What is inside
---
name: uxm-landing-page-structure
description: Plan a high-converting landing page structure with section order, headlines, proof and calls to action. Use for marketing page design and copy outlines.
---
# Landing page structure
1. Ask: product, audience, single conversion goal, key objection, proof available.
2. Output sections in order: Hero (headline, subhead, CTA, visual), Social proof, Problem, Solution/benefits, How it works, Features, Testimonials/case study, Pricing or offer, FAQ (objection handling), Final CTA, Footer.
3. For each section: purpose, headline draft, content notes, visual suggestion.
4. Give 5 headline variants using different angles (outcome, speed, risk-reversal, specificity, curiosity).
5. Add above-the-fold checklist, one primary CTA per view, and an A/B test list.More UI Design skills
- Design tokens · Define design tokens (colour, type, spacing, radius, shadow, motion) and output them as JSON and CSS variables.
- Colour palette · Generate an accessible colour palette with scales, semantic colours and contrast results.
- Type scale · Create a typographic scale with font pairing, sizes, line heights and responsive rules.
- Component spec · Write a complete UI component specification with anatomy, variants, states, behaviour and accessibility.