着陆页构建器
构建完整的页面，而不是提示词、线框图、情绪板或部分样本。交付由真实浏览器QA支持的可行代码。高级质量意味着品牌特定的决策、优秀的排版/构图/图像、转化清晰度、响应式工艺、有目的的运动、可访问性、性能和事实完整性。
调用时，读取上面的 metadata.version，并在项目简报中记录 landing-page v<版本>。在完成报告中重复该确切版本，以便每个生成的着陆页都可追溯到产生它的技能版本。
硬性输出合同
交付：
- 在新的或明确批准的现有项目中的完整响应式实现；
- 精确保留用户提供的文案；仅当用户明确要求时才编写、编辑或重构文案；
- 可工作的品牌系统、资产清单/来源说明以及集成说明；
- 当图片生成或批准的资产可用时，使用生产级图像而不是占位符；
- 有目的的GSAP编排、滚动触发的部分移动和控件微交互，默认适用于完整构建，但需遵循文档化的模式例外情况；
- SEO/OG元数据、语义结构、可访问性状态和优化后的媒体；
- 经过浏览器测试的用户视口、断点边界、平板、窄屏移动端和常见移动端状态；
- 默认Vercel部署，随后进行实时桌面/移动端验证；仅当身份验证或其他真实障碍阻止部署时才询问。
切勿捏造声明、指标、资质、推荐语、客户Logo、受监管的措辞、产品、截图、联系信息或表单成功状态。
必需的技能路由
在构建之前加载：
frontend-design用于品牌特定的艺术指导和视觉论点。design-taste-frontend用于反低质量实现和响应式预检。imagegen-frontend-web仅当权威模式矩阵解析为：视觉模糊、图像主导方向、请求的概念或批准的资产不足时。- 本
landing-page技能用于编排、构建、QA和交付。 - 当官方/提供的资产清单无法支持批准的视觉方向时，使用可用的生产图片生成能力或
media-use。 imagegen-frontend-mobile仅用于明确标记的概念性应用屏幕媒体或移动应用营销页面上批准的产品屏幕概念。切勿用于设计响应式移动网页或暗示生成的屏幕是经过验证的产品功能。
阅读 references/frontend-skill-stack.md 了解堆栈冲突规则。
项目模式决策
阅读 references/policy-matrix.md。它是Imagegen、GSAP、保留、批准、集成安全、视口覆盖范围和质量门控路由的唯一权威来源。从其六种模式中精确选择一个，并记录已解决的决策及其理由。其他地方的任何文字都不得覆盖该矩阵。
当用户说“从头开始”或“不要触及以前的构建”时，创建一个唯一命名的项目，并且永远不要编辑以前的工作。
阶段 1：调用信息收集
一次只问一个简短的问题。切勿将多个字段合并成一段文字或问卷。在回答下一个真正必要的问题之前等待答案。
使用以下顺序，跳过任何已提供或可以安全推断的内容：
- 这是为哪个公司/产品和官方网站？
- 最终用户批准的文案在哪里？文案是必需的，并且将被精确保留。
- 品牌指南、Logo和已批准的资产（如果存在）在哪里？
- 这是一个新的独立构建还是对现有项目的编辑？
- 仅当提供的网站/文案无法回答以下问题并且确实阻碍实现时，才询问受众、CTA目标、集成或合规性。
不要询问是否可以重写文案。不要提供编写或更改文案的服务。编写、编辑或重构仅在用户明确要求时才启用。不要询问是否部署；Vercel部署是默认选项。
阅读 references/intake-brand-assets.md 并遵循其来源层次结构、Logo恢复、品牌指南回退、合规性、集成和来源规则。
阶段 2：证据与品牌审计
信息收集后：
- 阅读项目说明、批准的简报/内容、事先批准和提供的参考资料。
- 如果存在官方网站，则在真实浏览器中打开它；否则记录新品牌/无站点状况，并根据提供的上下文继续。
- 提取计算出的字体/颜色、Logo变体、间距、网格、圆角、按钮、图标、图像、导航、表单、页脚、响应式行为和动态效果。
- 恢复并视觉验证官方的SVG或透明高分辨率PNG Logo。如果现有Logo不可用，请向用户索要。如果不存在Logo，请确认纯文本产品名称处理是否可以接受，并记录Logo设计超出范围。切勿重绘或生成客户Logo。
- 同时提取文档文本和图像；保留图像与文案之间的关系。
- 创建经过验证的资产清单。
- 如果不存在品牌指南，则创建一份简洁的、由智能体编写的项目指南，并诚实标记。
对于受监管/信任敏感的工作，除非明确授权进行编辑，否则保留提供的免责声明、许可、奖项措辞、资格、同意和资质。
阶段 3：内容与转化架构
在设计之前创建内容清单：
- 每个部分的来源支持性标题/正文/CTA/声明；
- 部分职责：吸引、解释、证明、差异化、回答或转化；
- 证据来源或未解决的占位符；
- 预期的视觉/媒体和资产状态；
- 主要转化路径和CTA目标。
approval_status和verification_status分别针对事实声明、推荐语、指标、资质和受监管措辞进行追踪。
默认内容策略是精确保留用户提供的文案。仅当用户明确要求编辑或写作时，才可选择 authorized_editing 或 agent_draft_unapproved。由智能体撰写的草稿保持未批准状态，并且不能包含未经支持的声明。
仅使用那些回答真实转化问题的部分。不要机械地包含英雄区域 + 信任区域 + 三张卡片 + 推荐语 + 常见问题。每个部分一个主要想法。在现有项目中保留已批准的IA，除非得到授权进行更改。
阶段 4：设计简报与图片生成
编写编码前简报：
- 受众、转化目标、信息来源、项目模式；
- 一个针对主题的视觉论点和叙事主线；
- 调色板、排版角色、网格/间距、形状/组件语法；
- 图像级别、资产地图、图片生成计划、标志性元素；
- 桌面/平板/移动端的首屏和复杂部分行为；
- 动画故事板，每个序列都有目的；
- 明确的避免列表和验收标准。
如果该方向可以不加修改地用于不相关的品牌，则拒绝该方向。
当策略矩阵解析为Imagegen开启时，阅读 references/imagegen-production.md：
- 使用
imagegen-frontend-web并宣布所选的参考计数。 - 为每个选定的部分生成并检查一个单独的横向参考。
- 保持一个品牌世界，同时改变构图和密度。
- 通过用户检查点（请求/后果性的权衡）或智能体验收门（自主、可逆、来源支持）锁定方向。记录使用了哪种批准模式。
- 以真实宽高比分别生成/解析生产资产，不包含内置的文本、Logo、声明或水印。除了策略路由的、明确标记的概念性应用屏幕情况外，排除UI。
- 检查、裁剪、优化、添加替代文本并记录来源。
根据叙事效用、可见重复、品牌特异性和资产质量来判断图像，而不是根据数量。有意的、以排版为主或资产丰富的页面可能跳过生成并记录理由；意外的、以文本为主或库存通用的页面将失败。
阶段 5：静态实现与批准
选择满足简报的最简单堆栈：
- 保留现有仓库的框架、样式、路由、组件、分析和资产管道；
- 对于真正的静态页面，使用语义HTML、外部CSS和外部JS；
- 仅当现有架构、可重用组件、集成、状态或复杂交互证明其合理时，才使用React/Vite/Next；
- 在导入依赖项之前验证它们。
在动态效果之前完成静态页面。它必须已经具备：
- 正确的文案、经过验证的Logo/资产、真实的CTA目标；
- 连贯的令牌和组件语法；
- 在用户视口处受控的排版和换行；
- 足够的构图多样性以避免可见的重复，没有数值布局配额；
- 有意的图像裁剪和保留的尺寸；
- 可工作的导航、表单/链接、焦点和交互状态；
- 深思熟虑的响应式重排而不是意外的堆叠；
- 没有损坏的媒体、溢出、裁剪、虚假UI、占位符或源码残留。
在开始GSAP之前，对静态构图进行截图QA并修复。
阶段 6：GSAP生产阶段
对于每个完整构建和重大重新设计，阅读 references/gsap-motion.md；在简报中规划动态效果，并在静态构图QA之后实现它。
对于策略矩阵下的完整构建，动态效果默认开启。交付英雄区域编排、特定内容的移动以及现有交互控件的反馈。根据品牌调整强度。有效的静态/运行时/保留约束可能改变这一点；没有明确的动画请求不是跳过的理由。在 QA/motion-review.md 中记录运行时观察结果；仅凭截图不能通过动态效果验收。
如果脚本失败或加载缓慢，保持关键内容可见。不要使用原始的窗口滚动监听器。验证活动标签页的动画，因为后台标签页会限制计时器。
阶段 7：浏览器QA
在本地运行页面并检查真实的截图和状态：
- 用户的实际视口、每个布局断点边界、一个平板、一个窄屏移动端和一个常见移动端；375px/390px是默认值而非通用要求；
- 首屏、多个中页部分、最终CTA/页脚；
- 活跃和静止的动态效果状态以及减少动态效果状态；
- 菜单、锚点、表单、手风琴、标签页、轮播和键盘使用；
- 在排版重要的情况下计算字体系列/粗细；
- 图像加载/自然尺寸、裁剪、替代文本；
- 水平溢出、裁剪、控制台/网络错误、CLS风险；
- 表单/CTA目标和成功/错误行为。使用沙盒/测试端点和合成数据。未经明确批准，切勿提交真实的潜在客户、CRM记录、付款、电子邮件或分析事件。
在移交前修复缺陷。构建通过不是设计QA。
阶段 8：高级质量门禁
阅读 references/premium-quality-gate.md 并根据证据评分：
- 品牌特异性
- 转化与叙事
- 排版
- 构图与间距
- 图像与艺术指导
- 组件工艺
- 响应式设计
- 动态效果
- 可访问性和完整性
- 性能与生产就绪性
使用二元关键检查加上基于证据的0/5/8/10锚点。任何适用类别得分不得低于8/10；目标为9+总分。仅当附有书面理由时才允许使用 N/A，包括在有意设计的静态页面上的动态效果。引用截图、DOM、审计或测试证据作为每个分数的依据。任何关键的拒绝标准都会导致页面不及格，无论平均分如何。修复最薄弱的适用类别，重新运行证据，并重新评分。
如果用户称作品为基本、通用或糟糕，则使当前的艺术方向无效。停止微调，确定系统性原因，重置论点/参考/首屏，重建，并重新进行QA。
阶段 9：SEO、性能与部署
交付前：
- 一个H1、逻辑标题结构、标题、描述、规范链接、OG元数据和favicon；
- 响应式优化图像、英雄区域优先级/预加载（如适用）、首屏以下媒体懒加载；
- 最多两个合理的字体系列和仅所需的字重；
- 语义元素、标签、替代文本、对比度、焦点、键盘和减少动态效果支持；
- 无虚假集成、未经验证的声明、控制台错误、损坏的链接或未解决的密钥；
- 包含文案/资产/Logo/图片生成/集成来源的源注释。
默认情况下，使用项目现有的Vercel配置或一个隔离的新项目名称，将每个完成的着陆页部署到Vercel。如果身份验证、所有权、密钥或其他真实障碍阻止部署，仅询问该障碍。在真实浏览器中通过桌面和移动端验证确切的实时别名；检查标题/内容标记、资产、导航、表单、溢出、控制台、动态效果和别名所有权。CLI成功或HTTP 200本身不是证据。
反低质量拒绝列表
拒绝：
- 通用的紫色/蓝色AI渐变、斑点、无意义的玻璃卡片、漂浮的3D填充物；
- 无关的库存握手、虚假仪表盘、捏造的图表/KPI、虚假的社会证明；
- 没有品牌理由的过大或压缩标题、微小正文文本、尴尬的换行；
- 相同的三张卡片行、重复的布局系列、过多的药丸/圆角/阴影；
- 诸如“革命”、“释放”、“下一代”、“无缝”之类的文案或模糊的CTA标签；
- 生产图像中生成的文字/Logo/UI；
- 仅仅是桌面版垂直堆叠的移动版；
- 用于掩盖薄弱静态设计的动画；
- 唯一职责是填充空间的装饰元素。
首选经过验证的品牌资产、特定主题的图像、受控的排版、多样但连贯的构图、一个令人难忘的标志性元素、有目的的负空间、清晰的证据和一个决定性的转化路径。
参考文献地图
| 需要 | 阅读 |
|---|---|
| 权威项目模式路由 | references/policy-matrix.md |
| 信息收集、站点/品牌/Logo/内容/资产/集成 | references/intake-brand-assets.md |
| 前端堆栈路由/冲突 | references/frontend-skill-stack.md |
| 生产图片生成 | references/imagegen-production.md |
| GSAP动态效果 | references/gsap-motion.md |
| 高级质量门禁 | references/premium-quality-gate.md |
模式摘要
| 模式 | Imagegen | GSAP | 保留 | 批准 | 集成安全 | 视口覆盖范围 | QA路径 |
|---|---|---|---|---|---|---|---|
| 全新构建 | 条件性 | 默认开启 | N/A | 明确 | 验证 | 完整 | 完整门禁 |
| 现有编辑 | 可选 | 按需 | 是 | 增量 | 验证 | 受影响区域 | 范围门禁 |
| 快速迭代 | 关闭 | 关闭 | 是 | 自动 | 验证 | 最小 | 简化 |
| 资产优先 | 关闭 | 默认开启 | N/A | 明确 | 验证 | 完整 | 完整门禁 |
| 内容试验 | 关闭 | 默认开启 | N/A | 自动 | 演示 | 最小 | 内容QA |
| 受监管 | 关闭 | 按需 | 是 | 严格 | 审计 | 完整 | 合规门禁 |