关于这个模板
Beauty Categories 展示了为电商品牌做功能区的一种做法，并把生成它的说明一起公开。配色是白色 #EBEBEB 打底、深橙色 #251E18 给文字、橙色 #593C2D 承担强调色。交付形式是 React 和 Tailwind CSS，收录于 640x470，所以画幅在任何一行代码写下去之前就已经定好。需求简报把动效预算花在150ms 的过渡上。写作时让它开着：能迁移到你页面上的，是那份 4,038 字符的简报。
适合谁
- 给正在做电商品牌功能区、背后还没有设计系统的独立创始人用。
- 给要改写一版功能区、标题长度又得和Beauty Categories一样的内容负责人用。
- 如果这份参考只是个起点，设计师可以留着橙色 #593C2D强调色，把功能区其余部分重建。
包含哪些内容
- 对着视口量出来的. 尺寸是对着 640x470 的渲染量出来的：20px 间距、150ms 的过渡。数值是从收录的提示词里抄下来的，不是反推的，重渲染也不会丢。
- 饱和度只花在一处. 强调色承担页面上所有操作：橙色 #593C2D 给按钮和链接，白色 #EBEBEB 垫在它们背后。其余一切都落在白色 #EBEBEB 上，高饱和配色才保得住可读性。
- 用一行数据代替一句自夸. 这一行放在功能区的高处，当证据用，而不是当装饰。数字带 #593C2D 强调色，周围一切都留在正文色上。
- 要面板，不要段落. 本该放一整段文案的地方，这一页放了一组面板，功能区因此扫得完。面板之间靠间距分开，而不是靠边框，栅格因此保持安静。这份参考在 640x470 下收录。
动效与交互
载入时页面自己搭起来
滚动触发揭示是页面上唯一的入场，需要维护的动态只有这一套。每个元素只跑一次，页面开着的时候不会反复重播。这份参考在 640x470 下收录。
时长写进了需求简报
过渡在需求简报里写明为 150ms，控件上的时长就以这个值为准。每一次状态变化都写明了数值，所以永远不会用到浏览器默认值。
把这个功能区变成你自己的
主题给你的是一堆组件，这份需求简报给你的是一套构图：20px 间距、150ms 的过渡和一个素材画幅，题材留给你自己。在碰颜色之前，先重写那行展示字。
这套构图为什么适合电商
假设你的素材比文案更吵，这套构图就是为这种情况做的。素材是 640x470 下的一张静帧。画幅保持安静，20px 间距、150ms 的过渡把读者的注意力留在文字上。 Beauty Categories 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
这个功能区背后的顺序
功能导向的版式在罗列产品能做什么，这一版把读者带向一个决定。这条路径看得见：就在数据行、卡片栅格、背景片段里，也在20px 间距、150ms 的过渡给它们的间距里。电商读者先看到主张，再看到选项。
常见问题
复制 Beauty Categories 的需求简报，我能拿到什么？
简报是从页面上收录下来的，共 4,038 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么这条条目还要标注 React 和 Tailwind CSS？
Beauty Categories 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Beauty Categories 里有多少东西是动的？
动效和版式写得一样细：状态切换落在 150ms 区间内。先复刻构图、再对时长，因为版式立住之后时长更好对。
