关于这个模板
Transform Data 展示了为AI 或 SaaS 产品做首屏的一种做法，并把生成它的说明一起公开。页面自己的标题是“Transform Data Quickly”，整个构图就是围绕这串字搭的。配色是灰色 #505050 打底、白色 #F8F8F8 给文字，字体用 Inter。交付形式是单个组件，收录于 800x592，所以画幅在任何一行代码写下去之前就已经定好。动效归结起来就是250ms 的过渡。写作时让它开着：能迁移到你页面上的，是那份 3,605 字符的简报。
适合谁
- 给做SaaS项目提案、需要在第一次回复客户时就带上单个组件的代理公司用。
- 这个页面服务的是正用单个组件重建AI 或 SaaS 产品首屏、想找外观背后那组数字的前端开发者。
- 给要改写一版首屏、标题长度又得和Transform Data一样的内容负责人用。
包含哪些内容
- 导航收在一行. 导航只有一行，下面没有二级。导航条悬在 800x592 的构图上，自己没有底色，素材因此从它下面通到两边。加底色之前，先把自己的素材垫在导航条下面测一遍。
- 每个尺寸都写下来了. 需求简报里的每个尺寸都是能反测量回去的数值：16px 间距、250ms 的过渡。数值是从收录的提示词里抄下来的，不是反推的，重渲染也不会丢。搬运页面时保留这些写明的数值。
- 一套字一个职责. 展示行用 Inter 排，字号由需求简报定死，标题因此是构图元素，而不是一段文字。字体和固定字号配对使用，展示行和界面文字因此始终是一家人。
- 链接在前，操作在后. 导航只有一行，下面没有二级。导航条悬在 800x592 的构图上，自己没有底色，素材因此从它下面通到两边。把这一行控制在单行。
动效与交互
控件共用一个时长
需求简报把过渡值钉在 250ms，重建时不能换成一个更慢的默认值。值够短，重建时只要把它拖慢，一眼就能看出来。把你手上的实现对齐这些时长。
有意做成静止
这里没有滚动库：800x592 的构图保持不动，只有会回应你的元素在动。需求简报里没有动画库，复刻的工作量因此很小。
这个首屏怎么重排
桌面端构图是照着 800x592 解出来的，窄屏版式是设计出来的，不是继承来的：字阶是流体的，而不是阶梯式的。动效带减少动态效果分支，素材带首帧封面，所以自动播放不可用时页面依然能表达自己。最后才会改的是顺序。
对AI 与 SaaS来说成立的地方
代价是信息密度：这个首屏在首屏上说得比功能导向的版式更少。换来的是阅读顺序，导航、标题、公告徽标、数据行、背景片段做完了更长页面才会摊开做的事。它给SaaS读者的是一条通向主张的最短诚实路径。这份参考在 800x592 下收录。
把 Transform Data 当规格书读
这一页上的每一层关系都是可以核对的数值：16px 间距、250ms 的过渡。 Transform Data 因此是可复刻的，而不只是能被照抄一遍。这个首屏里没有任何一处依赖默认值。
常见问题
为什么这条条目还要标注单个组件？
Transform Data 是用单个组件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Transform Data 的提示词是定稿规格，还是只是一个起点？
简报是从页面上收录下来的，共 3,605 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
Transform Data 的动效是由什么驱动的？
入场和状态切换都落在 250ms 这个区间内，由状态变化触发而不是滚动库，也从不会拖住文案。
