AgentSkillsCN

astro-ux

Astro潜在客户开发网站的UX模式与版块模板。英雄区、功能区、客户评价、行动号召、常见问题解答板块。用于页面版块设计。

SKILL.md
--- frontmatter
name: astro-ux
description: UX patterns and section templates for Astro lead generation sites. Hero, features, testimonials, CTAs, FAQ sections. Use for page section design.

Astro UX Skill

Purpose

Provides UX patterns and section templates for lead generation pages.

Core Rules

  1. •Mobile-first design — 375px base, scale up
  2. •Clear visual hierarchy — One primary CTA per viewport
  3. •Trust before ask — Social proof before form
  4. •Minimal friction — Short forms, clear labels
  5. •Accessible — Keyboard nav, focus states, contrast

Section Types

Conversion Sections

SectionPurposeKey Elements
HeroFirst impression + CTAHeadline, subhead, CTA, trust badge
CTA BannerMid-page conversionHeadline, button, urgency
Form SectionLead captureForm, benefits, trust
Final CTALast chanceSummary, strong CTA

Trust Sections

SectionPurposeKey Elements
TestimonialsSocial proofQuote, name, photo, stars
LogosAuthorityClient/partner logos
StatsCredibilityNumbers, context
ReviewsThird-party proofGoogle/Trustpilot reviews

Content Sections

SectionPurposeKey Elements
FeaturesBenefitsIcon, title, description
How It WorksProcessNumbered steps
FAQObjection handlingQuestions, answers
AboutTrust buildingStory, team, values

Mobile Patterns

  • •Sticky mobile CTA bar
  • •Thumb-friendly buttons (44px min)
  • •Collapsible navigation
  • •Touch-friendly form inputs

Page Flow

code
Hero (with CTA)
↓
Trust Signal (logos/stats)
↓
Features/Benefits
↓
Social Proof (testimonials)
↓
How It Works
↓
CTA Banner
↓
FAQ
↓
Final CTA
↓
Footer

Related Skills

  • •section-skeleton — Component structure
  • •page-structure — Section ordering
  • •astro-components — UI components

Definition of Done

  • • Mobile-first responsive
  • • Clear CTA hierarchy
  • • Trust elements before forms
  • • Accessible (a11y checked)
  • • Fast loading (no heavy assets in viewport)