Mind-Body Healing 健康落地页设计｜版式拆解与提示词

关于这个模板

Mind-Body Healing 留住了自己的决策链：生成这个落地页的需求简报有 5,232 个字符。“Holistic wellness. Transformative results” 就是整套版式要承载的那一行。配色控制在灰调靛蓝色 #D1C4E9 打底、洋红色 #AD4A80 承担强调色之内，字体用 Inter。交付就是 React 和 Tailwind CSS：一个页面，没有插件，你和设计之间不隔任何构建工具链。动作被收进500ms 的过渡、一段循环视频打底里。把它当作面向健康或身心类产品做落地页的需求简报：它要经得起复刻，而不只是第一眼好看。

适合谁

在用 AI 建站工具的人，希望简报里已经写好了 1468x1080 画幅，而不是交给模型自己发挥。
这一版落地页服务的是需要一屏证据、证明健康的文案能扛住 6.8s 的循环视频的创始人。
给正在做健康或身心类产品落地页、背后还没有设计系统的独立创始人用。

包含哪些内容

导航不带底色. 链接在同一行、同一个字号上排开，#AD4A80 操作收在行尾右侧，视线正好在导航结束的地方停下。链接比字标小一档，#AD4A80 操作是导航条上唯一有分量的元素。加底色之前，先把自己的素材垫在导航条下面测一遍。
字和画幅共用一套档位. 这些值就是规格本身：100vh 高的板块、500ms 的过渡，是在 1468x1080 下收录的，而不是从截图里反推的。每个值都能对着收录的提示词核一遍，重建因此是可验证的，而不是大约像。
字号断得很干脆. 由 Inter 一个字体挑大梁：从标题到支撑句字号断得很干脆，字号越大字距收得越紧，层级因此由字体承担，而不是靠颜色。字号档位是固定值，换字体时层级才能原样保住。
没有一样是继承来的. 这些值就是规格本身：100vh 高的板块、500ms 的过渡，是在 1468x1080 下收录的，而不是从截图里反推的。每个值都能对着收录的提示词核一遍，重建因此是可验证的，而不是大约像。搬版式的时候把数值一起搬走。

动效与交互

不靠滚动库的环境动效

背景片段在 1468x1080 下以 6.8s 循环播放，静音、行内，所以读者的注意力在文案上时，页面依然在动。不需要滚动库，因为唯一的环境动效就是这段素材本身。片段静音且行内播放，所以第一帧不需要任何交互就能看到。拍摄或导出按 1468x1080 或更宽的尺寸。

时长以需求简报为准

控件里的动效短且可重复：每次状态变化都是 500ms。时长够短，页面才像是被设计过的；换成一个慢的默认值，整套构图就散了。

这个落地页怎么重排

设计过的窄屏版式比直接挤小要多做不少决定。需求简报把这些决定付掉了：板块高度锁在 100vh、导航收进移动端菜单，是写明的，而不是构建时才发现。宽度改变的是测量值，不是阅读路径。

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

它对健康或身心类产品有效，是因为它从不要求读者自己去拼信息。“Holistic wellness. Transformative results”从第一帧起就在做这件事。版式、字体和颜色都已经定好（灰调靛蓝色 #D1C4E9 和洋红色 #AD4A80，用 Inter），所以第一屏读起来是一个完整的论点，而不是一堆零件。 Mind-Body Healing 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。