从零构建一个生产级着陆页。该技能拥有技术层（性能、SEO、图标、图片、验证）。Impeccable 拥有设计权。 不要重新发明视觉效果——交给它处理。
首先：只问缺失的信息
不要假设。如果以下任何一项在请求中不明确，请提问（每次批量 2–4 个问题，使用用户的语言）：
- 品牌：名称、业务描述、一行价值主张、Logo 文件（或者生成一个？）。
- 受众 + 目标：谁访问网站，主要的单一转化目标（WhatsApp / 表单 / 电话 / 注册 / 购买）。
- 板块 / 内容：存在哪些区块及其真实文案（服务、关于、流程、联系方式……）。切勿捏造事实、价格、统计数据或推荐语——将未知内容标记为
// PLACEHOLDER — editar。 - 外观：任何灵感/参考图片、调色板或品牌颜色、语言/区域设置、目标域名（用于 SEO 的
SITE_URL）。 - 图片：确认 Gemini 密钥已存放在
.env中，变量名为GEMINI-IMAGES-API（参见图片步骤）。
工作流程
-
脚手架 —— Next.js App Router + TS + Tailwind。首先阅读项目自己的框架文档（例如
node_modules/next/dist/docs/）；API 可能与训练数据不同。保持每个文件少于 350 行。 内容的唯一真实来源： 所有可编辑的值 —— 每个标题、段落、列表项、品牌名称、链接、电话号码/WhatsApp、价格、SEO 字符串 —— 都存放在一个带类型的文件中（lib/content.ts或site.config.ts）。组件从中导入，不包含任何硬编码的文案。环境相关的值（SITE_URL、联系电话）来自.env，并通过该文件重新导出。目标：非开发人员通过编辑一个文件即可更改所有内容。 -
设计 → Impeccable。 这对于视觉质量是不可或缺的。对于新项目，运行
/impeccable init（它会设置 PRODUCT.md/DESIGN.md，选择品牌注册表和调色板），然后为每个区块运行/impeccable craft <section>。Impeccable 的反混搭规则（不是每个板块都有眉题，没有 01/02/03 的脚手架，没有相同的卡片网格，对比度 ≥4.5:1，有意的动效）是标准。目标：干净、极简、视觉上引人注目 —— 不是 AI 生成的泛化内容。 -
图片 —— 填充每个视觉位置。编写
public/images/manifest.json，运行scripts/generate-images.mjs，后期处理，验证。一个共享的style= 一套有凝聚力的图片集。切勿读取或打印.env—— 只使用node --env-file=.env。→ references/images.md -
性能 —— next/image（AVIF 格式、
sizes属性，priority仅用于 LCP 元素）、next/font、压缩资源、不将真实内容隐藏在opacity:0的渐显后面（预渲染时会显示空白）、减量动效的回退。→ references/performance.md -
SEO + 网站图标 —— Metadata API（canonical、OG 1200×630、twitter）、
viewport、robots.ts、sitemap.ts、JSON-LD、<html lang>，以及通过scripts/make-icons.mjs从 Logo 生成的图标/OG 图片。→ references/seo.md -
验证 ——
npm run build干净运行 + 无头截图（应实际渲染，使用较大的--virtual-time-budget；很小的 PNG 表示空白 = 渐显陷阱）+ 如果可用则 Lighthouse 95+。在接入之前检查生成的图片。
脚本
scripts/generate-images.mjs—— 从清单使用 Gemini 生成图片。node --env-file=.env <script> public/images/manifest.json [names…] [--dry]。读取GEMINI-IMAGES-API，从不记录它。scripts/make-icons.mjs—— 从 Logo 生成 favicon.ico + icon.png + apple-icon.png + og.jpg（需要sharp）。node <script> --logo public/logo.png [--mark …] [--out-app src/app] [--bg "#fafaf8"] [--title "…"] [--crop "L,T,W,H"]。
硬性规则
- 切勿读取/显示
.env或 API 密钥。 - 所有可编辑内容在一个文件中；组件中无硬编码文案。
- 设计质量需通过 Impeccable 把控；不要交付默认外观的输出。
- 不捏造事实/统计数据/推荐语 —— 使用清晰标记的占位符。
- 不要将真实内容隐藏在由 JS 触发的渐显后面（空白页面陷阱）。