着陆页启动器

着陆页启动器 是做什么的？

像产品设计师与高转化文案一样思考：清晰呈现产品/服务，引导访客执行核心操作，同时维护项目自身的品牌身份。从构思到产出（提案、本地代码或已发布的页面）全程执行。围绕一个核心产品/服务、一个优先受众和一次主要转化来构建整个页面。

划定框架，不阻塞进程

• 从已有需求、仓库和材料中提取信息：产品/服务、受众、利益点、核心卖点、核心操作、语言、品牌标识以及页面发布目标。读取项目中相应的 AGENTS.md、PRODUCT.md/DESIGN.md 文件。
• 仅针对那些会实质改变解决方案的关键信息缺失才进行一轮追问。在等待答复期间继续独立推进工作。对于可逆的选择，简要声明一项假设并继续；不能编造商业事实。
• 区分行动号召（CTA）的目标与其真实去向：预约、购买、表单、应用下载或联系。在承诺收集线索或完成操作之前，先确认是否有相应后端的集成。
• 使用要求中指定的语言；若未指定，则跟随用户语言。在本技能参考资料中使用葡萄牙语（葡萄牙）；实际项目中根据需求调整。
• 遵循指定的技术栈和托管方式。在现有项目中，集成到已有架构中。对于简单独立的页面，优先使用纯 HTML/CSS/JS（无需构建）；当项目行为或复杂度需要时再选择框架。
• 当目标定为 Sites 或当前流程适用于未指定目标的新站点时，使用已安装的 sites:sites 技能进行实现和发布。用户指定的仓库或托管方式优先。在发布前查阅当前供应商的流程图。

定义页面的核心论点

在实现之前，简要沟通产品/服务、核心操作和所选方向。仅当需求本身要求时才交付完整的策略文档或长篇文案。构建类需求应直接产出实现。

根据访客意图选择结构：

情境	推荐结构
等待名单、下载或已有一定认知的受众	短页面：核心卖点、关键细节、行动号召及相关条件
需要演示的产品/服务	Hero 区、演示、好处、原理、可用证据、异议处理、最终 CTA
复杂产品或高摩擦决策	更长的叙事：解释与证据结合，提前处理条件和异议
用户明确要求对比或正在搜索替代方案	可验证的对比表，列出明确标准，并配以与用户意图一致的 CTA

• 撰写一个能让人一眼看出利益和目标受众的标题。副标题解释产品/服务和运作方式。CTA 描述下一步，如“预约演示”或“加入等待列表”。
• 如果页面源自某个广告、邮件或帖子，确保页面的承诺与之匹配。
• 优先突出一个商业行动。导航和辅助操作可以存在，但不应与主要 CTA 冲突。所有重复的 CTA 指向同一目标。
• 只选择能增加有价值信息的章节。不要在每个页面都强加固定数量的好处、步骤、问题或动画部分。
• 将功能与具体成果挂钩。只有当你拥有来自用户的真实材料或已验证的来源时，才使用数字、评价、Logo、价格、保证和条件。
• 如果没有社会证明，用产品演示、标注为示例的案例或解释流程来替代。不要用虚构的客户、指标、头像、稀缺性或折扣来填坑。
• 如果缺少关键商业条件，将其标注出来供后续决策，避免在公开文本中做出依赖该条件的承诺。永远不要将占位符作为最终内容发布。

创建独特的视觉方向

项目的品牌标识和已批准的材料指导设计选择。作者的参考资料旨在激发视觉质量，但不强制所有页面复用相同的字体、颜色或效果。

