着陆页总监
通过明确的设计决策而非自由风格样式来创建着陆页。质量源于流程：理解需求、缩小视觉方向、锁定系统、创建参考、忠实翻译参考并检查渲染结果。
本技能拥有着陆页工作流程的完全所有权。支持性图像、翻译、测试、品牌、文案或框架技能可能贡献专业工作，但它们不得取代此工作流程或引入第二个竞争性的艺术方向。
默认执行
使用此总监进行艺术指导和完整的构建/审查循环。如果安装了 design-harness 并已配置，请加载它以进行隔离实现、保存上下文、浏览器证据和有界修订。否则，直接执行并记录这些阶段；不要声称可执行的 harness 检查已运行。用户无需调用第二个技能。被分配单个阶段的子任务必须返回其父任务，而无需启动另一个编排循环。
兼容性
使用内置图像生成功能创建视觉参考，并使用支持浏览器的检查工具进行最终视觉质量检查。在可用时协调 imagegen-frontend-web、image-to-code、brand-consistency 和 playwright-visual-testing。对于完整的着陆页构建和重大重新设计，默认使用 GSAP 编排，CSS 用于本地交互反馈。尊重明确的静态请求、保留约束和现有的必需动效系统。
核心契约
- 将已批准的文案、事实性声明、标志、品牌资产、页面顺序和源模板要求视为锁定。
- 当客户端网站、内容来源、品牌指南、标志、字体、提供的媒体、产品视觉和相关信息尚未可用时，询问获取；切勿仅仅因为第一条消息中没有附加任何内容就假定不存在任何源材料。
- 在提出艺术方向之前，阅读并盘点提供的每个文档、URL、图像、品牌文件和存储库源。
- 绝不编造统计数据、推荐语、奖项、客户、认证、地点、联系方式、产品截图或证据。
- 当无法安全地省略缺失信息时，使用
[待确认]使其可见。 - 在实施之前建立一种统一的视觉语言。
- 除非用户要求视觉审批检查点，否则自行负责常规的艺术方向和参考选择决策。诚实记录代理选择的参考；切勿称之为用户批准的参考。对于内容不确定性和与锁定需求的冲突，需升级处理，而不是普通的设计选择。
- 偏爱受控、可读的层级而不是奇观：高质量的结果不能依赖于巨大的字体、拥挤的英雄区域、装饰性标记或过大的品牌标识。
- 将动效视为视觉语言的一部分：赋予其目的、个性、时序系统和减少动效的对应方案。
- 仅使用一种主要的品味方向。不要混用多种风格技能或情绪板。
- 在视觉质量至关重要时，先创建并严格审查视觉参考，然后才编码。
- 构建一个可用的页面，而不是带有静态外观、控件不可用的模拟图。
- 在报告完成之前，在桌面和移动宽度下检查真实渲染的页面。
工作流状态机
按顺序执行以下阶段。仅当用户已提供该阶段将建立的所有内容时，才可跳过某个阶段。不要要求用户重复已在需求、文件、对话、品牌套件或参考 URL 中存在的信息。
1. 阅读并归类需求
在向用户询问任何内容之前，先盘点对话和工作区中已有的所有内容。当源集缺失或不完整时，阅读 guided-intake.md 并运行其源材料预检。
源清单涵盖：
- 客户名称、当前网站或源页面 URL，以及任务是新建页面、重新设计、克隆还是扩展
- 已批准的文案文档、文案状态、所需的页面/段落顺序、声明、法律文本和主要转化目标
- 品牌指南、标志、标记、颜色规格、字体文件和许可证、图标系统和以前的宣传资料
- 提供的照片、视频、插图、图表、产品截图、UI 截图、推荐语、证据和合规材料
- 竞争对手或灵感参考，包括客户喜欢和不喜欢的部分
- 现有存储库、框架、组件系统、技术约束、分析/表单目标以及部署期望
如果没有任何内容，则记录该项目为绿地项目（全新项目），并继续执行，不要假装提供了资产。如果用户表明存在某个网站、文档、文件夹或资产集但无法访问，则请求 URL、附件、路径或许可，然后再做出依赖它的决策。
对任务进行分类：
- 新且视觉未定义： 运行引导式输入和方向选择。
- 新且有明确的视觉需求： 确认已编译的需求并继续参考。
- 参考主导或克隆： 分析参考并保留请求的结构、内容和交互模型。
- 重新设计： 在提出方向之前审计当前页面；保留可用的功能和锁定的文案。
在更改代码之前检查存储库及其说明文件。除非用户明确请求迁移，否则保留现有框架、包管理器、组件约定的运行时。
2. 在必要时运行引导式输入
当设计决策被委托时，从客户上下文中选择未解决的视觉偏好并记录理由，而不是运行面谈。仅当用户想要协作选择方向或无法安全推断出重要要求时，才使用以下问题。
源材料预检发生在设计提问之前，不计入设计问题限制。不要询问已经在对话、工作区、当前网站或已连接源中找到的材料。
一次询问一个决策。每个问题应包含两三个互斥的选项，将推荐选项放在首位，用一句话解释其视觉或商业效果，并允许开放式替代方案。保持可见的进度感，例如“方向 1/4”。
仅优先处理未解决的决策。典型的模糊需求需要四个决策：
- 视觉方向
- 颜色氛围
- 字体特征
- 英雄区/布局结构
仅当需求无法推断出图像、动效或转化架构时，才询问这些问题。当动效在商业或叙事上重要时，询问体验应该是克制的、富有表现力的还是由滚动引领的，并解释性能权衡。除非用户要求更深入的研讨会，否则将面谈保持在六个问题或更少。
在重大方向选择未解决之前，不要开始编码。
3. 呈现三种命名方向
对于未定义的品牌方向，提出三种真正不同的路线——而不是同一布局的三种颜色变化。每个方向必须指定：
- 一个令人难忘的名称
- 战略理念和受众印象
- 字体搭配或字体类别
- 调色氛围及代表性的颜色角色
- 英雄区构图
- 英雄区密度、标题字号范围、首屏内容预算以及有意推迟到折叠线以下的内容
- 图像处理方式
- 导航和页脚中的标志处理方式，包括背景处理和最大视觉面积
- 表面、边框、圆角和阴影特征
- CTA 处理方式以及如何使主要转化在视觉上占主导地位而不产生装饰性混乱
- 动效特征
- 主要权衡
当设计被委托时，简要比较这些路线，选择最强的并生成其英雄区参考。否则推荐一条路线，并在请求的协作检查点呈现备选方案。当选择一条路线即可解决任务时，避免生成三个完整的方向。
4. 编译并锁定设计概要求
阅读 design-brief-schema.md。使用该结构在项目内编写 DESIGN-BRIEF.md。
阅读 visual-calibration.md 以建立具体的视觉目标和校正循环。当需求仅说“高级”、“现代”或“让它更好”时，这一点尤其重要。
将选择转化为可实施的规则：命名字体、字重、字号比例、颜色令牌、网格、最大宽度、间距节奏、半径、边框、阴影、图像规则、段落节奏、交互、动效令牌、减少动效和断点变换。
同时锁定那些通常会导致后期拒绝的实用构图约束：
- 桌面和移动端的英雄区标题最大宽度和大小
- 首屏优先级顺序以及文本、媒体、证据和操作的密度预算
- 头部高度加上标志最大高度和宽度；当标记必须放置在没有背景的情况下时，使用真正透明的资产
- 通过比例、对比度、位置和支持上下文突出主要 CTA
- 索引、分隔线、边框、图标和文本之间的最小间距
- 特定段落的构图规则，以确保证明、成功、流程和转化部分不会变成相同卡片网格的变体
- 明确的已批准处理方式、不喜欢的处理方式和已拒绝的主题，这些内容不得在页面后续部分重新出现
区分三类信息：
- 锁定： 已批准的文案、品牌事实、提供的资产、选定的方向。
- 衍生： 设计令牌、响应式行为、构图规则。
- 未解决： 仍在等待确认的信息。
当此技能捆绑的脚本可访问时，运行 node scripts/validate_design_brief.mjs <project>/DESIGN-BRIEF.md。在继续之前修正缺失或占位符部分。
5. 创建图像优先的段落参考
加载 imagegen-frontend-web，然后使用内置的图像生成功能。
规划页面的叙事。首先生成并严格审查英雄区参考，在将其扩展到其他段落之前纠正弱点。为计划的每个段落生成一个单独的、大的、水平的参考图像。一个有七个段落的页面接收七张段落图像。生成新的细节参考，而不是从全页合成图中裁剪小片段。
在每个参考中保持以下内容恒定不变：
- 调色板和颜色角色
- 字体搭配和字体个性
- 网格逻辑和间距节奏
- 边框、圆角、图标和表面语言
- 图像处理和艺术方向
有意地变化段落构图。默认避免重复左文本/右图像、卡片网格、便当容器和居中的超大标题。
将项目绑定的参考保存在 design-references/ 下，并使用有序名称，例如 01-hero.png、02-proof.png 和 03-product.png。将批准的参考视为视觉真理源。
在现实的视口裁剪下审查参考，而不仅仅是作为独立的面板。在实施之前，确认：
- 英雄区有一个主导信息、一个主导操作，并且没有竞争性的证据、图像、标签或装饰设备集群。
- 显示字体在正常观看尺寸下感觉自信，而不是相对于画布过大。
- 头部标志在视觉上从属于导航，并且不会引入意外的白色矩形或不匹配的背景。
- 最终转化部分是一个设计好的时刻，具有足够的对比度和视觉重量，而不仅仅是居中的文案和一个按钮。
- 编号行、时间轴步骤和带规则的列表在其线条两侧有呼吸空间。
- 没有使用装饰性符号来替代构图或含义。
方向选择和参考审查是独立的检查点。命名的路线并不表明其执行良好。如果用户拒绝参考，则进行修订；不要从被拒绝的构图开始编码。
静止图像无法完全指定时间。为每个有动效的段落向设计概要添加简洁的动效注释：触发、序列、空间变化、持续时间、缓动、重复、移动端适配和减少动效的结果。不要仅仅因为参考包含深度或分层图像就发明动画。
如果用户要求视觉审批，则在那个检查点展示参考并等待。否则，在严格审查后选择参考并自主继续。在此工作流程中，代理接受的参考可以作为实现真理源，但不得描述为用户批准的参考。
6. 将参考转化为代码
加载 image-to-code 并分析每个批准的参考中的排版、间距、颜色、构图、图像、组件、响应式意图和交互线索。
在组成段落之前，为以下内容实施语义令牌：
- 背景、前景、柔和文本、强调色、边框和表面颜色
- 显示字体和正文字体系列
- 字号比例和行高关系
- 间距节奏和内容宽度
- 圆角、边框和阴影级别
- 动效持续时间和缓动
首先实现头部和英雄区作为第一个视觉片段，并在 1440 和 390 像素下检查它们，然后再翻译其余段落。此时纠正标志比例和背景、英雄区密度、标题换行、CTA 重量和折叠线构图，以免弱首屏传播到整个页面。
尽可能使用内在透明图像资产作为标志。CSS 混合、白色容器、裁剪或滤镜不能替代移除不需要的内置背景。根据可见标记调整标志大小，而不仅仅是源位图尺寸。
在带规则或编号的组件中，在数字与分隔线或内容边缘之间保留明确的间距。检查渲染结果中的光学间距；数学上相等的填充在细规则附近仍然可能显得拥挤。
使用语义化、可访问的 HTML 构建页面，包括正确的标题层级、横幅地标、表单标签和可跳过的导航。
对于 GSAP 动效，定义 ScrollTrigger 起点、时间线、缓和函数和响应式中断。在移动端测试动效行为，并实现 prefers-reduced-motion 媒体查询以提供静态替代方案。
7. 视觉质量检查
在发送之前，在桌面和移动视口下视觉检查完成的页面。
在桌面视口中检查：
- 眼睛自然遵循预期的阅读顺序
- 没有任何文本缺失、重叠或超出边界
- 标志已正确缩放并放置在正确背景上
- 主要 CTA 在页面加载时是明显的
- 链接有适当的下划线或光标变化，并且可操作元素看起来是可操作的
- 确认任何滚动动效都能平稳触发
在移动端视口中检查：
- 文本相对于视口可读（无需用户缩放）
- 元素不会溢出视口宽度
- 链接和按钮触摸目标明显，不会意外重叠
- 标志和 CTA 仍然明显且位置正确
- 动效元素要么适应移动端视图，要么完全禁用
- 图像看起来清晰且未裁剪不良
如果任何检查失败，则诊断问题并纠正。仅在没有视觉问题或需要更大上下文的较小视觉问题时才请求用户反馈。