关于这个模板
3D Collectible Hero 用一份收录下来的需求简报，解决了面向3D、游戏或娱乐品牌做首屏时的问题。整套配色是灰调绿色 #85CC92 打底、红色 #F4845F 承担强调色，页面字体是 Anton。这一条会把生成页面的技术栈（React 和 Tailwind CSS）写出来，而不是藏起来。动效是650ms 的过渡、cubic-bezier(0.4,0,0.2,1)，克制到文案依然是主角。这份参考是给这样的3D、游戏或娱乐品牌用的：希望首屏在动手构建之前就已经定下来。
适合谁
- 这个首屏要服务的，是需要让 640x470 画幅撑过三轮客户修改的代理公司。
- 这个首屏回答的是想知道固定 22px 的标题字号、100vh 高的板块在布局里到底管哪一块的构建者。
- 给正在做3D、游戏或娱乐品牌首屏、背后还没有设计系统的独立创始人用。
包含哪些内容
- 导航条上不留多余. 这一行的对比只花在一个地方：#F4845F 操作；字标和链接都退回正文色。链接比字标小一档，#F4845F 操作是导航条上唯一有分量的元素。
- 尺寸钉在需求简报里. 尺寸是对着 640x470 的渲染量出来的：固定 22px 的标题字号、100vh 高的板块、200px 间距、650ms 的过渡。每个值对应一件事：一个字号档位、一段间距、一个圆角或一次过渡。
- 越大收得越紧. 字体和它的字号是一起写明的（Anton，跨 22px），字体因此在不同的构建之间搬得动。字号越大字距收得越紧，标题行在 22px 范围内才能保持完整。
- 数字用展示字号. 统计数字是当字体来处理的：数字用展示字号，标签用需求简报里最小的字阶，颜色只走 #F4845F 或正文色，而不是找一张彩色卡片垫着。数字带 #F4845F 强调色，周围一切都留在正文色上。
动效与交互
快到像是刻意安排的
需求简报把过渡值钉在 650ms，重建时不能换成一个更慢的默认值。每一次状态变化都写明了数值，所以永远不会用到浏览器默认值。
表面带颗粒
一层颗粒压在灰调绿色 #85CC92之上，大片平涂因此读成材质，而不是纯色填充。它只是一个叠层，迁移几乎不花成本。
3D Collectible Hero 里什么在动
你完全可以给这套构图挂一个预设库，结果只会更吵，不会更好。需求简报把预算留在650ms 的过渡、悬停态与按下态、颗粒叠层上。这个首屏里没有为动而动的动画。
对3D 与游戏来说成立的地方
假设你的素材比文案更吵，这套构图就是为这种情况做的。素材是 640x470 下的一张静帧。画幅保持安静，固定 22px 的标题字号、100vh 高的板块把读者的注意力留在文字上。3D Collectible Hero 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
这个首屏怎么重排
需求简报写明了每个宽度下变什么（字阶是流体的，而不是阶梯式的、板块高度锁在 100vh），也就是说移动端是一个决定，而不是把桌面端挤小。对比度靠素材之上的 #F4845F 强调色守住，视频静音且行内播放。宽度改变的是测量值，不是阅读路径。
常见问题
3D Collectible Hero 背后的提示词到底有多长？
简报是从页面上收录下来的，共 5,347 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
3D Collectible Hero 的简报和我自己写的提示词是一回事吗？
页面上引用的内容全部出自收录的 5,347 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
重建 3D Collectible Hero 必须用 React 和 Tailwind CSS 吗？
3D Collectible Hero 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
