创业落地页设计技能
类别:SaaS / 创业 生成高转化率的单页创业落地页:英雄区、功能展示、社交证明、定价和行动号召。目标是在30秒内传递价值并获取用户邮箱。
元数据
名称: startup-landing 描述: 单页创业落地页:英雄区、功能展示、社交证明、定价和行动号召。 触发关键词: "创业落地页", "营销页面", "产品发布", "SaaS落地页", "登陆页面"
输入参数
| 参数 | 类型 | 必填 | 默认值 |
|---|---|---|---|
product_name | 字符串 | ✓ | — |
tagline | 字符串 | ✓ | — |
description | 字符串 | ✓ | — |
has_pricing | 布尔值 | ✓ | true |
has_testimonials | 布尔值 | — | true |
proof_count | 整数 | — | 4 |
pricing_tiers | 数组 | — | [3个默认层级] |
primary_color | 字符串 | — | DESIGN.md 的强调色 |
定价层级结构:
{ name: string; price: string; period: string; features: string[]; cta: string; highlighted?: boolean }
必需的部分(按顺序)
- 导航 — Logo + 导航链接 + "立即开始"行动号召按钮
- 英雄区 — 产品名称、标语、描述、双行动号召(主要:"免费开始使用"、次要:"查看演示")、可选的产品截图/模型
- 社交证明条 — Logo 行(灰度,最多6个)
- 功能展示 — 3列表格,每项包含图标 + 标题 + 描述
- 工作原理 — 3步水平流程,带有编号步骤
- 定价 — 3张层级卡片(入门版 / 专业版 / 企业版)
- 推荐 — 2-3条引文,包含姓名、角色、公司、头像
- 行动号召条 — 深色区域:标题 + 邮箱输入框 + 按钮
- 页脚 — 链接 + 版权声明
设计规则
- 移动端优先响应式
- 所有行动号召必须带有可工作的
href或表单action - 定价卡片:高亮卡片需有独特的边框 + 阴影
- 推荐头像:使用
https://i.pravatar.cc/60?img=[n]作为一致的占位符 - 无外部 JavaScript
- 所有 CSS 内联在
<style>块中 - 不得使用 DESIGN.md 令牌以外的颜色
输出
单个文件:index.html(自包含)
自检清单
- 任何位置均无 Lorem Ipsum 占位文本
- 至少列出4个功能
- 定价层级高度一致
- 所有行动号召按钮清晰标记并设计样式
- 移动端:折叠为单列
- 行动号召条中的邮箱输入框带有
type="email"和required属性