| 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"] |
Landing Page Wireframe
一键生成结构完整的落地页 HTML 原型,包含五大核心板块:
- Hero — 主标题、副标题、CTA 按钮
- Social Proof — 合作品牌 Logo、关键数据指标、用户推荐语
- Features — 产品特性卡片(支持图标)
- Pricing — 定价方案对比(支持高亮推荐档)
- 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",
支持的图标名称
zap、users、chart、shield、code、headphone
不在列表中的图标名称会显示为圆形占位符。
特性
- 零外部依赖:纯 Python 标准库,HTML/CSS 全部内联
- 响应式设计:桌面端和移动端均有良好表现
- 无安全隐患:所有用户输入经 HTML 转义处理
- 支持主题定制:通过 CSS 变量控制配色方案
- 固定导航栏:毛玻璃效果,自动跟随滚动
- 交互反馈:卡片悬停动效、按钮状态变化
适用场景
- 产品经理快速搭建落地页原型用于评审
- 设计师验证页面结构和信息层级
- 创业团队快速生成 MVP 落地页
- 营销团队制作活动页面初稿
- 面试或比赛中快速产出页面 demo
依赖