SaaS 产品落地页
设计 SaaS 产品落地页，区块顺序如下：1. hero，包含标题、副标题、CTA 按钮和产品截图；2. 客户 logo 区；3. 带图标的三列功能网格；4. 大型产品演示区，包含截图与功能标注；5. 三档定价表；6. 带用户照片和引语的评价轮播；7. FAQ accordion；8. 结尾 CTA。整体采用现代、简洁的视觉语言和充足留白。落地页设计提示词
落地页是专为将访客转化为用户或客户而设计的单一目的页面。有效的落地页遵循经过验证的结构：引人注目的 Hero 区块配合清晰的价值主张、社会证明、功能亮点和有力的行动号召。视觉设计应引导视线沿页面向下移动，同时保持一致的品牌感。
v0 创业公司落地页
使用 shadcn/ui 创建现代创业产品落地页。hero 包含大标题、渐变强调文字、说明文字、primary 与 secondary 两个 CTA，以及浏览器 mockup。下方依次放置动画数据计数区、带 Lucide 图标的三列功能卡、由头像和引语卡组成的用户评价区，以及包含 newsletter 订阅的深色 footer。使用 Inter、平滑滚动和紫色到蓝色的渐变强调。Cursor 落地页
使用 Next.js、Tailwind CSS 和 Framer Motion 构建落地页。页面包含带 logo 与 CTA 的 sticky navbar、具有动画渐变背景和浮动 UI mockup 的全视口 hero、灰度客户 logo 区、图文左右交替的功能区、突出推荐方案的定价卡、FAQ accordion 和 footer。使用 Framer Motion 的 useInView 实现平滑的滚动进入动画。Claude 落地页
生成完整的 React 落地页组件。响应式 hero 包含标题、说明段落和 primary CTA，标题在桌面端为 48px、移动端为 32px。功能区使用 2x3 卡片网格，每张卡包含图标、标题和说明；社会证明区包含公司 logo 与数据栏，例如 '10K+ users'；用户评价卡显示星级；结尾 CTA 使用高对比背景。所有区块统一使用 max-w-6xl 居中和 py-24 间距，样式使用 Tailwind CSS。移动应用候补名单页
为移动应用设计候补名单落地页。hero 占满一个视口高度，标题使用 56px/1.1 和可变字重 sans（Inter 或 Geist），副标题使用 18px #52525b；唯一 CTA 是高度 56px 的邮件收集表单，input 与 button 组合在同一个 pill 中。右侧展示轻微旋转 -6deg 的手机 mockup，并添加柔和的 #a78bfa glow。背景为 #fafafa，文字为 #18181b，强调色为紫色 #7c3aed。首屏下方放置三步 'How it works' 流程和实时注册人数。表单必须有可见 label、autocomplete=email，以及相对背景达到 3:1 对比度的 2px focus ring。v0 开发者工具落地页
使用 shadcn/ui 为 CLI 开发工具创建落地页。深色 hero 背景使用 #0a0a0a，标题用 60px Geist，并让其中一个单词使用 #22d3ee 渐变强调；安装命令块使用 14px JetBrains Mono、#171717 背景和复制按钮，复制成功后显示 'Copied' toast。下方包含 npm/pnpm/yarn tab 代码演示、使用 20px Lucide 图标的三列功能网格、terminal 风格用户评价区和 GitHub star 数量 badge。区块使用 py-24，内容宽度为 max-w-5xl。正文 #a1a1aa 必须达到至少 4.5:1 对比度，复制按钮设置 aria-label。Cursor 电子书引流页
使用 Next.js 构建免费电子书下载落地页。双列 hero 左侧包含 13px uppercase、tracking-wide、#b45309 的 eyebrow label，48px Fraunces 或 Playfair Display 衬线标题，5 条带 check 图标的内容要点，以及姓名与邮件纵向排列的表单，input 高 48px；右侧展示带 #fbbf24 背光的 3D 书封 mockup。背景使用奶油色 #fffbeb，文字使用 #292524，琥珀强调色为 #d97706。增加包含 3 条引语的用户评价区，以及带 96px 圆形照片的作者介绍。邮件校验错误使用 #b91c1c 文字并配合图标，所有字段保留可见 label，不能只用 placeholder。Claude 服务机构落地页
生成 React 设计机构落地页组件。hero 使用 clamp(48px, 8vw, 96px) 的超大 grotesque 标题，letter-spacing 为 -0.03em；加入客户名称 marquee。服务列表使用高 72px 的全宽行和完整的 1px #e4e4e7 边框，hover 时展开显示说明。案例网格使用 4:3 图片卡，hover zoom 为 scale 1.03、400ms ease-out。footer CTA 文案为 'Start a project'，字号 40px。色板仅使用白色 #ffffff、近黑 #111111 和用于 hover 与选中状态的 chartreuse #bef264。prefers-reduced-motion 生效时停用 marquee 和 hover zoom。常见问题
落地页的最佳结构是什么？
经过验证的结构为：Hero（标题 + CTA）> 社会证明（Logo/数据）> 功能亮点（3-6 项）> 使用流程（3 步）> 用户评价 > 定价 > FAQ > 最终 CTA。每个区块应有一个明确目的，引导访客走向转化。
如何设计落地页的 Hero 区块？
高转化的 Hero 需要：清晰的利益驱动标题（6-12 个词）、解释方法的副标题、醒目的对比色 CTA 按钮、以及视觉元素（截图、插图或视频）。保持 Hero 在首屏可见，文字仅保留必要信息。
哪些 AI 工具能生成落地页？
Vercel 的 v0 擅长生成基于 shadcn/ui 的完整落地页。Cursor 和 Claude 能生成包含动画和响应式设计的完整页面代码。UI Library 提供风格一致的 design tokens 和提示词，兼容所有这些工具，确保生成的页面看起来专业而非千篇一律。
如何提高落地页的转化率？
关键转化策略：每个区块使用单一、清晰的 CTA；在 CTA 附近添加社会证明；将表单字段减到最少；使用方向线索（箭头、照片中的视线）指向 CTA；确保页面 3 秒内加载完成；A/B 测试标题和按钮文案。移动端优化至关重要，因为大部分流量来自手机。
落地页应该做多长？
页面长度要匹配用户的决策成本。免费注册或候补名单类，短页面（Hero + 3 个功能点 + CTA，约 1-2 屏）转化最好，因为用户付出的成本很小。对约 50 美元/月以上的付费产品，6-8 个区块的长页面表现更好，因为访客需要打消疑虑：加入用户评价、对比表格、安全认证徽章和 FAQ。实用原则：每增加一个区块都必须回应一个真实的顾虑，而不是重复卖点。追踪滚动深度——如果 80% 的访客到不了某个区块，就删掉它或往上移。
落地页应该使用多大的字号？
一套可靠的字号体系：Hero 标题 clamp(36px, 6vw, 64px)，行高 1.1，字距 -0.02em；区块标题 30-36px；卡片标题 18-20px；正文 16-18px，行高 1.6；说明文字和眉标 13-14px。移动端正文永远不要低于 16px——既影响可读性，iOS 还会对小于 16px 的表单输入自动缩放。用 max-w-prose 或 max-w-2xl 把行长控制在 60-75 字符。层级靠字重（标题 600-700、正文 400）而不是堆更多字号；两个字重加五个字号就能覆盖整个页面。