落地页设计参考：产品团队自己上线的页面，和图库精选有什么不同

图库和工具方的精选主要是设计机构、工作室、文化或地产活动站点，自家发布则以 AI 产品和软件/SaaS 为主。按 AI 逐条行业分类（编辑随机抽查 30 条，一致 28 条），自家发布 64 条里有 36 条 AI 产品、17 条软件/SaaS；精选 65 条里有 24 条设计机构或工作室、14 条文化、地产或活动，AI 产品只有 10 条。

样本/方法：样本：自家产品发布 64 条、图库/工具方精选 65 条（同图 1 的分组）。行业由 AI 逐条自动分类，编辑随机抽查 30 条，一致 28 条。数字是帖子数，不代表全部落地页。

动效是图库帖子说得最多的语言。65 条精选中有 29 条在文字里强调重度滚动动效、WebGL 或 3D，自家发布 64 条里只有 7 条。这背后有一个机制需要看清楚：GSAP 的「Site of the Day」帖子会列出每个站点用的 GSAP 插件，而 GSAP 本身是动效库厂商，所以这是它对自己工具的展示，不一定是可泛化的产品页参考。

GSAP（@greensock）在 2026 年 9 月 23 日发布了每周最佳 A24，作者 Ravi Klaassens，页面是浅灰底上的 CD 叙事动效站，帖子列出了所用的 GSAP 插件。（条目：A24 Films：独立电影片库的 CD 叙事站）

Awwwards 的当日最佳 Tengile MalaMala Collection 很典型：全幅度假营地摄影、衬线展示字体，Awwwards 的帖子称之为“cinematic storytelling”（电影化叙事）。它很美，但卖的是地点，不是软件产品。

Awwwards（@awwwards）在 2026 年 10 月 3 日把当日最佳给了 DashDigital 与 @ingamana 制作的 Tengile MalaMala Collection，首屏是全幅摄影配衬线大字，属于典型的展示型网站。（条目：Tengile MalaMala：大留白衬线里的奢华保护区）

表：自家发布和图库/工具方精选对比

样本/方法：首屏、背景、字体由编辑按每条封面帧人工归类；行业与动效由 AI 按帖子文字和页面描述逐条分类（随机抽查 30 条，行业一致 28 条、动效一致 29 条），动效一项只反映发帖人是否提到，不是对页面的测量。书签为 2026-10-18 公开数据。

深色与浅色并不能把两组切开：自家发布有 41% 以深色首屏开场，图库和工具方精选是 43%，全样本 164 条里总体是 38%。

自家发布最常见的首屏是一句短标题下面是真实产品界面，64 条里有 24 条，而且制作者通常会解释为什么这么做。相比之下，图库和工具方精选只有 8% 放产品界面，个人推荐 20 条里则有 10 条放产品界面。

样本/方法：样本：landing-pages 合集全部 164 条（2026-08-27 至 2026-10-17，UTC+8），按每条视频的封面帧（首屏）由编辑人工归类；发帖类型由编辑逐条读帖判定（AI 分类对照一致 147/149）。另有 10 条无正文、5 条推广帖未计入三组。

Interfere 的首屏是一句标题“Ship software that never breaks”，下面直接是产品收件箱界面。官方博客由 Paul Faivret 和 Jakub Krehel 撰写，其中写道：“We are big fans of websites where the marketing page is the product”，并说大多数动画“give you a glimpse into how the product works”。他们还用骨架界面承载不重要部分，避免产品图显得杂乱。

Jakub Krehel（@jakubkrehel）在 2026 年 9 月 25 日分享了 Interfere 新官网的构建文章；首屏一句标题下方直接是产品收件箱界面，演示一条示例故障工单。（条目：Interfere：粉橙光晕上的工程可见性 SaaS）

Tom Alder（@tomaldertweets）自述 quicker.chat 在 24 小时内获得了 1,200 多个注册，并列出 8 条做法：用 6 个词说清它是什么，即“One inbox for all your DMs.”；展示真实产品而不是 mockup 示意图；放一个实时注册计数；页面加载时邮箱框已预选；用一封信代替功能网格；以及用 FAQ 回答那个会让人关掉页面的反对意见。

Tom Alder（@tomaldertweets）在 2026 年 9 月 29 日发布的 quicker.chat 首屏：六个词的标题、已选中的邮箱框、实时报名计数，下方是真实应用截图。注册数字为本人自述，未经核实。（条目：Quicker：米白底上的全平台 Mac 收件箱）

产品本身也可以就是你要卖的东西，并直接展示。Snew 的页面让商品图围绕一句话标题散落，滚动后归位成网格；JP（@joaopaulots）自述这是“using Codex only”完成的。

JP（@joaopaulots）在 2026 年 10 月 7 日分享的 Snew 新首屏：散落的商品图围着一句话标题，滚动后归位成网格。（条目：Snew：满屏商品抠图随滚动变大片的电商 AI 创意团队）

