MatiSolina/gtm-skills

Landing Page GTM

构建生产级 SaaS 落地页，采用 cer0.ai 的视觉语言——深色模式、极简、渐变与颗粒背景、Framer Motion 微交互、基于 shadcn 的 UI 基础组件，以及面向转化的西班牙语（拉普拉塔河区域）或英语文案。

何时使用此技能

• 用户要求：“armame una landing”、“build a landing page”、“marketing site”、“SaaS homepage”、“página de producto”。
• 用户引用 cer0.ai、Midday、Linear、Vercel 作为设计灵感。
• 用户希望为 B2B 或 B2C SaaS 产品采用深色/极简美学。
• 用户正在使用 v0.dev，并希望获得匹配此风格的提示或组件。

技术栈（不可协商的默认项）

• Next.js 15 App Router，默认使用服务器组件。
• TypeScript，开启 strict: true。
• Tailwind CSS v4，使用 CSS 变量进行主题化（bg-background、text-foreground 等）。
• shadcn/ui 用于基础组件（button、card、accordion、dialog）。
• Framer Motion（framer-motion），通过 motion-provider 导入为 m，用于视口内动画。
• lucide-react 用于图标（产品 UI 中绝对不要使用 emoji）。
• next/image 用于所有图片，并指定明确的 width 和 height。
• next/dynamic 用于首屏以下部分（懒加载）。

强制页面结构

每个落地页必须遵循以下区块顺序。跳过某个区块需要明确说明理由。

1. <Navbar /> — 粘性定位，透明 → 滚动时模糊
2. <Hero /> — h1 + 副标题 + 2 个 CTA + 产品模拟图（右列）
3. <LogoStrip /> — 客户/媒体标志，单色（filter: brightness(0) invert(1)）
4. 产品预览 — 带有渐隐渐变底部的大幅仪表盘截图放在带边框的卡片中
5. 功能区块（3-5 个） — 左右交替排列，每个包括：标题 + 段落 + 视觉模拟图
6. <Benefits /> — 3 列网格，包含图标 + 标题 + 一行描述
7. <Pricing /> — 3 个层级，中间层突出显示并带有“Más elegido”徽章
8. <Faq /> — 手风琴组件，包含 5-7 个真实异议，以及 JSON-LD FAQPage schema
9. <Footer /> — 极简，链接 + 社交 + 法律
10. JSON-LD 块 — SoftwareApplication、Organization、FAQPage

视觉系统

加载 references/design-tokens.md 获取完整规范。快速参考：

• 调色板： --background: #000、--foreground: #fafafa、--muted-foreground: #a1a1aa、--border: rgba(250,250,250,0.08)。
• 背景： 两个 radial-gradient 模糊（左上角 + 右下角），透明度约 5%，再加上一个透明度 0.03 且 mix-blend-overlay 的噪点 PNG 覆盖层。
• 排版： 标题使用显示字体（Geist Sans 或本地 --font-display）。正文使用 Inter。标题具有 tracking-[-0.02em] 和 font-medium（不要使用 font-bold——对于这种美学来说太粗了）。
• 标题大小： h1 使用 text-[clamp(2.5rem,5vw,4.5rem)]，并设置 text-balance。在任何地方都使用 clamp 实现流体缩放。
• 边框： 始终使用 border-border/50（50% 透明度）。永远不要使用实线边框——太生硬。
• 表面： bg-secondary/20、bg-secondary/30、bg-secondary/50——始终是半透明以营造深度感。
• 按钮： 药丸形状（rounded-full），h-12，px-8。主要按钮：bg-foreground text-background。次要按钮：border border-border/50 bg-secondary/30 backdrop-blur-sm。
• 卡片： 外层 rounded-[24px]，内层 rounded-[20px]（俄罗斯套娃效果）。1px 边框。微妙的 shadow-2xl shadow-black/20。
• 模糊效果： 背景发光使用 blur-[100px] 到 blur-[120px]。模拟图上的装饰性内嵌模糊使用 blur-2xl。
• 动效： 淡入 + 10-40px 位移，duration: 0.6-1s，交错间隔 0.1-0.15s。使用 useInView({ once: true, margin: "-100px" }) 作为触发器。

文案模式

加载 references/copy-patterns.md 获取完整指南。快速规则：

• 英雄标题： 祈使句或陈述句，直击痛点（“Dejá de aceptar cheques a ciegas.”）。绝对不要使用“Welcome to X”或“X is a platform for...”。
• 英雄副标题： 1-2 句话。说明是什么 + 如何做 + 为什么重要。
• 主要 CTA： 祈使句中的动作动词。“Probar gratis”、“Empezar”、“Crear cuenta”。始终是动作，而不是名词（用“Get started”而非“Get started today!”）。
• 次要 CTA： 摩擦更低的选项，通常是信息性的。“Ver demo”、“Cómo funciona”。
• CTA 下方： 信任行。“+50.000 cheques analizados · Sin tarjeta de crédito”。使用中点 ·。
• 区块标题： 事实陈述，而非问题。“El análisis llega en 3 segundos.”而不是“How fast is it?”。
• 西班牙语语调： 如果受众是阿根廷人，使用 voseo 形式。直接，没有企业腔调。（用“Sacale una foto”，而非“Tome una fotografía”）。
• 不要使用： “Revolutionary”、“cutting-edge”、“synergy”、“leverage”、“world-class”、“best-in-class”。

构建流程

生成落地页时：

1. 最多向用户提出 3 个问题（如果上下文明显则可跳过）：
   • 产品是做什么的？（1 句话）
   • 目标受众是谁？
   • 主要的 CTA 动作是什么？
2. 首先生成 Hero。在构建其余部分之前先获得英雄区的批准。
3. 逐步构建各个区块——每次响应一个区块，用户在继续下一个之前批准文案。
4. 最后添加 JSON-LD，永远不要跳过（SEO 很重要）。
5. 验证可访问性： 所有图片都有 alt 文本，所有按钮都是真正的 <button> 或 <a> 元素，色彩对比度满足 WCAG AA 标准。

反模式（拒绝这些）

• 英雄区使用“多元化团队对着笔记本电脑微笑”的库存照片。
• 没有产品模拟图的通用渐变英雄区。
• 每个层级都显示“联系销售”（对于早期阶段的 SaaS 而言）。
• 完全隐藏价格。
• 首屏以上区域超过 3 个 CTA（导致决策瘫痪）。
• 使用轮播展示客户评价（参与度低，损害 LCP）。
• motion.div 设置 transition: { duration: 2 }——太慢了。
• 默认使用亮色模式（此技能 = 深色优先）。

参考

按需读取：

• references/sections.md — 每个区块的详细结构及代码模式
• references/design-tokens.md — 完整的颜色、排版、间距令牌
• references/copy-patterns.md — 标题公式、CTA 库、FAQ 模式
• references/seo-jsonld.md — SaaS 落地页的 schema.org 模板

模板

位于 templates/ 目录下：

• page.tsx — 包含所有区块、动态导入和 JSON-LD 的根页面
• hero.tsx — 带有右列模拟图模式的 Hero 组件
• pricing.tsx — 3 层定价卡片，中间层突出显示
• faq.tsx — 手风琴 FAQ，包含 JSON-LD
• navbar.tsx — 感知滚动的导航栏，支持背景模糊

复制模板，调整文案和属性。不要从头重写。

参考代码库

在线参考：/Users/mati/Clientes/rosental/radiant-compliance/apps/web/（cer0.ai 源代码）。 当有疑问时，完全镜像该代码库的模式。它已在生产环境中经过实战检验。