关于这个模板
Prosthetics Hero 用一份收录下来的需求简报，解决了面向健康或身心类产品做首屏时的问题。整页都建立在白色 #FDFCFC 打底之上。交付就是 React 和 Tailwind CSS：一个页面，没有插件，你和设计之间不隔任何构建工具链。动效只限于200ms 的过渡。这份参考是给这样的健康或身心类产品用的：希望首屏在动手构建之前就已经定下来。
适合谁
- 如果你把需求交给模型而不是设计师，就从首屏开始，让提示词兜住 640x464 画幅。
- 这个首屏回答的是想知道字号从 12px 到 14px、13px 间距在布局里到底管哪一块的构建者。
- 用提示词给首屏提需求的人，会把这份 3,421 字符的提示词当作起点。
包含哪些内容
- 顶栏：字标、链接、一个操作. 导航条就是一行文字加一个操作，尺寸按字号从 12px 到 14px、13px 间距定，所以它读起来是一条细带，而不是一整条色块。导航条悬在 640x464 的构图上，自己没有底色，素材因此从它下面通到两边。
- 每个尺寸都写下来了. 尺寸是收录时就在需求简报里写下的（字号从 12px 到 14px、13px 间距、200ms 的过渡），重建因此可以逐项核对，而不是大约像。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。
- 折叠线之上的徽标. 一条公告由标题上方的一枚胶囊承担，没有别的元素来抢这个位置。胶囊用的是需求简报里最小的字阶，所以它读起来是标签，而不是第二个标题。这份参考在 640x464 下收录。
- 先文案，后装饰. 构图在 640x464 下就是完整的：文案、素材和控件都在需求简报里点明了。页面在 640x464 下就是一套完整构图，所以文案变了它依然立得住。
动效与交互
反馈只出现在控件上
状态按组件各自处理（悬停态只给按钮和链接，而不是每张卡片），而不是交给一层全局动画。状态在需求简报里就写明了，页面不依赖任何悬停特效库。这份参考在 640x464 下收录。
控件共用一个时长
控件里的动效短且可重复：每次状态变化都是 200ms。值够短，重建时只要把它拖慢，一眼就能看出来。
把 Prosthetics Hero 当规格书读
这一页上的每一层关系都是可以核对的数值：字号从 12px 到 14px、13px 间距、200ms 的过渡。 Prosthetics Hero 因此是可复刻的，而不只是能被照抄一遍。这个首屏里没有任何一处依赖默认值。
这套构图为什么适合健康
在素材上压一层色调本来是最省事的办法，需求简报偏偏不用。素材是 640x464 下的一张静帧。文案依然站得住，因为字号从 12px 到 14px、13px 间距让画幅保持安静。 Prosthetics Hero 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
Prosthetics Hero 怎么安排第一次阅读的顺序
认定一条阅读路径，就意味着别的路径被关掉了。需求简报接受这一点，把导航、标题、公告徽标、背景片段固定在原处，并把字号从 12px 到 14px、13px 间距花在让这条路径显眼上。健康读者先看到主张，再看到选项。
常见问题
Prosthetics Hero 背后的提示词到底有多长？
它是构建简报，不是感觉描述：写明 640x464 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
能用别的技术栈重建 Prosthetics Hero 的首屏吗？
Prosthetics Hero 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Prosthetics Hero 的动效是由什么驱动的？
入场和状态切换都落在 200ms 这个区间内，由状态变化触发而不是滚动库，也从不会拖住文案。
