landing-page

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Landing Page Generator

着陆页生成工具

Generate a complete, deployable landing page as a single HTML file. No build step, no dependencies — open it in a browser or deploy anywhere.

根据需求生成完整可部署的着陆页，输出为单个HTML文件。无需构建步骤，无依赖项——直接在浏览器中打开或部署到任意平台。

Workflow

工作流程

1. Gather the Brief

1. 收集需求信息

Ask the user for:

Field	Required	Example
Business/product name	Yes	"Acme Plumbing"
Value proposition	Yes	"24/7 emergency plumbing across Newcastle"
Target audience	Yes	"Homeowners in the Hunter Valley"
Primary CTA	Yes	"Call Now" / "Get a Quote" / "Sign Up"
Secondary CTA	No	"Learn More" / "View Pricing"
Brand colours	No	Primary: #1E40AF, accent: #F59E0B
Logo URL or text	No	URL to logo image, or just use business name
Phone / email	No	For contact section
Sections wanted	No	Default: hero, features, testimonials, FAQ, footer

If no brand colours provided, suggest using the

color-palette

skill to generate them, or use a sensible default (slate/blue).

向用户收集以下信息：

字段	是否必填	示例
企业/产品名称	是	"Acme Plumbing"
价值主张	是	"纽卡斯尔地区24小时紧急管道服务"
目标受众	是	"亨特谷地区的房主"
主CTA	是	"立即致电" / "获取报价" / "注册"
次CTA	否	"了解更多" / "查看定价"
品牌配色	否	主色: #1E40AF, 强调色: #F59E0B
Logo链接或文本	否	Logo图片链接，或直接使用企业名称
电话/邮箱	否	用于联系板块
需要的页面板块	否	默认：英雄区、功能区、客户评价区、FAQ区、页脚

如果用户未提供品牌配色，建议使用

color-palette

技能生成，或使用合理的默认配色（石板灰/蓝色系）。

2. Generate the HTML

2. 生成HTML文件

Produce a single HTML file with:

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <!-- Meta, OG tags, favicon -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>tailwind config with custom colours</script>
</head>
<body>
  <!-- Nav -->
  <!-- Hero -->
  <!-- Features -->
  <!-- Social Proof -->
  <!-- Pricing (optional) -->
  <!-- FAQ -->
  <!-- Footer -->
  <!-- Dark mode toggle script -->
</body>
</html>

生成单个HTML文件，结构如下：

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <!-- 元标签、OG标签、网站图标 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>tailwind config with custom colours</script>
</head>
<body>
  <!-- 导航栏 -->
  <!-- 英雄区 -->
  <!-- 功能区 -->
  <!-- 社交证明区 -->
  <!-- 定价区（可选） -->
  <!-- FAQ区 -->
  <!-- 页脚 -->
  <!-- 深色模式切换脚本 -->
</body>
</html>

3. Section Patterns

3. 板块设计规范

Navigation

导航栏

Sticky top nav with logo/name + anchor links to sections
Mobile hamburger menu (CSS-only or minimal JS)
CTA button in nav (right-aligned)

顶部固定导航栏，包含Logo/名称 + 跳转到各板块的锚点链接
移动端汉堡菜单（纯CSS或极简JS实现）
导航栏右侧放置CTA按钮

Hero

英雄区

Full-width, above the fold
Headline (h1) — the value proposition, not the business name
Subheadline — supporting detail, 1-2 sentences
Primary CTA button (large, contrasting colour)
Optional: hero image placeholder or gradient background
Pattern: text-left on desktop (60/40 split with image), centred on mobile

全屏宽度，首屏可见
标题（h1）——突出价值主张，而非企业名称
副标题——补充说明，1-2句话
主CTA按钮（大尺寸，高对比度配色）
可选：英雄图占位符或渐变背景
布局：桌面端文字左对齐（与图片60/40分栏），移动端居中对齐

Features / Services

功能/服务区

3-6 items in a responsive grid (1 col mobile, 2-3 cols desktop)
Each: icon placeholder + heading + short description
Use semantic headings (h2 for section, h3 for items)

响应式网格布局，包含3-6个功能项（移动端1列，桌面端2-3列）
每个功能项：图标占位符 + 标题 + 简短描述
使用语义化标题（板块用h2，功能项用h3）

Social Proof / Testimonials

社交证明/客户评价区

2-3 testimonial cards with quote, name, role/company
Star rating if applicable
Alternative: logo bar of client/partner logos

2-3个评价卡片，包含引用语、姓名、职位/企业
适用时添加星级评分
替代方案：展示客户/合作伙伴Logo的横向栏

Pricing (optional)

定价区（可选）

2-3 tier cards (basic/pro/enterprise pattern)
Highlighted "recommended" tier
Feature comparison list per tier
CTA button per tier

2-3个定价套餐卡片（基础版/专业版/企业版模式）
高亮显示“推荐”套餐
每个套餐包含功能对比列表
每个套餐对应一个CTA按钮

FAQ

FAQ区

Accordion pattern (details/summary — no JS needed)
4-6 common questions
Schema.org FAQPage markup for SEO

手风琴展开模式（使用details/summary标签——无需JS）
4-6个常见问题
添加Schema.org FAQPage标记以优化SEO

Footer

页脚

Business name, contact info, social links
Legal links (privacy, terms) as placeholders
Copyright year (use JS for auto-update)

包含企业名称、联系信息、社交链接
法律链接（隐私政策、条款）占位符
版权年份（使用JS实现自动更新）

4. Technical Requirements

4. 技术要求

Responsive: Mobile-first with three breakpoints

Default: mobile (< 640px)
sm: 640px+ (tablet)
lg: 1024px+ (desktop)

