关于这个模板
Dot 是面向生活方式品牌的一份可用参考：这套首屏已经排好、量好，可以直接照着复刻。配色是白色 #DEF0FC 打底、黑色 #1A1A1A 给文字、亮蓝色 #0871E7 承担强调色，字体用 Instrument Serif。交付形式是 React 和 Tailwind CSS，收录于 800x588，所以画幅在任何一行代码写下去之前就已经定好。这个页面的动效控制在100ms 的过渡。把它当作面向生活方式品牌做首屏的需求简报：它要经得起复刻，而不只是第一眼好看。下面引用的每一项都是那份简报里的数值，从 800x588 的画幅一直到最小的间距档。收录的提示词记录于 800x588，所以这一页引用的每个数值都能追回到它。
适合谁
- 先从字号从 14px 到 72px、14px 间距开始，让配色跟着走，因为这版首屏靠的就是间距。
- 用提示词给首屏提需求的人，会把这份 3,871 字符的提示词当作起点。
- 给要改写一版首屏、标题长度又得和Dot一样的内容负责人用。
包含哪些内容
- 一条会主动让开的导航. 这一行的对比只花在一个地方：#0871E7 操作；字标和链接都退回正文色。链接比字标小一档，#0871E7 操作是导航条上唯一有分量的元素。把这一行控制在单行。
- 每个尺寸都写下来了. 尺寸是收录时就在需求简报里写下的（字号从 14px 到 72px、14px 间距、100ms 的过渡），重建因此可以逐项核对，而不是大约像。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。
- 先文案，后装饰. 整套构图装在一屏里，以 React 和 Tailwind CSS 交付，文案、素材和控件都在需求简报里点明了。页面在 800x588 下就是一套完整构图，所以文案变了它依然立得住。
- 证据放在折叠线之上. 数字是按文字排的，不是装进卡片的：Instrument Serif 的展示字号，标签低一档。数字带 #0871E7 强调色，周围一切都留在正文色上。在最窄的宽度下核一遍这一行。
动效与交互
快到像是刻意安排的
规格里每一次状态变化都带着时长：100ms没有一处留给浏览器默认值，所以页面读起来是被设计过的，而不是被加了动画。数值足够短，读起来是反馈，而不是动画。
交互区域刻意做小
状态按组件各自处理（悬停态只给按钮和链接，而不是每张卡片），而不是交给一层全局动画。反馈只限在控件上，所以控件周围的构图保持静止。悬停时不要给版式加动画。这份参考在 800x588 下收录。
这个首屏背后的数字
复刻走样时，最先崩的是间距。 Dot 把字号从 14px 到 72px、14px 间距、100ms 的过渡和构图一起公开，就是为了避开这一点。这个首屏里没有任何一处依赖默认值。
这个首屏做对了什么
一个现成的首屏和这个首屏用的是同一批零件。区别在于这里按导航、标题、公告徽标、数据行、背景片段排序、用字号从 14px 到 72px、14px 间距、100ms 的过渡去量，所以这一屏读起来是一条序列，而不是一个容器。 Dot 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
Dot 里什么在动
把这里的动效和一个滚动驱动的页面比：两者都在动，这一版只在需求简报说的位置动（100ms 的过渡、悬停态与按下态），所以文案始终在前面。这个首屏里没有为动而动的动画。
常见问题
复制 Dot 的需求简报，我能拿到什么？
它是构建简报，不是感觉描述：写明 800x588 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
为什么这条条目还要标注 React 和 Tailwind CSS？
Dot 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Dot 能用在客户项目里吗？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 800x588 下收录。
