Landings.dev 落地页案例库｜按技术栈与配色筛灵感翻译站点

Landings.dev 是一个落地页案例库，把各家公司的产品首页按截图收进来，供设计师与市场人员找参考。用法很直接：先按技术栈或配色筛，再点开看整页结构与文案节奏。

按条件筛案例

顶部有两组筛选：Stacks 按前端技术栈分，React、Next.js、Webflow、WordPress、Tailwind CSS、Framer 各有入口；Colors 按主色调分，黑、白、蓝、紫、黄、绿各成一类。做工具类产品站想看同行首屏怎么写，选技术栈加配色，范围很快就收窄。

一页里看什么

• 首屏结构：标题、副标题、行动按钮的位置与字数配比。
• 社会证明：客户标识、数据指标、用户评价摆在什么位置。
• 版式节奏：图文交替、卡片网格、长滚动分段的取舍。
• 配色与字体：主色占多大面积，强调色落在哪个按钮上。

顺带的小工具

站内还挂着几个前端小工具：SVG 转 JSX、十六进制与 HSL 互转、CMYK 与十六进制互转、取色器。做设计还原时，把颜色值在这几种格式间换来换去，不必另开软件。博客栏目偶尔聊落地页的写法，篇幅不长，适合通勤时翻两篇。筛选结果可以按最新或热度排列，赶时间就看最近上新的那批。

怎么积累参考

看到一个喜欢的版式，先截屏存进自己的参考夹，再记一句它解决的是什么问题，比如价格页怎么排、注册表单放在第几屏、客户标识用灰度还是彩色。攒到十几条之后，再动手时就不必从空白画布开始，跟客户沟通也有具体的图可指。

适合谁用

独立开发者做新产品首页，先看二十个同类案例再动手；设计师接需求时用它快速对齐客户想要的风格；市场人员写首屏文案，可以参照别人的信息层级，把卖点排在前面。带新人的时候，挑三个案例讲一遍取舍，比空谈原则有效。

使用须知与局限

案例以截图形式收录，页面上的动效与交互细节看不到，想研究实现方式还得打开原站。收录偏英文站点，中文产品的案例较少，本土化表达仍要自己琢磨。截图有时滞后于对方改版。参考版式可以，文案与视觉资产不要直接照搬，避免侵权与同质化。