关于这个模板
Asme 交给了AI 或 SaaS 产品一个已经做完的首屏，以及做出它的那组数字。配色是黑色 #000000 打底、灰色 #C9CAB9 给文字，字体用 Instrument Serif。交付形式是 React 和 Tailwind CSS，收录于 800x582，所以画幅在任何一行代码写下去之前就已经定好。动效是500ms 的过渡，克制到文案依然是主角。写作时让它开着：能迁移到你页面上的，是那份 4,360 字符的简报。收录的提示词记录于 800x582，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 800x582 的画幅一直到最小的间距档。
适合谁
- 给要改写一版首屏、标题长度又得和Asme一样的内容负责人用。
- 正在上线AI 或 SaaS 产品首屏的创始人，需要在开发动手之前把 Instrument Serif 和整套字阶定下来。
- 先换首屏的文案，再动 Instrument Serif，因为字号是照现在的行长安的。
包含哪些内容
- 导航条上不留多余. 一条细导航压在首屏上，字标在左，链接用 Instrument Serif 排，整套构图因此先读成内容、再读成界面。导航条悬在 800x582 的构图上，自己没有底色，素材因此从它下面通到两边。这条导航只有几个元素，不用组件库也能重建。
- 字和画幅共用一套档位. 字体和间距在这里共用同一份清单：500ms 的过渡。清单里最小和最大的两个值，划定了这套构图的取值范围。搬版式的时候把数值一起搬走。
- 顶栏：字标、链接、一个操作. 一条细导航压在首屏上，字标在左，链接用 Instrument Serif 排，整套构图因此先读成内容、再读成界面。导航条悬在 800x582 的构图上，自己没有底色，素材因此从它下面通到两边。加第六条链接之前，先把收起状态设计好。
- 字重按角色写明. 这里字体就是那套样式系统：Instrument Serif 撑展示字号，整个界面共用同一套字，不需要第二个强调色来帮忙。注释档位小到能待在数字下面，又不改动页面的节奏。
动效与交互
指针只在有用的地方出现
只有控件响应指针（悬停态只给按钮和链接，而不是每张卡片），页面因此有反馈感，又没把每个元素都变成点击目标。看起来能点的控件就真的能点，不会出现假的暗示。这份参考在 800x582 下收录。
全部动画预算
一个时长覆盖所有交互（500ms），悬停和按下才读成同一套系统。写明的时长只覆盖状态变化，反馈正是这套动效里被规格管住的部分。
这个首屏怎么重排
模板会塌成单栏然后听天由命，这份需求简报写明会发生什么（字阶是流体的，而不是阶梯式的），并保住顺序不变。控件大到能点，文案在任何宽度下都保持同样的阅读顺序。这份参考在 800x582 下收录。
这个首屏做对了什么
这套设计在一屏之内就把话说完。素材是 800x582 下的一张静帧。素材负责氛围，文案负责主张，500ms 的过渡把两者分开。 Asme 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
Asme 怎么安排第一次阅读的顺序
代价是要读者有耐心：可扫读的栅格会立刻交出的细节，这一页先扣着。换来的是一个导航、标题、数据行、背景片段、页脚不会被误读的首屏。 SaaS读者先看到主张，再看到选项。这份参考在 800x582 下收录。
常见问题
复制 Asme 的需求简报，我能拿到什么？
它是构建简报，不是感觉描述：写明 800x582 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
Asme 有多少地方依赖 React 和 Tailwind CSS？
Asme 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Asme 的设计是从哪来的？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 800x582 下收录。
