快速落地页
定制的落地页制作方案。决策已为你做好。输出：一个能工作、已部署、品牌贴合且可在 4-8 小时内完成，而非数周。
该技能内置了 frontend-quality 规则（无障碍、核心网页指标、移动优先）和 web-security-baseline 头部——你无需在开发时考虑它们。
技术栈（默认——非必要不改变）
- Astro + Tailwind + shadcn/ui 风格组件 + Vercel。
- TypeScript 严格模式。
astro:assets用于图片优化。astro:transitions用于多页面（保持最小化——单页发布更快）。
何时改变：
- 需要认证门控/动态用户内容，并逐步演化为完整应用 → 使用 Next.js 15 App Router 而非 Astro。
- 项目操作者已标准化使用 SvelteKit → 使用它。
不要使用：WordPress、Wix、无框架的原始 HTML+JS、无 Tailwind 的原始 CSS。发布慢，迭代难。
节结构（经 B2B/SaaS 技术受众验证）
按此顺序。无明确原因不要跳过任何节：
- 英雄区 — 标题 + 副标题 + 主要行动号召 + 视觉元素
- 社交证明 — 标志、数据横幅、推荐（仅限真实）
- 问题 — 现状中的问题（你在此处赢得信誉）
- 解决方案 — 如何修复（最多 3 个功能）
- 工作原理 — 3-4 步，附图表或截图
- 用例 — 2-3 个角色，不要更多
- 定价 — 除非确实不能，否则显示价格
- 常见问题 — 5-8 个真实问题和答案
- 最终行动号召 — 重申价值，重复行动
- 页脚 — 法律信息、社交、联系方式
除非创始人信誉是销售关键（大多数 B2B 基础架构产品：跳过；创始人主导的消费者产品：包含），否则跳过“关于我们/团队”。
英雄区结构
[标题：6-10 个词，价值承诺]
[副标题：15-25 个词，谁/什么/为什么]
[主要行动号召] [次要行动号召——“看看它如何工作”]
[视觉元素：截图、图表或 30 秒演示循环]
标题规则：
- 承诺结果，而非功能。
- 具体优于抽象。
- 包含主要关键字，用于 SEO 和资格筛选。
示例：
- ❌ “现代化的基础设施，适用于现代应用”
- ✅ “Solana RPC 基础设施，p99 低于 50ms”
- ❌ “公共招标的透明平台”
- ✅ “10 分钟加入公共招标”
项目特定默认值
[项目 A] 落地页
- 主要本地市场，需要第二语言时英文在
/en。 - 英雄区：仪表盘截图，高亮显示一个招标卡片。
- 信任信号：法律引用（相关合规徽章）、审计标志、监管认证（如适用）。
- 颜色：品牌主色 + 中性奶油色 + 稳重的强调色。
- 移动优先的硬性要求：用户主要在手机上。
- 表单捕获：WhatsApp + 电子邮件（WhatsApp 在 AR 地区的 SMB 中非常流行）。
[项目 B] 落地页
- 主要本地市场，需要第二语言时英文在
/en。 - 信任、信任、信任。合规徽章、加密可视化、患者控制信息传递。
- 摄影风格：温暖、人文、非科技冷淡感。
- 颜色：比[项目 A]更温暖的调色板（赤陶色、鼠尾草色、奶油色）。
- 表单最小化——仅需电子邮件 + “我是 [患者 | 医生 | 诊所]”选择器。
- 隐私声明醒目（引用适用的本地患者权利和个人数据保护法）。
[公司] 产品页面
- 英文优先，无本地化。
- 代码密集。可复制粘贴的实时代码片段。
- 到处显示性能数据（“p99 < 50ms”、“10 万 TPS”），附带基准测试方法链接。
- 免费层级注册行动号召。
- 颜色：[公司]品牌调色板来自
brand-creation输出。
逐小时时间线
第 1 小时：设置
pnpm create astro@latest <project> -- --template basics --typescript strict
cd <project>
pnpm add @astrojs/tailwind @astrojs/sitemap @astrojs/vercel
pnpm dlx astro add tailwind sitemap vercel
pnpm add -D @astrojs/check
初始化 Vercel 项目（CLI 自动检测 Astro）：
pnpm dlx vercel link
pnpm dlx vercel deploy --prod # 基础空白部署，验证管道
第 2-3 小时：文案 + 结构
- 先在 markdown 中编写文案（在
docs/landing-copy.md中）。 - 文案真实之前不要设计。
- 逐节进行。构建时使用移动优先视口。
第 4 小时：视觉润色
- 英雄区视觉使用
nanobanana技能或真实截图。 - 节插图风格一致（不要混合多种风格）。
- Tailwind 间距严格使用预设值（不使用任意值）。
第 5 小时：表单 + 分析
- 表单通过 Vercel Edge Function 发送到 Resend（事务性邮件）或 Supabase（等候名单数据库）。
- Plausible 脚本（自托管在 Walter-VM 或云上，€9/月）。
- 测试完整流程：表单 → 邮件确认 → 数据库记录。
第 6 小时：SEO + 头部
- 每个页面的元标签（标题、描述、og:、twitter:）。
- 规范 URL。
- JSON-LD 结构化数据（Organization 或 Product）。
- Robots.txt + sitemap.xml（Astro 插件自动生成）。
- 安全头部（在
vercel.json或中间件中）：{ "headers": [{ "source": "/(.*)", "headers": [ { "key": "Strict-Transport-Security", "value": "max-age=31536000; includeSubDomains; preload" }, { "key": "X-Content-Type-Options", "value": "nosniff" }, { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }, { "key": "Permissions-Policy", "value": "camera=(), microphone=(), geolocation=()" }, { "key": "Content-Security-Policy", "value": "default-src 'self'; img-src 'self' data: https:; style-src 'self' 'unsafe-inline'; script-src 'self' https://plausible.io" } ] }] }
第 7 小时：性能检查
- 运行 Lighthouse。所有四个分数 ≥ 95。
- 图片尺寸正确（使用下一代格式，适配视口尺寸）。
- 初始包 gzip 后 < 150KB。
- LCP 元素预加载。
第 8 小时：部署 + 验证
- 通过 Vercel 自定义域名（Cloudflare DNS 指向 Vercel）。
- 生产部署。
- 在真实手机上测试。
- 提交到 Google Search Console。
- 第一个分析事件已触发。
性能预算（硬性）
| 指标 | 预算 | 工具 |
|---|---|---|
| Lighthouse 性能 | ≥ 95 | CI |
| Lighthouse 无障碍 | ≥ 95 | CI |
| Lighthouse 最佳实践 | ≥ 95 | CI |
| Lighthouse SEO | ≥ 95 | CI |
| 3G 下的 LCP | < 2.5s | WebPageTest |
| INP p75 | < 200ms | RUM（Plausible 若启用，或 web-vitals 库） |
| CLS | < 0.1 | RUM |
| 初始 JS gzip | < 150KB | bundlewatch |
| 首字节时间 | < 200ms | Vercel Edge |
如果任何指标失败：发布前修复。指标糟糕的营销页面会立即降低转化率。
文案规则
对于技术产品（[公司]）：
- 以客户搜索的名词开头（“Solana RPC”）。
- 尽早给出数据——在前 5 秒内提供相信的理由。
- 展示胜于讲述：代码片段、截图、真实数字。
- 一个行动号召，重复出现。
对于消费者/本地市场（[项目 A]、[项目 B]）：
- 用简单的词、短的句子。
- 以用户自问的问题开头。
- 信任信号（合规、安全徽章）更醒目。
- 多个行动号召可以（注册、了解更多、联系我们）。
表单捕获
// Vercel Edge 函数：/api/signup.ts
export const config = { runtime: 'edge' }
export default async function handler(req: Request) {
if (req.method !== 'POST') return new Response('Method Not Allowed', { status: 405 })
const { email, source } = await req.json()
// 通过 Vercel KV / Upstash 按 IP 限流
// 使用 zod 验证电子邮件
// 插入到 Supabase 等候名单表（RLS 保护）
// 通过 Resend 触发确认邮件
// 返回 200 或特定错误
return Response.json({ ok: true })
}
永远不要：
- 信任客户端“记住”提交状态。
- 跳过服务器端验证。
- 忘记限流（一个用户、一个机器人、一次 DDoS——同一个 bug）。
分析默认值
Plausible（自托管在 Walter-VM 或云上）：
<script defer data-domain="[project-a].com.ar" src="https://plausible.<domain>/js/script.js"></script>
跟踪：
- 页面浏览量（默认）
- 出站点击（
data-domain="..." data-track-outbound="true"） - 表单提交（自定义事件）
- 长页面上的滚动深度（自定义事件，防抖）
不要：
- 添加 Google Analytics。太重、对隐私不友好、EU-AAR 存在歧义。
- 添加会话回放工具。特别是对于[项目 B]（PHI 风险）。
- 添加热力图。又重又令人不适。
反模式（不要这样做）
- 轮播英雄区——没有人点击第一张之后的内容。
- 太多行动号召——在英雄区同时显示“注册”+“了解更多”+“观看演示”+“阅读博客”会导致决策瘫痪。
- 办公室内面带微笑的多样化人群的库存照片——瞬间显得“通用 SaaS”。
- 50 个小竞品标志的跑马灯——选择 4-6 个可读的即可。
- 功能墙——选择 3 个或 6 个，而不是 27 个。
- 带有声音的自动播放视频——瞬间跳出。
- 页面加载前的弹窗——瞬间跳出。
- 阻止页面的 Cookie 横幅——在欧盟违法，在其他地方令人讨厌。使用最小化、非阻塞的通知。
何时进行 A/B 测试
在达到每周 1000+ 访问者之前不要进行。低于这个数量，噪音主导结果。
做好准备后：
- 一次只测试一个元素（标题、英雄视觉、行动号召文案）。
- 使用 Vercel A/B 测试或 Plausible 的拆分测试。
- 在宣布胜者之前确保统计显著性。
硬性规则
- 8 小时预算硬性。如果到第 6 小时你还在设计，直接发布第 7 小时的工作并跳过第 8 小时的润色。 不完美的在线版本胜于仓库中完美的版本。
- 每个外部脚本都经过审计。 不要有“顺手加个 Hotjar / FullStory / Drift”的想法。每个脚本都会拖慢页面并增加隐私风险。
- 未经预览部署批准，不得进行生产变更。
- Lighthouse 未通过 = 发布阻塞。
集成
nanobanana用于生成英雄/插图。brand-creation输出用于调色板、字体、语调。- 内置
frontend-quality规则（无障碍 + 性能）。 - 内置
web-security-baseline头部。 seo-keyword-research（推迟到待办）为文案和元信息提供依据。pr-review技能用于合并前的最终审查。
此技能不做的事
- 含有认证、仪表盘等的多页面应用 → 从 Next.js 开始。
- 博客搭建。使用 Astro Starlight 或 Mintlify 风格的文档框架。
- 邮件营销自动化。使用 ConvertKit / Beehiiv。
- 客户支持聊天。如果必须，使用 Crisp（阿根廷选项，支持多语言）。