claude-landing-composer

Claude 落地页构建器

大多数由 AI 构建的落地页一眼就能认出来：居中的主视觉区、三张功能卡片、一块渐变色，再配上泛泛的文案。本技能构建的页面不会显得像是生成出来的——采用编辑式布局、真实的设计令牌、有目的的动效，以及读起来像真人写的文案。

如果存在 claude-design-system-architect 设计系统，请基于它构建。发布前，使用 claude-design-critic 检查结果。

第 1 步 — 规划页面

• 目标与单一操作 — 页面必须促使访客采取什么行动。
• 受众 — 如果有 icp-deep-scanner，从中提取买家角色，让文案面向真实读者。
• 版块 — 选择实现目标所需的最少版块（主视觉区 → 证明 → 如何/为何 → 异议处理 → 定价 → CTA）。删掉任何不能推动访客继续行动的内容。
• 令牌 — 加载设计系统。如果没有，先生成一个（claude-design-system-architect）；不要硬编码任意颜色或尺寸。

技术栈与项目规范

Next.js（App Router）+ React + TypeScript + Tailwind v4 + Motion（曾以 Framer Motion 名称发布的库）——默认技术栈。不要用紫色。不要用 emoji——请使用 Lucide/Heroicons。欢迎使用暖色/大地色调和深色表面。动效是预期要求——打字机效果、计数器动画、弹簧/交错显示——但要适度。

第 2 步 — 逐个构建版块

使用设计令牌，将每个版块构建为真正的组件。每个版块都要有意地决定布局、内容和动效：

• 主视觉区 — 标题要鲜明（不要写“欢迎来到 {Product}”），副标题要说明实际价值，并提供一个主要 CTA。可以考虑非对称或编辑式布局，而不是默认的正中堆叠布局。
• 证明 — 标志、真实指标或具体成果，不要写“受到数千人的信赖”。
• 功能/价值 — 在实际情境中展示价值；除非确实合适，否则不要本能地使用三张相同的卡片。让不同版块的节奏和对齐方式有所变化。
• 异议处理 / FAQ — 回答潜在客户真正顾虑的问题。
• 定价（如有需要）— 清晰、自信，并与价值挂钩。
• CTA — 一个行动，再次强调。

动效： 使用滚动进入效果，但要有所变化——不要在每个区块上都用一模一样的淡入上移动画。尊重 prefers-reduced-motion。动效应引导视线关注重点，而不是给所有内容一视同仁地做装饰。

第 3 步 — 写出不带 AI 腔的文案

• 删掉那些一眼就像 AI 的表达：“提升”“解锁”“无缝”“在当今快节奏的世界里”“我们很高兴”，以及到处使用破折号、三段式排比的写法。
• 具体胜过泛泛而谈。自信胜过含糊其辞。简洁胜过冗长。
• 符合用户的语气：直接，不说官话。
• 写出真实的微文案（按钮、空状态、说明文字），不要到处都写“了解更多”。

第 4 步 — 真正构建

编写组件，接入设计令牌，确保响应式布局（移动优先，使用实际断点）和无障碍性（语义化 HTML、焦点状态、替代文本、AA 对比度）。运行开发服务器/构建，并确认编译成功后再声称功能可用。

第 5 步 — 评审（必做）

对产出运行 claude-design-critic（或 anti-ai-frontend 评审），检查设计和文案，去除所有残留的生成式痕迹。然后交付文件路径，并简要说明所做的设计选择。

发布前反 AI 生成检查清单（逐项落实）

• 不同版块采用不同布局；不是每个版块都居中堆叠。
• 留白充足且有目的，而非处处相同。
• 使用一种坚定的强调色；不要用彩虹渐变；绝不默认使用紫色。
• 标题具体、自然；不要用空洞的价值主张。
• 动效丰富且克制；尊重减少动态效果设置。
• 使用图标，不用 emoji。写真实的微文案，绝不连续 5 次使用“了解更多”。

注意事项回顾

基于真实的设计令牌构建，绝不使用任意值 · 响应式 + 无障碍 + AA 对比度 · 不用紫色/emoji · 声称完成前先编译/运行 · 始终以去 AI 化评审收尾。