关于这个模板
ClarionAI 是面向AI 或 SaaS 产品的落地页参考，它背后的需求简报是一份完整的构建规格书，而不是情绪板。页面自己的标题是“The intelligence layer \n for clear decisions”，整个构图就是围绕这串字搭的。配色是黑色 #000000 打底。交付形式是 React 和 Tailwind CSS，所以整个落地页可以直接搬进项目，不需要设计交接。这个页面的动效控制在1000ms 的过渡、一段循环视频打底。如果你要给别人提一版SaaS落地页的需求，就从这个构图起步，把题材换掉。收录的提示词记录于 1952x1440，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 1952x1440 的画幅一直到最小的间距档。
适合谁
- 接手这版落地页的市场人员，会用固定 16px 的标题字号、20px 间距检查改稿有没有保住原来的尺度。
- 同时跑好几个项目的工作室负责人，会把这一版落地页当作其他页面照抄的样板。
- 产品市场的人需要落地页在背后有18.4s 的循环视频时依然好读。
包含哪些内容
- 导航条落在页面栅格上. 导航条就是一行文字加一个操作，尺寸按固定 16px 的标题字号、20px 间距定，所以它读起来是一条细带，而不是一整条色块。导航条悬在 1952x1440 的构图上，自己没有底色，素材因此从它下面通到两边。字标占的位置不超过它那行字需要的宽度。
- 量出来的，不是估的. 字体和间距在这里共用同一份清单：固定 16px 的标题字号、20px 间距、1000ms 的过渡。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。
- 视频是背景，不是一块面板. 片段在 1952x1440 下循环 18.4s，接缝看不出来，所以它读起来是肌理，而不是一条片子。按 1952x1440 或更宽的尺寸导出，cover 裁切就继续成立。
- 折叠线之上的徽标. 徽标是唯一被允许放在标题之上的元素，正因如此它读起来是公告，而不是界面装饰。它的位置让标题继续占住构图的正中。消息过期就把它删掉。这份参考在 1952x1440 下收录。
动效与交互
节奏交给跑马灯
一条滚动带以恒定速度穿过版式，循环无缝，这就是需求简报需要的全部环境动效。长条匀速前进，循环无缝，动效因此不会把注意力引到接缝上。这份参考在 1952x1440 下收录。
以毫秒计的时长
动画预算小而明确：1000ms只用在状态变化上，不用在入场动画上。没有任何东西在等滚动位置，所以一碰页面就有反应。
这个落地页背后的时序
把这里的动效和一个滚动驱动的页面比：两者都在动，这一版只在需求简报说的位置动（1000ms 的过渡、18.4s 的循环视频、悬停态与按下态），所以文案始终在前面。这个落地页里没有为动而动的动画。
这个落地页怎么重排
固定一套桌面端字阶会更省事。需求简报加了16px 到 20px 的 clamp，正是它让展示字在各个宽度之间保持比例。直接挤小更省事，但撑不住。
把这个落地页变成你自己的
模板要求你接受它的版式，这份参考要求你保住版式、把里面的东西全换掉。区别在于：题材在动，固定 16px 的标题字号、20px 间距、1000ms 的过渡不动。你的强调色要过和参考强调色同样的对比度测试。
常见问题
ClarionAI 的提示词是定稿规格，还是只是一个起点？
简报是从页面上收录下来的，共 6,807 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
ClarionAI 的简报和我自己写的提示词是一回事吗？
页面上引用的内容全部出自收录的 6,807 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
为什么这条条目还要标注 React 和 Tailwind CSS？
ClarionAI 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
