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