一个开发者如何做出专业级落地页
那天晚上，我盯着 Figma 的空白画布，盯了十分钟。
渡 Ferry 的产品做出来了，能跑、能扫、能整理。但用户从哪来？得有个落地页。我打开 Figma，想自己画一版——然后发现，我根本不知道从哪下手。工具栏里一堆图标，布局、间距、配色，我全凭感觉。画了两个矩形，删了。再画，又删。头晕。
我不是设计师。 以前做项目，要么用现成模板，要么有设计师出稿。这次就我一个人。产品需要一个专业级的落地页——导航、Hero、痛点、功能、定价、下载、FAQ、Footer，该有的都得有。在 AI 时代，这还是问题吗？
我关掉 Figma，打开了 Cursor。
30 分钟，从零到能看的页面
我给 AI 写了一段 Prompt，大意是：
渡 Ferry 是一款 AI 驱动的文件整理工具，目标用户是桌面混乱、想整理却不知从哪开始的职场人。帮我生成一个完整的落地页 HTML，包含：导航栏、Hero 区（一句话说清产品）、痛点卡片（四个常见烦恼）、功能展示、三步工作流程、五档定价、下载区、FAQ、Footer。要响应式，移动端适配。风格现代简洁，不要太花哨。
然后我补充了产品定位文档里的核心信息：50 个文件内免费、按次付费、支持 macOS/Windows/Linux、安装包 8MB。
大约 5 分钟后，AI 输出了完整的 HTML + CSS + JS。我复制到项目里，在浏览器打开。
能看。 真的能看。导航、Hero、痛点、功能、工作流、定价、下载、FAQ、Footer，全有了。布局合理，配色不丑，移动端也能正常显示。我粗略算了一下：从打开 Cursor 到有一个能展示的页面，大约 30 分钟。
当然，第一版只有 70 分。文案有点「AI 味」，间距在手机上略显拥挤，Hero 区的视觉冲击力不够。但——从零到 70 分，30 分钟。 如果让我自己从 Figma 画起，我估计得折腾一整天，还不一定有这个效果。
落地页的转化要素：我从中学到的
在迭代的过程中，我查了不少落地页最佳实践，也对照自己的页面做了调整。有几件事，我觉得特别重要。
Hero 区域：一句话说清产品是什么
用户打开页面，3 秒内要能回答「这是干嘛的」。渡 Ferry 的 Hero 文案最后定的是：「让 AI 帮你整理数字生活」。下面跟一句解释：智能扫描、AI 理解、一键整理。不啰嗦，不堆砌功能词。以前我差点写成「基于 GPT-4o 的语义理解、Rust 原生性能、跨平台支持……」——那是给投资人看的，不是给用户看的。
痛点共鸣：让用户看到自己
四个痛点卡片，我写的是：桌面堆满文件、想整理不知从哪开始、换电脑迁移痛苦、重复文件占硬盘。每个都配一个 emoji 和一句具体描述。这不是拍脑袋想的——是我自己的经历，也是目标用户画像里反复出现的。用户滚动到这里，会想「对，我就是这样」。共鸣先于功能。
社会认同：用数字说话
Hero 区的 mockup 里，我放了一个「已分析 456 个文件」的界面截图。虽然 456 是编的，但传达的信息是：这个工具真的能处理大量文件，而且分类结果一目了然。用户会想「别人能用，我也能」。等渡 Ferry 真有用户了，可以换成「已帮助 X 位用户整理 Y 个文件」——社会认同是转化的重要杠杆。
定价透明：免费档放最前面，高档位标折扣
五档定价卡片，免费档（≤50 文件）放在第一位。用户一眼看到「免费」，心理门槛就下来了。付费档从 ¥9.9 到 ¥39.9，高档位（1000+、5000+ 文件）标注「8折」「6折」——让用户感知「量大更划算」。每张卡片都写清楚适用场景：桌面快速整理、单个大文件夹、全盘整理。透明比便宜更重要。
CTA 清晰：每个区块都能看到「免费下载」
导航栏有「免费下载」，Hero 区有主按钮，定价区下方有说明，最后还有独立的下载区块。用户无论滚动到哪，想行动时都能找到入口。按钮文案统一用「免费下载」——强调免费，降低决策成本。
SEO 基础：让搜索引擎找到你
落地页做好了，还得让人搜得到。我做了几件基础但重要的事。
title 和 meta description
<title> 最后定的是：「渡 Ferry - AI 智能文件整理工具 | 50 个文件免费整理」。把产品名、核心价值、关键卖点都塞进去，控制在 60 字以内。meta description 写清楚产品是什么、免费档、价格区间、支持平台，155 字左右。这两个是搜索结果里用户最先看到的，不能敷衍。
structured data (JSON-LD)
在 <head> 里加了一段 JSON-LD，用 Schema.org 的 SoftwareApplication 类型。写明产品名、描述、分类、支持系统、价格区间。搜索引擎能解析这些结构化数据，在搜索结果里展示更丰富的信息——比如价格、评分。虽然渡 Ferry 刚上线不会有评分，但先把结构搭好，以后有用。
hreflang 标记
加了两行：hreflang="zh-CN" 和 hreflang="x-default"，都指向首页。目前只有中文版，但为未来的多语言版本预留了。等做英文版、日文版时，只要补充对应的 hreflang 就行。
关键词策略
核心词：AI 文件整理、文件分类、文件迁移、桌面整理。长尾词：电脑文件太乱怎么整理、桌面文件怎么整理、换电脑文件迁移。这些词自然分布在 H1、H2、痛点描述、功能说明里，不堆砌，读起来顺畅就行。
迭代改进：从 70 分到 90 分
第一版 AI 生成的页面，我打 70 分。能用，但不够好。几轮修改后，大概到了 90 分。
文案语气：AI 的初版有点「说明书」感，太正式。我改成了更口语化的表达。比如「你是否也有这样的烦恼？」比「常见问题」更有温度。「从混乱到有序，一键完成」比「支持一键执行整理操作」更直接。
移动端间距：手机上，卡片之间的间距显得挤，手指点按钮容易误触。我调大了 padding，把 CTA 按钮做得更醒目。在小屏上测试了几次，直到滚动和点击都舒服。
mockup 交互效果：Hero 区的产品 mockup 最初是静态的。我加了一点简单的 CSS 动画——分类结果的进度条有轻微的填充动画，让页面更有「活」的感觉。不花哨，但比纯静态多了点质感。
FAQ 可折叠：FAQ 有 7 个问题，全展开会很长。我加了手风琴式的折叠交互，点击问题展开答案，再点收起。移动端体验好很多。
这些改动都不大，但累积起来，页面的「完成度」明显提升了。AI 负责从 0 到 70，人负责从 70 到 90。
一人团队的设计哲学：足够好，先上线
做渡 Ferry 的这段时间，我反复提醒自己一件事：不追求完美，追求「足够好」。
落地页可以无限优化。配色可以再调、动效可以再加、A/B 测试可以跑无数轮。但我是一个人，时间有限。第一版落地页 70 分的时候，我就上线了。边跑边改，根据真实用户的反馈迭代，比闭门造车追求 100 分更实际。
「足够好」的标准是什么？我的判断是：用户打开页面，能在 30 秒内理解产品是什么、能解决什么问题、怎么下载。能做到这三件事，就可以上线了。剩下的，交给数据和反馈。
渡 Ferry 的落地页现在挂在 ferry.app 上。它不是最漂亮的，但它是我的。从 Figma 头晕到有一个能展示、能转化、能被搜索引擎找到的页面，我用了大约一周——其中 30 分钟是 AI 生成，其余是迭代和打磨。在 AI 时代，一个人做出专业级落地页，真的可以。
本篇 Takeaway
- AI 能快速产出落地页骨架：给 AI 产品定位、目标用户、页面结构要求，30 分钟内可得到完整的 HTML + CSS + JS，包含导航、Hero、痛点、功能、工作流、定价、下载、FAQ、Footer，响应式设计。从零到 70 分，很快。
- 转化要素要抓牢：Hero 一句话说清产品；痛点卡片引发共鸣；社会认同用数字展示；定价透明，免费档前置，高档位标折扣；CTA 清晰，多入口露出「免费下载」。
- SEO 基础不能省：title 和 meta description 认真写；JSON-LD 结构化数据帮助搜索引擎理解；hreflang 为多语言预留；关键词自然分布在标题和正文中。
- 迭代提升完成度：AI 第一版约 70 分，通过调整文案语气、优化移动端间距、增加 mockup 交互、FAQ 折叠等，可提升到 90 分。AI 负责 0→70，人负责 70→90。
- 一人团队追求「足够好」：不追求完美，先上线再优化。用户能理解产品、知道怎么下载，就可以发布。边跑边改，比闭门造车更实际。
系列导航
系列：AI 时代，我如何一人从想法到产品赚到第一个 10 万
