Communitygithub.com

Ayush-Mahadik/创业落地页设计模板

生成高转化率的单页创业落地页,包含:英雄区、功能展示、社交证明、定价和行动号召。目标是在30秒内传递价值并获取用户邮箱。

创业落地页设计模板 是什么?

该技能(startup-landing)专为 SaaS 和创业项目设计,可自动生成一个完整的、高转化率的单页落地页 HTML 文件。它严格遵循经过验证的营销页面结构,按顺序包含导航、英雄区、社交证明、功能展示、工作原理、定价、推荐、行动号召区和页脚。所有代码(CSS 和 HTML)都内联在一个自包含的 `index.html` 文件中,无需外部 JavaScript,并强制使用 `DESIGN.md` 中的设计令牌以确保颜色一致性。该模板通过移动端优先的响应式设计、清晰的行动号召以及填充的邮箱收集表单来优化在 30 秒内传达核心价值。它支持 Cursor、Codex 等 AI 编程助手,只需提供产品名称、标语和描述等关键参数即可直接使用。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Ayush-Mahadik/open-design-templates/tree/HEAD/skills/startup-landing

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

创业落地页设计技能

类别: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 }

必需的部分(按顺序)

  1. 导航 — Logo + 导航链接 + "立即开始"行动号召按钮
  2. 英雄区 — 产品名称、标语、描述、双行动号召(主要:"免费开始使用"、次要:"查看演示")、可选的产品截图/模型
  3. 社交证明条 — Logo 行(灰度,最多6个)
  4. 功能展示 — 3列表格,每项包含图标 + 标题 + 描述
  5. 工作原理 — 3步水平流程,带有编号步骤
  6. 定价 — 3张层级卡片(入门版 / 专业版 / 企业版)
  7. 推荐 — 2-3条引文,包含姓名、角色、公司、头像
  8. 行动号召条 — 深色区域:标题 + 邮箱输入框 + 按钮
  9. 页脚 — 链接 + 版权声明

设计规则

  • 移动端优先响应式
  • 所有行动号召必须带有可工作的 href 或表单 action
  • 定价卡片:高亮卡片需有独特的边框 + 阴影
  • 推荐头像:使用 https://i.pravatar.cc/60?img=[n] 作为一致的占位符
  • 无外部 JavaScript
  • 所有 CSS 内联在 <style> 块中
  • 不得使用 DESIGN.md 令牌以外的颜色

输出

单个文件:index.html(自包含)

自检清单

  • 任何位置均无 Lorem Ipsum 占位文本
  • 至少列出4个功能
  • 定价层级高度一致
  • 所有行动号召按钮清晰标记并设计样式
  • 移动端:折叠为单列
  • 行动号召条中的邮箱输入框带有 type="email" 和 required 属性

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相关技能