关于这个模板
CozyPaws 展示了为电商品牌做首屏的一种做法，并把生成它的说明一起公开。配色控制在白色 #EFFDF0 打底、深绿色 #1A3D1A 给文字、亮橙色 #E86A10 承担强调色之内，字体用 Inter。实现用的是 React 和 Tailwind CSS；里面的每个尺寸都写了下来，这正是它可复用的原因。需求简报把动效预算花在0.8s 的过渡、cubic-bezier(0.16, 1, 0.3, 1)、一段循环视频打底上。当电商的首屏必须扛住一次文案改动、又不能重做设计时，它最有用。
适合谁
- 把首屏的结构整段借过来，再逐行对着 1460x1080 画幅换文案。
- 这个首屏回答的是想知道 70vh 高的板块、60px 间距在布局里到底管哪一块的构建者。
- 产品市场的人需要首屏在背后有4.8s 的循环视频时依然好读。
包含哪些内容
- 一条会主动让开的导航. 顶栏装下字标、四到五个链接和一个染成 #E86A10 的操作，字号压得很低，不跟页面其他地方抢。链接比字标小一档，#E86A10 操作是导航条上唯一有分量的元素。
- 尺寸写在需求简报里，不在一套比例里. 尺寸是写明的，不是继承来的：70vh 高的板块、60px 间距、0.8s 的过渡、cubic-bezier(0.16, 1, 0.3, 1) 缓动曲线。换字体或换文案，这些关系依然成立。间距和字号用同一套单位写明，两者可以直接比。
- 封面帧也算数. 1460x1080 的视频在文案后面循环播放 4.8s，静音、行内，两者之间没有任何色罩层。按 1460x1080 或更宽的尺寸导出，cover 裁切就继续成立。
- 气质由字体承担. 这里字体就是那套样式系统：Inter 撑展示字号，整个界面共用同一套字，不需要第二个强调色来帮忙。字重按角色分配，层级在搭建时就不用靠猜。
动效与交互
以毫秒计的时长
过渡在需求简报里写明为 0.8s缓动是 cubic-bezier(0.16, 1, 0.3, 1)，控件上的时长就以这个值为准。缓动和时长写在一起（0.8s），复刻时没法悄悄换成另一种手感。
有悬停态，但要克制
反馈只落在悬停态只给按钮和链接，而不是每张卡片上，这才让信息密集的首屏不显得拥挤。状态很简单，因此能直接搬进任何组件体系。这份参考在 1460x1080 下收录。
把 CozyPaws 当规格书读
这个首屏是量出来的，不是看出来的。70vh 高的板块、60px 间距来自需求简报，版式是照这些档位排的，而不是一点点挪到位的。这个首屏里没有任何一处依赖默认值。
CozyPaws 怎么安排第一次阅读的顺序
这个首屏有一条写明的阅读路径。导航先确立产品身份，并给回访者一条熟悉的路。视线从这里出发，依次经过导航、标题、公告徽标、数据行、卡片栅格，一屏内容才不会读成一张清单。电商读者先看到主张，再看到选项。这份参考在 1460x1080 下收录。
这套构图为什么适合电商
模板会用一个个模块把首屏填满，这个首屏只用导航、标题、公告徽标、数据行、卡片栅格就收住。差别体现在70vh 高的板块、60px 间距上：没有任何东西是靠撑开去填满空间的。它给电商读者的是一条通向主张的最短诚实路径。
常见问题
CozyPaws 背后那份需求简报里到底有什么？
简报是从页面上收录下来的，共 6,443 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
CozyPaws 的简报和我自己写的提示词是一回事吗？
页面上引用的内容全部出自收录的 6,443 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
能用别的技术栈重建 CozyPaws 的首屏吗？
CozyPaws 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
