关于这个模板
在动手为电商品牌重建落地页之前，先读 Coffee Rewards：构图和它背后的规格书都在这里。它以“Plum Parfait Latte”开场，给这句话整个版心，而不是把它缩进一张卡片里。整套配色是深橙色 #070402 打底、#EDE4D8 给文字，页面字体是 Helvetica Now Display。这份参考用 Vite 构建，但版式上的决定都独立于它写清楚了。动效只限于0.7s 的过渡、cubic-bezier(0.16, 1, 0.3, 1)、一段循环视频打底。如果你要给别人提一版电商落地页的需求，就从这个构图起步，把题材换掉。收录的提示词记录于 1482x1080，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 1482x1080 的画幅一直到最小的间距档。
适合谁
- 这一版落地页服务的是需要一屏证据、证明电商的文案能扛住 5.9s 的循环视频的创始人。
- 用提示词给落地页提需求的人，会把这份 5,054 字符的提示词当作起点。
- 给要改写一版落地页、标题长度又得和Coffee Rewards一样的内容负责人用。
包含哪些内容
- 间距档位是写明的. 需求简报把数值点了名：16px 间距、0.7s 的过渡、cubic-bezier(0.16, 1, 0.3, 1) 缓动曲线。构图之所以撑得住，正是因为字体和画幅之间没有凭空发明的间距档位。间距和字号用同一套单位写明，两者可以直接比。
- 素材垫在文字后面. 片段在 1482x1080 下循环 5.9s，接缝看不出来，所以它读起来是肌理，而不是一条片子。循环短到 5.9s，眼睛会把它读成肌理，而不是一条时间轴。
- 靠展示字号说话. 字体定在 Helvetica Now Display 上，需求简报给这套字分配了明确的职责，而不是为了花样去混搭。字重、字距和字号档位全部写明，换字体也不会丢掉层级。换字体是可行的，但比例必须扛得住这次替换。
- 需求简报点了名. 需求简报把数值点了名：16px 间距、0.7s 的过渡、cubic-bezier(0.16, 1, 0.3, 1) 缓动曲线。构图之所以撑得住，正是因为字体和画幅之间没有凭空发明的间距档位。间距和字号用同一套单位写明，两者可以直接比。换字体、换文案可以，别换字阶。
动效与交互
环境动效交给循环
环境动感是一段 1482x1080 下的 5.9s 片段，在文案后面安静循环，不响应指针。片段静音且行内播放，所以第一帧不需要任何交互就能看到。
时长以需求简报为准
一个时长覆盖所有交互（0.7s缓动是 cubic-bezier(0.16, 1, 0.3, 1)），悬停和按下才读成同一套系统。缓动和时长写在一起（0.7s），复刻时没法悄悄换成另一种手感。一种行为配一个时长。
电商品牌能从这里得到什么
5,054 个字符的需求简报，产出的是一屏没有填充内容的首屏。里面的数值都是明写的（16px 间距、0.7s 的过渡），所以换了文案，构图照样读得通。 Coffee Rewards 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
Coffee Rewards 里什么在动
动画预算写得很清楚：0.7s 的过渡、5.9s 的循环视频、实时画布。这个落地页里没有任何东西在动却没有对应的数值。这个落地页里没有为动而动的动画。
把 Coffee Rewards 当规格书读
需求简报是规格书，不是情绪板。它钉住了16px 间距、0.7s 的过渡、cubic-bezier(0.16, 1, 0.3, 1) 缓动曲线，也写明了素材的规格：1482x1080循环 5.9s这类细节让设计经得起复刻：换掉文案，各种关系依然成立。这个落地页里没有任何一处依赖默认值。
常见问题
复制 Coffee Rewards 的需求简报，我能拿到什么？
它是构建简报，不是感觉描述：写明 1482x1080 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
能用别的技术栈重建 Coffee Rewards 的落地页吗？
不需要。需求简报是规格说明，不是依赖清单。它当初是按 Vite 写的，但同一套构图用你手头现有的工具都能重建。标注技术栈只是让你知道这份参考是怎么做出来的。
在客户项目里该怎么处理 Coffee Rewards 的素材？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 1482x1080 下收录。
