落地页原型生成器Skill lp-proto-gen

一键生成结构完整的落地页HTML原型,包含Hero、Social Proof、Features、Pricing、CTA五大板块,输出自包含HTML文件,快速制作营销落地页原型。关键词:落地页、原型、线框图、营销页、前端

原型设计 0 次安装 2 次浏览 更新于 7/8/2026

name: lp-proto-gen description: “一键生成结构完整的落地页HTML原型,包含Hero主标题、Social Proof合作品牌、Features产品特性、Pricing定价方案和CTA行动召唤五大核心板块,输出为自包含HTML文件(CSS内联)可直接在浏览器中预览。当用户请求生成落地页、营销页、产品主页的HTML原型、线框图或快速demo,或提及“Landing Page”、“营销页”、“产品主页”等关键词时触发。” license: MIT type: tool tags: [“landing-page”, “wireframe”, “html”, “prototype”, “marketing”]

落地页线框图

一键生成结构完整的落地页 HTML 原型,包含五大核心板块:

  1. Hero — 主标题、副标题、CTA 按钮
  2. Social Proof — 合作品牌 Logo、关键数据指标、用户推荐语
  3. Features — 产品特性卡片(支持图标)
  4. Pricing — 定价方案对比(支持高亮推荐档)
  5. CTA — 页尾行动召唤

输出为自包含 HTML 文件(所有 CSS 内联),可直接在浏览器中预览,无需任何外部依赖。

使用方式

最简用法:使用默认配置

python3 scripts/generate_landing_page.py -o landing.html --open

生成一个默认风格的落地页并在浏览器中打开。

自定义产品信息

python3 scripts/generate_landing_page.py \
  --name "MyApp" \
  --tagline "Ship products 10x faster" \
  --description "The platform your team has been waiting for." \
  -o landing.html --open

通过 JSON 配置文件完全自定义

python3 scripts/generate_landing_page.py --config my_config.json -o landing.html

配置文件格式参见下方「配置说明」。

自定义主题色

python3 scripts/generate_landing_page.py --primary-color "#059669" -o landing.html

输出到 stdout(可管道到其他工具)

python3 scripts/generate_landing_page.py --name "Demo" > page.html

参数说明

参数 说明
--config, -c JSON 配置文件路径(完全自定义所有内容)
--name, -n 产品/品牌名称
--tagline, -t Hero 区域主标题
--description, -d Hero 区域副标题描述
--primary-color 主题主色调(HEX 格式,如 #4F46E5
--output, -o 输出文件路径(不指定则输出到 stdout)
--open 生成后自动用浏览器打开

配置说明

JSON 配置支持以下字段(均可选,未指定字段使用默认值):

{
  "product_name": "MyApp",
  "tagline": "Build something amazing.",
  "description": "A short product description.",
  "hero_cta_text": "Get Started",
  "hero_cta_url": "#pricing",
  "social_proof": {
    "stats": [
      {"value": "10K+", "label": "Users"}
    ],
    "logos": ["Partner A", "Partner B"],
    "testimonials": [
      {"quote": "Great product!", "author": "Name", "role": "Title, Company"}
    ]
  },
  "features": [
    {"title": "Feature Name", "description": "Description", "icon": "zap"}
  ],
  "pricing": {
    "tiers": [
      {
        "name": "Free",
        "price": "$0",
        "period": "/month",
        "description": "For individuals",
        "features": ["Feature 1", "Feature 2"],
        "cta_text": "Start Free",
        "highlighted": false
      }
    ]
  },
  "cta": {
    "headline": "Ready to start?",
    "description": "Sign up today.",
    "button_text": "Get Started",
    "button_url": "#"
  },
  "theme": {
    "primary": "#4F46E5",
    "primary_light": "#818CF8",
    "primary_dark": "#3730A3",
    "secondary": "#0F172A",
    "accent": "#06B6D4",
    "background": "#FFFFFF",
    "surface": "#F8FAFC",
    "text": "#1E293B",
    "text_light": "#64748B",
    "border": "#E2E8F0",
    "radius": "12px"
  }
}

支持的图标名称

zapuserschartshieldcodeheadphone

不在列表中的图标名称会显示为圆形占位符。

特性

  • 零外部依赖:纯 Python 标准库,HTML/CSS 全部内联
  • 响应式设计:桌面端和移动端均有良好表现
  • 无安全隐患:所有用户输入经 HTML 转义处理
  • 支持主题定制:通过 CSS 变量控制配色方案
  • 固定导航栏:毛玻璃效果,自动跟随滚动
  • 交互反馈:卡片悬停动效、按钮状态变化

适用场景

  • 产品经理快速搭建落地页原型用于评审
  • 设计师验证页面结构和信息层级
  • 创业团队快速生成 MVP 落地页
  • 营销团队制作活动页面初稿
  • 面试或比赛中快速产出页面 demo

依赖

  • Python 3.7+(仅标准库)