关于这个模板
ADHD Planner 展示了为健康或身心类产品做定价区的一种做法，并把生成它的说明一起公开。配色控制在灰调橙色 #F6E4CF 打底、深橙色 #321C04 给文字、灰调橙色 #D9C4AA 承担强调色之内，字体用 Inter。交付形式是 React 和 Tailwind CSS，收录于 1458x1080，所以画幅在任何一行代码写下去之前就已经定好。动作被收进300ms 的过渡、cubic-bezier(0.77,0,0.175,1)、一段循环视频打底里。从收录的需求简报起步，然后改这个定价区，而不是从零重建。收录的提示词记录于 1458x1080，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 1458x1080 的画幅一直到最小的间距档。
适合谁
- 正在给健康或身心类产品定价区提案的代理公司，想把字号从 42px 到 96px、25px 间距写进方案里，好让报价在启动会之后仍然站得住。
- 同时跑好几个项目的工作室负责人，会把这一版定价区当作其他页面照抄的样板。
- 这一版定价区服务的是需要一屏证据、证明健康的文案能扛住 7.3s 的循环视频的创始人。
包含哪些内容
- 导航条上不留多余. 字标、链接和 #D9C4AA 操作共用一条基线，细导航条才不会被看成随手排的。链接比字标小一档，#D9C4AA 操作是导航条上唯一有分量的元素。加第六条链接之前，先把收起状态设计好。
- 没有一样是继承来的. 版式是对着一组固定值（字号从 42px 到 96px、25px 间距、300ms 的过渡、cubic-bezier(0.77,0,0.175,1) 缓动曲线）解出来的，首屏在任何宽度下因此都保持成构图。清单里最小和最大的两个值，划定了这套构图的取值范围。
- 视频是背景，不是一块面板. 背景就是一段 1458x1080 的 7.3s 循环，按 cover 裁切、不加任何色罩。其余一切都浮在它上面的一层。自动播放不可用时，1458x1080 的封面帧撑住构图，版式不会塌。
- 强调色的纪律. 颜色是配给着用的。灰调橙色 #D9C4AA 只出现在控件和小面积高亮上，视线因此总能找到下一个操作在哪。其余一切都落在灰调橙色 #F6E4CF 上，高饱和配色才保得住可读性。
动效与交互
标题自己拼装完成
动效只集中在一种行为上（各个板块进入视口时依次揭示），页面因此不会读成一整套特效合集。每个元素只跑一次，页面开着的时候不会反复重播。抄的是到达的先后顺序，不是那条曲线。这份参考在 1458x1080 下收录。
不靠滚动库的环境动效
背景片段在 1458x1080 下以 7.3s 循环播放，静音、行内，所以读者的注意力在文案上时，页面依然在动。不需要滚动库，因为唯一的环境动效就是这段素材本身。循环按 cover 裁切，构图因此不依赖某个固定的画面尺寸。
这个定价区背后的顺序
这里没有任何东西跟第一个决定抢位置。支撑素材等在折叠线以下，页面顶部只由导航、标题、公告徽标、数据行、卡片栅格承担。健康读者先看到主张，再看到选项。这份参考在 1458x1080 下收录。
ADHD Planner 里什么在动
野心太大的动效通常会让首屏失去可读性。这份简报把300ms 的过渡、7.3s 的循环视频、滚动揭示控制得足够短，文字从来不用等它。这个定价区里没有为动而动的动画。
在 ADHD Planner 里先改什么
一行标题、一个字体、一个强调色：这三处替换对设计的改变最大。字号从 42px 到 96px、25px 间距、300ms 的过渡、cubic-bezier(0.77,0,0.175,1) 缓动曲线是那组不该动的值。别动的是画幅和字阶。
常见问题
ADHD Planner 的简报和我自己写的提示词是一回事吗？
页面上引用的内容全部出自收录的 8,810 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
复制 ADHD Planner 的需求简报，我能拿到什么？
它是构建简报，不是感觉描述：写明 1458x1080 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
ADHD Planner 有多少地方依赖 React 和 Tailwind CSS？
ADHD Planner 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
