Landing Page Design

🎯 高转化落地页设计系统

基于转化心理学的高转化落地页设计系统,涵盖首屏公式、CTA设计原则与移动端优化策略

收藏
4.9k
安装
1.7k
版本
0.1.5
CLS 安全性认证2026-07-12
点击查看完整报告 >

使用说明

核心用法

本技能提供一套完整的落地页转化率优化框架,集成 AI 图像生成工具(inference.sh CLI)直接产出营销素材。核心工作流包含:

1. 首屏 5 秒法则:通过结构化布局(Logo/导航/CTA → 标题 → 副标题 → 主视觉 → 社会证明)在首屏完成价值传递
2. AI 驱动的视觉生产:使用 falai/flux-dev-lorabytedance/seedream-4-5 等模型生成结果导向的主图,而非产品截图

3. 转化文案公式:提供可复用的标题模板(如「[结果] 无需 [痛点]」「[数量] 步实现 [结果]」)和 CTA 动词库

4. 9 段式页面架构:从 Hero 到最终 CTA 的标准化内容顺序,每段配套明确的转化目标

显著优点

  • 高度可操作性:所有建议均为具体数字(标题 6-12 词、按钮最小 44px 高度、表单每字段损失 11% 转化)和可直接执行的 Bash 命令
  • 跨端一致性:内置移动端优先设计规则(全宽 CTA、粘性按钮、最小 48×48px 触控目标)
  • 素材生产闭环:无需离开 CLI 即可完成竞品调研(tavily/search-assistant)、数据验证(exa/answer)到图像生成的完整工作流
  • 反模式清单:明确列出 8 类常见错误(如「Learn More」按钮、产品截图主图、多字段表单)及对应修复方案

潜在局限

  • 工具生态依赖:核心功能绑定 inference.sh CLI,若服务变更需适配迁移
  • 垂直领域泛化:当前示例聚焦 SaaS/生产力工具,电商、游戏等场景的转化心理模型覆盖不足
  • A/B 测试缺位:提供设计原则但未集成实验框架,无法直接输出测试方案
  • 无障碍合规:未提及 WCAG 色彩对比度标准(仅强调「高对比」),需额外校验

适合人群

  • 早期创业团队:缺乏专职设计师但需要快速上线高转化落地页
  • 增长/产品运营:需要数据驱动的页面优化 checklist 与可量化的执行标准
  • 独立开发者:单人团队可通过 CLI 一站式完成文案、视觉、代码部署

常规风险

  • 版权风险:AI 生成图像的商用授权需确认模型许可证(flux-dev-lora 等开源模型通常安全,但需关注 LoRA 训练数据来源)
  • 性能风险:建议 Hero 图 < 200KB,但 AI 生成图像默认尺寸较大,需额外压缩流程
  • 过度优化陷阱:严格遵循所有规则可能导致页面同质化,建议保留品牌差异化空间

技术实现

依赖 inference.sh CLI(自动检测 OS/架构,SHA-256 校验,无后台进程),支持通过 infsh app run 调用 20+ 图像生成与搜索模型。

安全解读

核心用法

landing-page-design 是一套专注于转化率优化的设计方法论 Skill,而非代码生成工具。其核心交付物是:

  • Above-the-Fold 公式:5秒法则下的首屏布局(标题6-12词、副标题15-25词、行动按钮、社会证明、成果导向的主视觉)
  • 9段式页面结构:从 Hero 到最终 CTA 的完整用户决策路径设计
  • AI 图像生成集成:通过 inference.sh CLI 调用 Fal.ai、ByteDance Seedream 等模型生成营销素材
  • 竞品研究指令:内置 Tavily/Exa 搜索查询模板

典型工作流:先用 tavily/search-assistant 调研高转化竞品案例 → 按 9 段式结构撰写文案 → 用 falai/flux-dev-lora 生成成果导向的 Hero 图 → 部署后按 F-pattern 阅读热图优化。

显著优点

1. 数据驱动的方法论:每项建议附带量化指标(如「每增加一个表单字段,转化率下降约11%」),避免主观设计
2. 移动端优先:明确 60%+ 流量来自移动端的现实,提供 48×48px 触控目标、16px 字体下限等具体规范

3. CTA 心理学细化:将「Submit」等低效文案与「Start Free Trial」等高效文案对比,给出「动词+价值+风险消除」的公式

4. AI 生成工作流整合:不是泛泛而谈「用AI做图」,而是提供经过优化的 Flux/Seedream 提示词模板,确保输出符合营销摄影风格

潜在缺点与局限

| 局限 | 说明 |
|------|------|
| **非代码生成 Skill** | 仅提供设计规范与 Bash 命令示例,不输出 React/Vue 组件或 HTML/CSS |
| **依赖外部 AI 服务** | 图像生成需有效 inference.sh 账户与 API 配额,免费额度有限 |
| **西方 SaaS 语境** | 标题公式(如「Stop [pain]. Start [outcome].」)更适配欧美市场,中文本地化需调整 |
| **无 A/B 测试工具** | 未内置转化率追踪或实验框架,需配合 Google Optimize/Amplitude 等工具 |

适合人群

  • 早期初创公司创始人:无专业设计师,需快速搭建高转化落地页
  • SaaS 产品市场人员:优化现有产品页,提升试用注册率
  • 独立开发者/Indie Hackers:Launch 前需要「看起来专业」的营销页面
  • 增长黑客:需系统化对照清单排查页面转化瓶颈

常规风险

1. curl \| bash 安装风险:Skill 推荐 curl -fsSL https://cli.inference.sh | sh 安装 CLI,虽文档说明含 SHA-256 校验,但仍存在域名劫持的供应链攻击面
2. T3 来源风险:个人开发者(okaris)维护,未来版本存在账户接管后恶意代码注入的可能

3. AI 服务隐私合规:调用 Fal.ai、ByteDance 等第三方服务时,提示词可能包含敏感业务信息,Skill 已明确提示避免提交机密信息

4. 无持续维护承诺:作为社区项目,存在文档滞后于平台 API 变更的风险

Landing Page Design 内容

手动下载zip · 5.8 kB
skill-card.mdtext/markdown
请选择文件