技能介绍

落地页开发的重复劳动

每次接到营销页、产品发布页或单页站需求时，工程师都要从零搭建 HTML 结构、写 Tailwind 样式、处理响应式断点、加上暗色切换、补齐 OG 标签和结构化数据。这些工作高度重复，且细节容易遗漏：忘记在 <head> 里加 canonical，图片没有 loading="lazy"，暗色模式只做了 CSS 变量却没存 localStorage，移动端汉堡菜单的焦点样式缺失。结果就是大量时间花在搬砖上，而不是打磨业务逻辑。

从简报到单文件页面

这个技能将落地页构建拆解为清晰的步骤。第一步收集简报：名称、价值主张、目标受众、主次 CTA、品牌色、logo 和所需板块。第二步生成单个 index.html，内联 Tailwind CDN 配置，无需构建步骤。第三步按板块模式填充内容：sticky 导航、hero（首屏标题必须是价值主张而非产品名）、功能网格、社会证明、可选定价、FAQ 折叠面板和页脚。

技术层面，技能强制要求三档响应式断点（<640、640+、1024+）、暗色三态（light/dark/system，通过 CSS 变量和 .dark 类实现，并用 localStorage 记忆选择）、可访问性（标题层级、alt 属性、focus-visible 样式、4.5:1 对比度、跳转链接）以及 SEO（语义化标签、OG/Twitter 卡片、canonical、本地商家 JSON-LD）。核心逻辑不依赖 JavaScript，图片懒加载，字体使用系统栈，保证首屏性能。

适用边界

技能只处理单页落地页，不适合多页站点（应交给 design-loop 或 product-showcase）。生成的页面会包含待替换的占位内容，如评价、电话、logo，技能不会编造真实信息，使用者必须自行填充。最终输出为 ./index.html，附带本地预览和部署建议（Cloudflare Pages、Netlify 或 Workers），并列出所有需要替换的占位项。