关于这个模板
Audio Showcase 是一个只靠一份书面简报搭出来的生活方式首屏，这一页记录的就是那份简报。“Press 04. Vernal woods” 就是整套版式要承载的那一行。整套配色是蓝色 #216CD1 打底、灰色 #C7D5D5 给文字，页面字体是 Helvetica, Arial。交付就是 React 和 Tailwind CSS：一个页面，没有插件，你和设计之间不隔任何构建工具链。动效归结起来就是0.7s 的过渡、cubic-bezier(0.22, 1, 0.36, 1)。如果你要给别人提一版生活方式首屏的需求，就从这个构图起步，把题材换掉。
适合谁
- 正在写构建需求、想拿 640x474 画幅作为讨论依据的工作室团队。
- 用提示词给首屏提需求的人，会把这份 6,927 字符的提示词当作起点。
- 给要改写一版首屏、标题长度又得和Audio Showcase一样的内容负责人用。
包含哪些内容
- 导航是刻意做细的. 导航条压在首屏之上，而不是把它往下挤，构图因此保住首屏的完整高度。导航条悬在 640x474 的构图上，自己没有底色，素材因此从它下面通到两边。
- 对着视口量出来的. 字体和间距在这里共用同一份清单：20px 间距、0.7s 的过渡、cubic-bezier(0.22, 1, 0.36, 1) 缓动曲线。写明的值之间没有凭空插入的中间值，这份测量清单就是整套系统。
- 证据就一行. 数字是按文字排的，不是装进卡片的：Helvetica, Arial 的展示字号，标签低一档。数字和界面共用同一套字体，所以它们属于这个页面，而不是打断它。
- 顶栏只放一个操作. 导航条压在首屏之上，而不是把它往下挤，构图因此保住首屏的完整高度。导航条悬在 640x474 的构图上，自己没有底色，素材因此从它下面通到两边。链接控制在四到五个，这一行的尺寸就是照这个定的。
动效与交互
快到像是刻意安排的
控件在 0.7s 内完成变化，快到手指刚碰上去页面就回应，而不是等一下才动。缓动和时长写在一起（0.7s），复刻时没法悄悄换成另一种手感。
是渲染出来的，不是画出来的
做视觉的是那块实时画布：一块 WebGL 画布。周围的界面保持扁平，纵深因此全部由渲染承担。这份参考在 640x474 下收录。
这个首屏做对了什么
大多数生活方式页面在首屏不够有力时选择再加一个板块。这一版反过来做减法：导航、标题、公告徽标、数据行、卡片栅格，就按这个顺序，没有任何重复主张的东西。 Audio Showcase 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。这份参考在 640x474 下收录。
Audio Showcase 怎么安排第一次阅读的顺序
这类页面通常把行动按钮埋在一整片功能栅格下面。这一版把导航、标题、公告徽标、数据行、卡片栅格放成固定序列，行动点留在首屏里，而不是滚过三屏之后才出现。生活方式读者先看到主张，再看到选项。这份参考在 640x474 下收录。
这个首屏怎么重排
把这个首屏先在 640x474 下测，再在手机宽度下测：顺序一样成立，只是导航收进移动端菜单、动效带减少动态效果分支。控件大到能点，文案在任何宽度下都保持同样的阅读顺序。
常见问题
Audio Showcase 的提示词是定稿规格，还是只是一个起点？
简报是从页面上收录下来的，共 6,927 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
Audio Showcase 有多少地方依赖 React 和 Tailwind CSS？
Audio Showcase 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Audio Showcase 的动效是由什么驱动的？
过渡挂在界面状态上，而不是挂在滚动时间轴上，收敛在 0.7s 这个区间内缓动是 cubic-bezier(0.22, 1, 0.36, 1)。简报把这些数值记录在案，复刻时照着对齐就行，不用猜。
