关于这个模板
Stories in Light 是一个只靠一份书面简报搭出来的创意机构首屏，这一页记录的就是那份简报。配色是深蓝色 #2B3342 打底、白色 #FFFFFF 给文字，字体用 Archivo。交付形式是单个组件，收录于 2502x1730，所以画幅在任何一行代码写下去之前就已经定好。动效预算就是0.4s 的过渡、一段循环视频打底。写作时让它开着：能迁移到你页面上的，是那份 4,462 字符的简报。下面引用的每一项都是那份简报里的数值，从 2502x1730 的画幅一直到最小的间距档。收录的提示词记录于 2502x1730，所以这一页引用的每个数值都能追回到它。
适合谁
- 给必须在不做原型的前提下向客户解释 560px 表现的工作室用。
- 正在复刻竞品创意机构首屏的团队，想在有人选定框架之前先把单个组件点明。
- 这个页面服务的是正用单个组件重建创意机构或工作室首屏、想找外观背后那组数字的前端开发者。
包含哪些内容
- 顶栏：字标、链接、一个操作. 字标占住左边缘，链接从它右边排开，全部用 Archivo 排，所以这条导航条属于下面的页面，而不是另一套系统。标签短到能在 560px 下一行放下，当前项用字重标出，而不是加一个胶囊底。
- 一个素材元素承担整体情绪. 2502x1730 的视频在文案后面循环播放 13.3s，静音、行内，两者之间没有任何色罩层。循环短到 13.3s，眼睛会把它读成肌理，而不是一条时间轴。
- 该流体的时候就流体. 需求简报给标题用的是 55px 到 40px 的 clamp，长句子才不会在尴尬的位置折行。视口变窄时，字体的角色不变，只是尺寸变。
- 导航收在一行. 字标占住左边缘，链接从它右边排开，全部用 Archivo 排，所以这条导航条属于下面的页面，而不是另一套系统。标签短到能在 560px 下一行放下，当前项用字重标出，而不是加一个胶囊底。一条导航只放一个操作。
动效与交互
控件共用一个时长
规格里每一次状态变化都带着时长：0.4s没有一处留给浏览器默认值，所以页面读起来是被设计过的，而不是被加了动画。缓动和时长写在一起（0.4s），复刻时没法悄悄换成另一种手感。
交互只落在控件上
交互层是刻意做小的：悬停态只给按钮和链接，而不是每张卡片。状态很简单，因此能直接搬进任何组件体系。悬停时不要给版式加动画。这份参考在 2502x1730 下收录。
在 Stories in Light 里先改什么
要把这个首屏变成自己的，不必重建。换掉标题和素材，保住字阶（固定 15px 的标题字号、100vh 高的板块），版式读起来还是原来设计的样子。新加的元素如果不能帮助说清产品主张或下一步动作，就该挪到折叠线以下。
Stories in Light 里什么在动
你完全可以给这套构图挂一个预设库，结果只会更吵，不会更好。需求简报把预算留在0.4s 的过渡、13.3s 的循环视频、悬停态与按下态上。这个首屏里没有为动而动的动画。
Stories in Light 怎么安排第一次阅读的顺序
这个首屏有一条写明的阅读路径。导航先确立产品身份，并给回访者一条熟悉的路。视线从这里出发，依次经过导航、标题、公告徽标、数据行，一屏内容才不会读成一张清单。创意机构读者先看到主张，再看到选项。这份参考在 2502x1730 下收录。
常见问题
重建 Stories in Light 必须用单个组件吗？
Stories in Light 是用单个组件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Stories in Light 的提示词是定稿规格，还是只是一个起点？
它是构建简报，不是感觉描述：写明 2502x1730 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
Stories in Light 能用在客户项目里吗？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 2502x1730 下收录。