• 选择与产品相关的视觉概念：界面截图、摄影、物体、插画或文字排版组合。确保 Hero 区能与此概念以及 CTA 一起良好运作。
• 如果需求引用了一个带有特效或深度的视频，仔细阅读该序列并识别出激发参考的行为。在合适的载体中实现这些方面，并用动态效果验证；仅仅更换颜色和间距无法满足此类需求。
• 定义一小套字号、颜色、间距、圆角和动效的设计令牌。如果项目中已有现成令牌和组件，优先复用。
• 避免用重复的卡片、无功能的图标、装饰性渐变或统计数字自动填满页面。使用排版、对比、节奏和真实内容来建立视觉层次。
• 用真实截图展示现有产品。对于新图片，当 imagegen 技能可用且适用时使用；对于 SVG、CSS 或其他原生元素，使用相应载体。不要将生成的图像当作真实功能的证据。
• 为移动端调整视觉元素的裁剪和对比度。动效应有目的，并遵守 prefers-reduced-motion；无动画时内容应保持可读。视频需要海报图或静态替代方案，并采用适当的加载方式。
• 如果项目缺少视觉标识或用户要求接近 Elaya 参考的风格，则阅读 references/art-direction.md。但不要将此配方套用到已有设计系统的项目上。
• 对于包含滚动触发过渡的专业体验，阅读 references/scroll-storytelling.md。规划各节之间的路径，并验证全页的动效，而不仅仅局限于 Hero 区。
• 对于跟随鼠标的 3D 视觉效果（基于视频或帧序列），阅读 references/interactive-video-hero.md。在将资源连接到交互之前先准备好其运动；当需要视频无法提供的多视角或反应时，选择实时 3D 场景。

实现真实的转化

构建页面并根据审查意见在本地调整章节。保持需求范围和项目内实现与覆盖范围一致。

• 使用语义化 HTML、标题层级、原生控件、标签、可见焦点和键盘导航。确保可读性、对比度、有意义的替代文本和舒适的触摸目标。
• 将 CTA 和导航链接到真实目标。不要使用 href="#" 作为商业操作，也不要模拟成功状态。
• 对于表单，实现所需字段、验证以及发送、成功和错误状态。在实际服务接受后才确认成功。不要在客户端暴露凭据。
• 如果没有指定收集数据的服务，完成本地布局并标记集成待办。如果用户提供了真实的联系方式且能实现目标，则使用该真实替代方案。在数据未实际送达目标之前，不要声称收集功能已可用。
• 包含标题、描述、favicon 以及相关的社交元数据。Canonical URL、域名和社交图像应指向已知的真实资源。
• 根据页面目标和项目说明决定是否允许索引。营销活动不自动意味着 noindex；未广泛公开的路径也不自动排除索引。私有预览和不应出现在搜索结果中的页面应使用适当的机制（如 meta robots）。
• 不要编造法律政策或页脚链接。当有真实文档时复用它们；对于发布所缺少的文档进行标记。分析工具和跟踪器取决于需求范围和配置。

验证并发布

• 运行项目要求的检查以及足以确认变更的最小补充检查：需要时进行构建，必要时测试变更的行为。已规定的外部覆盖要求依然适用。
• 当浏览器可用时，在桌面和移动端检查渲染后的页面：Hero 区的层次、图片裁剪、文本换行、溢出、菜单、键盘操作、CTA 以及完整的转化路径。在适当环境中用测试数据测试表单，避免意外创建真实联系人或购买。
• 确认字体、图片和视频正常加载；无特效时内容依然可用；无死链或相关控制台错误。
• 如果无法进行视觉检查，执行可执行的检查并声明这一限制。不要声称已经查看或测试过页面而没有实际做。
• 对于发布请求，按照当前项目或供应商流程完成在授权目标上的发布。不要重复已经给出的授权。提案、草图或本地工作的请求应在其范围内结束。
• 发布后，检查供应商返回的状态，如果可以，打开最终 URL 并确认页面以及所有 CTA 的链接目标。保留现有受众；未经授权不得将页面设为公开。
• 交付时，说明在哪里查看结果、检查了哪些内容，以及任何待处理的具体集成、内容或访问问题。区分本地版本、私有预览和公开发布。

来源

本技能是对 landing-page-design by Elaya 的思想和流程的改编，原始内容分享于此文章。原 MIT 许可证保留于 LICENSE。

此次改编将范围限定为着陆页，保留每个项目的独特品牌标识，用基于上下文的实际选择取代通用美学规则，并增加了真实集成、可访问性、验证和发布环节。作者的材料不能替代本版本的说明。