SuperAPI AI 工具集

astro-ux

前端与建站

查看项目

更新于 10-16 04:41

技能介绍

用途

Astro UX 是一套面向 Astro 获客型(lead generation)网站的 UX 模式与区块模板技能,主要用于页面区块设计。它提供各类常见落地页区块的设计规范与模板,帮助在 Astro 项目中构建结构清晰、转化导向的页面。

核心规则

  • 移动优先设计:以 375px 为基准,向上扩展。
  • 清晰的视觉层级:每个视口只保留一个主 CTA。
  • 先建立信任再索取信息:在表单之前展示社会证明。
  • 最小化摩擦:短表单、清晰标签。
  • 可访问性:支持键盘导航、焦点状态、对比度。

区块类型

转化区块

区块 用途 关键元素
Hero 第一印象 + CTA 标题、副标题、CTA、信任徽章
CTA Banner 页面中部转化 标题、按钮、紧迫感
表单区块 线索捕获 表单、收益点、信任
最终 CTA 最后机会 总结、强 CTA

信任区块

区块 用途 关键元素
客户评价 社会证明 引语、姓名、照片、星级
Logo 权威性 客户/合作伙伴 Logo
数据统计 可信度 数字、背景说明
评价 第三方证明 Google/Trustpilot 评价

内容区块

区块 用途 关键元素
功能 收益点 图标、标题、描述
运作方式 流程 编号步骤
FAQ 异议处理 问题、回答
关于 信任建设 故事、团队、价值观

移动端模式

  • 粘性移动 CTA 条
  • 拇指友好按钮(最小 44px)
  • 可折叠导航
  • 触屏友好表单输入

页面流转

Hero(含 CTA)→ 信任信号(Logo/数据统计)→ 功能/收益 → 社会证明(客户评价)→ 运作方式 → CTA Banner → FAQ → 最终 CTA → 页脚

相关技能

  • section-skeleton — 组件结构
  • page-structure — 区块排序
  • astro-components — UI 组件

完成标准

  • 移动优先响应式
  • 清晰的 CTA 层级
  • 表单前有信任元素
  • 可访问(已检查 a11y)
  • 快速加载(视口内无重型资源)

适用场景与限制

该技能适用于 Astro 获客型网站的页面区块设计与结构规划,尤其是需要兼顾移动端体验与转化率的落地页。资料未提供具体安装命令、代码示例、收费信息或平台限制,相关内容暂未提供。