Pocket 在紫色背景上展示手持手机的产品照和下载二维码；X 用户 ajanwachuku.（@ajanwachuku）自述设计并搭建了该页面，帖子获得 225 个书签。

ajanwachuku.（@ajanwachuku）在 2026 年 10 月 16 日分享的 Pocket 新落地页：紫底大字、手持手机的产品照和下载二维码。（条目：Pocket：浓紫巨字与波浪黑带托着手机摄影的尼日利亚消费金融官网）

个人推荐里最常被夸的页面，不是把产品说得最清楚，而是让访客在首屏就能操作或看见产品实际运行；这一节是例子，不是统计。

Raindrop Simulate 的新落地页让访客可以直接把等距小世界里的机器人拖来拖去。ben hylak（@benhylak）自述：“you can throw the robots around on our new landing page”。

ben hylak（@benhylak）在 2026 年 9 月 18 日分享的 Raindrop Simulate 新落地页：等距小世界里的机器人可以直接拖动。（条目：Raindrop Simulate：可交互的 Agent 仿真落地页）

Karsen（@karsenswins）推荐 RankWay 时写道：“the website actually lets you experience the product instead of just explaining it”，访客可以在首页直接输入自己的网站；唯一的批评是页面太长（“the page is LONG”）。Karsen 那一周的第一名 Apptonic 则是：“As you scroll, the website visually shows you exactly what the product does”，Karsen 的结论是“Dont just explain the customer experience. Show it.”

Vidform 把输入框放在首屏中间，下方是真实输出缩略图。彩蛋则是低成本的记忆点：BoardRepo 给第一个找到彩蛋的人提供周边；Jim Raptis（@d__raptis）分享了 marclou 的 mailcheap.ai 上的彩蛋；Interfere 在首屏用户列表的加号后面藏了招聘页链接。

书签流向有故事的发布帖和强烈的个人推荐，而不是图库帖子。前十名里 6 条是自家发布、3 条是个人推荐、1 条是推广、0 条来自图库账号；它们占全部 3,533 个书签的 77%，而全部帖子的书签中位数只有 2。

表：书签数最多的 10 条落地页帖子

样本/方法：书签、点赞为 2026-10-18 抓取的公开数据（162/164 条有数据）；类型、首屏由编辑人工判定。前 10 条占全部 3,533 个书签的 77%，没有一条来自图库账号。

故事比单纯展示更有传播力。Interfere 那条高收藏帖子本身只是一个指向构建过程文章的链接；Riley Hennigh（@rileycx）解释 Moment 首页时，说轮播里放的是客户项目的真实成品，有的甚至是可交互的代码，并写道“it takes more time and effort to keep it simple”（保持简单反而更费时间和精力）。触达也很重要：Sawyer Merritt 关于 SpaceX Mid-South 网站的帖子约有 52 万次浏览，但其内容更多是新闻；Pedro Duarte 的 Raycast keyboard 帖子则致谢 @thomasauros 制作的页面。

图库方面，获得书签最高的一条图库或工具方帖子也只有 33 个书签；按账号看中位书签，Awwwards 是 19、GSAP 是 11.5、CuratedDesignHQ 是 10、One Page Love 是 2、CSS Winner 是 0.5、Orpetron 是 0。图库是有用的目录，但在 X 上他们的帖子很少被收藏。

颜色和字体没有统一规则：62% 的首屏是浅色，衬线标题只出现在 17% 的首屏，也就是 164 条里的 28 条，两组数据没有拉开差距。AI 已经进入建站流程，有 3 条自家发布帖说页面由 AI 模型构建或重设计：Snew 只用 Codex；Nic Mauro 自述 Virlo 用 Claude Opus 5.5 重设计了整个网站，并去掉了非必要 CTA；anda.ai 的 ICPanda 则发布了输入到 Claude Code 的提示词，做出 WebGL 粒子页。这些均为用户自述，未被独立验证。

制作者也警告同质化。Tom Alder 说：“AI is making every landing page FEEL the same. the human ones are what stand out now.” Interfere 官方博客则说：“Over-animation is a real thing, especially now that it's very easy to animate anything.”

以下是编辑从前面的数据和案例里归纳出的使用方式，不是经过测试的配方。

第一，按目标选参考：如果做产品页，看其他产品的自家发布；如果做品牌、工作室或活动站，再看图库。第二，先决定首屏放什么：可以放正在运行的产品，如 Interfere 和 quicker.chat；也可以放产品本身，如 Snew 和 Pocket；还可以放一个可交互演示，如 Raindrop 和 RankWay。第三，标题用几个词说清它是什么，例如“One inbox for all your DMs.”第四，用动效解释产品，并保持克制；Interfere 的首屏重度动画只在第一次访问时播放。第五，加一个有人味儿的细节：创始人的一段话、一个彩蛋，或一篇你如何做出这个页面的文章。