SuperAPI AI 工具集

landing-page-design

设计与创作

查看项目

更新于 10-15 17:18

技能介绍

用途:为产品生成完整的多区块营销与转化落地页,按经验顺序组织首屏、社会证明、功能、如何运作、用户评价、定价、FAQ、最终 CTA 和页脚,可按需调整或省略区块。

主要能力:先加载设计上下文(缺失时可读取 tailwind.config.* 或 :root CSS 变量,否则使用默认颜色、Inter 字体与 4px 间距,并告知用户;建议运行 design-context)。将令牌映射为 CSS 变量并统一使用;在 Tailwind 中暴露对应主题变量。若提供 Figma URL,可用 Figma MCP 的 get_design_context 与 get_screenshot 拉取并匹配设计。提供首屏、社会证明、功能(Bento 网格、交替行、图标网格)、CTA、三步流程、评价卡片、三档定价等模式,以及粘性移动 CTA。使用方式:需先明确产品、受众与单一期望动作;分段使用 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 容器,区块间距 py-20 md:py-28 lg:py-32,交替白与 bg-gray-50 背景;主 CTA 至少出现三次。性能方面:首屏 LCP 元素用 fetchpriority="high"、标明宽高且不懒加载;下方图片懒加载并用 srcset;目标 LCP≤2.5s、INP≤200ms、CLS≤0.1。完成后应使用 playwright 截图检查 390px 与 1440px 效果,并可用 Lighthouse 检查性能与可访问性。

限制:资料未提供具体产品、定价或平台适配信息;示例中的 indigo/gray 类为占位符,需替换为实际令牌;不要用于非落地页场景。