haomingz 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", "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+（仅标准库）