landing-page-builder

根据文本提示或设计简介构建单页登陆页面。 使用时间： - 用户请求登陆页面、营销页面、产品页面、销售页面或启动网站 - 用户提供企业名称/想法并想要一个可部署的网页 - 用户发送 HTML 模板并希望它适应新的内容/品牌 - 用户要求“单页浏览器”或“单页网站” 不要在以下情况下使用： - 用户想要一个多页面网站（使用网络框架代替） - 用户想要电子邮件模板或新闻通讯（不同的格式/限制） - 用户想要博客、文档网站或维基 - 用户想要编辑现有的实时站点（这会构建新页面，而不是补丁） - 用户想要一个具有后端逻辑、身份验证或数据库的 Web 应用程序 输出：单个独立的 .html 文件（除 Google 字体外没有外部依赖项）。准备在浏览器中打开、部署到任何静态主机或交付给客户端。 输入：企业名称、业务、目标受众、期望的基调。可选：要适应的参考 HTML 模板。

## 概述（中文）

根据文本提示或设计简介构建单页登陆页面。
使用时间：
- 用户请求登陆页面、营销页面、产品页面、销售页面或启动网站
- 用户提供企业名称/想法并想要一个可部署的网页
- 用户发送 HTML 模板并希望它适应新的内容/品牌
- 用户要求“单页浏览器”或“单页网站”
不要在以下情况下使用：
- 用户想要一个多页面网站（使用网络框架代替）
- 用户想要电子邮件模板或新闻通讯（不同的格式/限制）
- 用户想要博客、文档网站或维基
- 用户想要编辑现有的实时站点（这会构建新页面，而不是补丁）
- 用户想要一个具有后端逻辑、身份验证或数据库的 Web 应用程序
输出：单个独立的 .html 文件（除 Google 字体外没有外部依赖项）。准备在浏览器中打开、部署到任何静态主机或交付给客户端。
输入：企业名称、业务、目标受众、期望的基调。可选：要适应的参考 HTML 模板。

## 原文

# Landing Page Builder

Generate polished, conversion-optimized landing pages from natural language descriptions.

## Workflow

### If user provides a reference HTML template:
1. Read the provided template
2. Identify all text content, branding, and copy
3. **Modify the existing template — do NOT rewrite from scratch**
4. Replace copy, brand name, colors, and content to match the user's brief
5. Preserve ALL CSS, animations, layout structure, SVG filters, and JavaScript exactly
6. Output the adapted `.html` file

### If no template provided:
1. Ask the user (if not provided): product/service name, what it does, target audience, desired tone
2. Read the base template at `assets/template.html`
3. Replace all `{{PLACEHOLDER}}` tokens with content tailored to the user's request
4. Customize colors, copy, sections — add or remove sections as needed
5. Output a single self-contained `.html` file

## Template Placeholders (base template only)

| Placeholder | Description |
|---|---|
| `{{TITLE}}` | Page `<title>` |
| `{{BRAND}}` | Brand/company name |
| `{{PRIMARY_COLOR}}` | Hex color (e.g., `#6366f1`) |
| `{{BG_COLOR}}` | Background color |
| `{{TEXT_COLOR}}` | Body text color |
| `{{ACCENT_COLOR}}` | Accent color |
| `{{HEADLINE}}` | Hero headline — punchy, benefit-driven |
| `{{SUBHEADLINE}}` | 1-2 sentence supporting text |
| `{{CTA_TEXT}}` | Button text (e.g., "Start Free Trial") |
| `{{CTA_URL}}` | Button link |
| `{{FEATURES_HEADING}}` | Section heading |
| `{{FEATURES}}` | HTML feature cards (use `.feature-card` divs) |
| `{{PRICING_HEADING}}` | Section heading |
| `{{PRICING_CARDS}}` | HTML pricing cards (use `.price-card` divs) |
| `{{TESTIMONIALS_HEADING}}` | Section heading |
| `{{TESTIMONIALS}}` | HTML testimonial cards (use `.testimonial` divs) |
| `{{FINAL_CTA_HEADING}}` | Bottom CTA heading |
| `{{FINAL_CTA_TEXT}}` | Bottom CTA description |
| `{{YEAR}}` | Current year |

## Design Principles

- Mobile-first responsive design
- Clean typography with Inter font
- Subtle shadows, rounded corners, generous whitespace
- Conversion-focused: clear hierarchy, single primary CTA repeated
- Fast: no JS frameworks, no external dependencies beyond Google Fonts
- Accessible: semantic HTML, good contrast ratios

## Common Mistakes to Avoid

- **Don't rewrite templates from scratch** — when adapting a reference, modify in place. Rewriting loses the design quality.
- **Don't use generic stock copy** — every line should feel specific to the business, not "lorem ipsum with nouns swapped in"
- **Don't add sections the user didn't ask for** — less is more. A tight 3-section page beats a bloated 8-section page.
- **Don't break responsive behavior** — test mentally that your changes work at mobile widths

## Customization

Feel free to:
- Add/remove entire sections (not all pages need pricing or testimonials)
- Change the grid layouts, add animations with CSS
- Swap the font via the Google Fonts link
- Add custom CSS variables for additional theming
- Embed forms, videos, or other interactive elements as needed

## Output

Save the final HTML file to the user's workspace or specified path. Suggest deployment options:
- **Quick:** Open locally or share the file
- **Free hosting:** GitHub Pages, Netlify, Vercel, Cloudflare Pages
- **Custom domain:** Pair with any of the above