landing

用途：依据文本提示或简要说明，生成一个视觉精致、带动画、可直接交付的单文件 HTML 落地页。与面向转化/获客、输出 Next.js TSX 组件的 landing-page-generator 不同，本技能专注高级视觉体验，输出一个自包含 .html。\n\n主要能力：先进行强制式需求采集（最多 4 个按依赖排序的问题——产品或服务与电梯陈述、受众类型、品牌颜色覆盖、语气）。随后从电梯陈述中提取主标题（8–12 词）、副标题、3–6 条特性要点、CTA 文案与结尾文案。默认品牌系统为深海军蓝＋青色＋Inter 字体，支持通过 :root 覆盖主色、强调色、背景色与文字色；仅给主色时按算法派生出强调色等。页面包含 Hero（全屏、滚动指示）、Features（3 列网格，900px 转 2 列，580px 转 1 列）、Closing CTA 三个区块。动画包含 GSAP 入场时间线、ScrollTrigger 特性卡揭示、鼠标视差分层，以及 CSS 关键帧实现的浮动装饰与滚动指示。\n\n使用方式：在 Claude Code CLI 中按指定路径写入磁盘文件；在 Claude.ai 网页端生成同名 HTML artifact。输出路径默认 ./landing-pages/，文件名为产品名的小写 kebab-case，可调用 scripts/kebab_slug_generator.py 生成 slug 并检测重名。生成后运行 scripts/html_validator.py --file <路径> 做结构校验。必需 CDN 依赖仅有 Inter 字体、gsap.min.js 与 ScrollTrigger.min.js 两个脚本。\n\n限制与注意：除 Google Fonts 与 GSAP CDN 外不允许任何外部 CSS/JS 文件，所有自定义样式与脚本须内联；必须先用 gsap.set() 设定初始状态以防 FOUC；默认网格特性不超过 6 条；不使用硬编码绝对路径。资料未提供收费、价格与更多平台细节。