Dark mode: Three-state toggle (light/dark/system)

CSS custom properties for colours
```
.dark
```
class on
```
<html>
```
— no CSS media query
Small JS snippet for toggle + localStorage persistence

Accessibility:

Proper heading hierarchy (h1 → h2 → h3, no skips)
Alt text placeholders on all images
Focus-visible styles on interactive elements
Sufficient colour contrast (4.5:1 minimum)
Skip-to-content link

SEO:

Semantic HTML5 elements (header, main, section, footer)
OG meta tags (title, description, image, url)
Twitter card meta tags
Canonical URL
JSON-LD for LocalBusiness if it's a local business (reference
```
seo-local-business
```
skill)

Performance:

No JS required for core content rendering
Lazy-load images (
```
loading="lazy"
```
)
System font stack (no external font requests)
Single file — no external CSS/JS beyond Tailwind CDN

响应式设计：移动端优先，支持三个断点

默认：移动端(< 640px)
sm: 640px+（平板）
lg: 1024px+（桌面端）

深色模式：三态切换（浅色/深色/跟随系统）

使用CSS自定义属性定义颜色
通过
```
<html>
```
标签的
```
.dark
```
类实现——不使用CSS媒体查询
小型JS片段实现切换功能 + 本地存储持久化设置

可访问性：

正确的标题层级（h1 → h2 → h3，无层级跳跃）
所有图片添加替代文本占位符
交互元素添加focus-visible样式
足够的颜色对比度（最低4.5:1）
添加“跳转到内容”快捷链接

SEO优化：

使用HTML5语义化元素（header、main、section、footer）
OG元标签（标题、描述、图片、链接）
Twitter卡片元标签
规范链接
如果是本地企业，添加LocalBusiness类型的JSON-LD标记（参考
```
seo-local-business
```
技能）

性能优化：

核心内容渲染无需依赖JS
图片懒加载（
```
loading="lazy"
```
）
使用系统字体栈（无外部字体请求）
单个文件——除Tailwind CDN外无其他外部CSS/JS依赖

5. Colour Application

5. 配色应用

If user provides brand colours, configure Tailwind inline:

html

<script>
tailwind.config = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: { DEFAULT: '#1E40AF', light: '#3B82F6', dark: '#1E3A8A' },
        accent: { DEFAULT: '#F59E0B', light: '#FBBF24', dark: '#D97706' },
      }
    }
  }
}
</script>

If no colours provided, use Tailwind's built-in palette (slate for neutrals, blue for primary).

如果用户提供了品牌配色，在HTML中内联配置Tailwind：

html

<script>
tailwind.config = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: { DEFAULT: '#1E40AF', light: '#3B82F6', dark: '#1E3A8A' },
        accent: { DEFAULT: '#F59E0B', light: '#FBBF24', dark: '#D97706' },
      }
    }
  }
}
</script>

如果未提供配色，使用Tailwind内置的配色方案（中性色用石板灰，主色用蓝色）。

6. Output

6. 输出说明

Write the file to the user's specified location, or default to

./index.html

After generating:

Tell the user how to preview:
```
open index.html
```
(macOS) or
```
python3 -m http.server
```
for a local server
Suggest deployment options: drag to Cloudflare Pages, Netlify drop, or
```
wrangler deploy
```
for Workers
List placeholder content that needs replacing (images, testimonials, phone numbers)

将文件写入用户指定位置，默认保存为

./index.html

。

生成完成后：

告知用户预览方式：macOS系统使用
```
open index.html
```
，或通过
```
python3 -m http.server
```
启动本地服务器
建议部署选项：拖拽到Cloudflare Pages、Netlify Drop，或使用
```
wrangler deploy
```
部署到Workers
列出需要替换的占位内容（图片、客户评价、电话号码等）

Quality Rules

质量规则

No placeholder lorem ipsum — generate realistic placeholder text based on the business type
No broken layouts — test the responsive grid mentally: 1 col → 2 col → 3 col
No inline styles — use Tailwind classes exclusively
Real interactions — smooth scroll to sections, working accordion, working dark mode toggle
Accessible by default — don't sacrifice accessibility for aesthetics
Australian conventions — if the business is Australian, use +61 phone format, Australian spelling, ABN placeholder

无Lorem Ipsum占位文本——根据企业类型生成真实的占位文本
无布局断裂——预先验证响应式网格：1列 → 2列 → 3列的适配效果
无内联样式——仅使用Tailwind类
真实交互效果——平滑滚动到各板块、可正常展开的手风琴、可正常工作的深色模式切换
默认支持可访问性——不为了美观牺牲可访问性
符合澳大利亚本地规范——如果是澳大利亚企业，使用+61格式的电话号码、澳大利亚拼写、ABN占位符

Variations

变体适配

Request	Approach
"Coming soon page"	Hero only + email signup form + countdown timer
"Product launch"	Hero + features + pricing + CTA-heavy
"Portfolio"	Hero + project grid + about + contact
"Event page"	Hero + schedule + speakers + venue + register CTA
"App download"	Hero + features + screenshots + app store badges

Adapt the section selection to match the page purpose. Not every page needs pricing or FAQ.

请求类型	处理方式
"即将上线页"	仅保留英雄区 + 邮件注册表单 + 倒计时器
"产品发布页"	英雄区 + 功能区 + 定价区 + 多处CTA
"作品集页"	英雄区 + 项目网格 + 关于我 + 联系区
"活动页"	英雄区 + 日程安排 + 演讲嘉宾 + 场地信息 + 注册CTA
"应用下载页"	英雄区 + 功能区 + 截图展示 + 应用商店徽章

根据页面用途调整板块选择，并非所有页面都需要定价区或FAQ区。