关于这个模板

Mindloop Landing 交给了AI 或 SaaS 产品一个已经做完的首屏,以及做出它的那组数字。颜色只用了深蓝色 #010713 打底,正文排的是 Inter。交付形式是 React 和 Tailwind CSS,收录于 455x800,所以画幅在任何一行代码写下去之前就已经定好。当你要做面向AI 或 SaaS 产品的落地页、想要一个成品构图而不是一个起点时,就拿它当参照。收录的提示词记录于 455x800,所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值,从 455x800 的画幅一直到最小的间距档。

适合谁

  • 接手这版落地页的市场人员,会用 100px 间距检查改稿有没有保住原来的尺度。
  • 给正在做AI 或 SaaS 产品落地页、背后还没有设计系统的独立创始人用。
  • 给要改写一版落地页、标题长度又得和Mindloop Landing一样的内容负责人用。

包含哪些内容

  • 导航不带底色. 导航条压在落地页之上,而不是把它往下挤,构图因此保住首屏的完整高度。导航条悬在 455x800 的构图上,自己没有底色,素材因此从它下面通到两边。你自己的页面板块更多时,把它们归组,而不是把导航条拉宽。
  • 能逐项核对的数值. 尺寸是收录时就在需求简报里写下的(100px 间距),重建因此可以逐项核对,而不是大约像。画幅比例和尺寸记在一起,重建时连比例也一起对。
  • 卡片不描边. 栅格就是结构:面板同样大小,用 Inter 排,排得让视线横向移动,而不是向下。面板顺序就是阅读顺序,不依赖任何位置暗示。一块面板只放一个观点。
  • 链接在前,操作在后. 导航条压在落地页之上,而不是把它往下挤,构图因此保住首屏的完整高度。导航条悬在 455x800 的构图上,自己没有底色,素材因此从它下面通到两边。当你需要一条能在喧闹首屏上活下来的导航时,照这个模式抄。

动效与交互

页面回应滚动

驱动构图的是滚动位置,不是计时器:内容在下方移动时吸顶元素保持原位。只用了一种滚动行为,页面因此不会像一串互不相干的特效。这份参考在 455x800 下收录。

交互层就是这些控件

状态按组件各自处理(悬停态只给按钮和链接,而不是每张卡片、内容在下方移动时保持原位的吸顶元素),而不是交给一层全局动画。每个状态只改一个属性,反馈因此保持清楚。这份参考在 455x800 下收录。

在 Mindloop Landing 里先改什么

一行标题、一个字体、一个强调色:这三处替换对设计的改变最大。100px 间距是那组不该动的值。新文案仍按同样的展示字号排,并且在加任何东西之前先重新对一遍对比度。

这个落地页背后的顺序

把这一页的顶部和一个典型的SaaS落地页首屏放在一起比:两边都有标题和行动点,但这里的导航、标题、数据行、卡片栅格、背景片段是固定排序的,而不是用同样的权重互相抢。 SaaS读者先看到主张,再看到选项。这份参考在 455x800 下收录。

这份SaaS需求简报为什么站得住

这一页只有一个承诺,100px 间距把它固定在原处。折叠线以下的东西都不用再承担一次主张。 Mindloop Landing 只把主张说一次,然后让构图去重复它,而不是再加第二个主张。

常见问题

Mindloop Landing 的提示词是定稿规格,还是只是一个起点?

简报是从页面上收录下来的,共 7,242 个字符,覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本,发给 Studio 则会用同一份描述把请求预先填好。

Mindloop Landing 的简报和我自己写的提示词是一回事吗?

页面上引用的内容全部出自收录的 7,242 字符简报,而不是事后补写的说明。数字和文字能对得上,原因就在这里。

能用别的技术栈重建 Mindloop Landing 的落地页吗?

Mindloop Landing 是用 React 和 Tailwind CSS 构建的,条目标注只是说明出处。简报写的是位置、尺寸和时长,所以任何能设字体、能摆元素的前端框架都能重建。

在 Studio 里复刻

先拿参考,再到 Studio 里替换内容与视觉细节。