关于这个模板
Arceage Stats 收录于 640x470，保留的是一份规格书，而不是一张画廊图片。页面自己的标题是“Maximize Your Yield”，整个构图就是围绕这串字搭的。配色控制在黑色 #101010 打底之内，字体用 Instrument Serif。这一条会把生成页面的技术栈（React 和 Tailwind CSS）写出来，而不是藏起来。当AI 与 SaaS的功能区必须扛住一次文案改动、又不能重做设计时，它最有用。
适合谁
- 如果动效必须砍掉，这版功能区照样读得通，靠固定 56px 的标题字号、120px 间距撑起层级。
- 用提示词给功能区提需求的人，会把这份 7,826 字符的提示词当作起点。
- 给要改写一版功能区、标题长度又得和Arceage Stats一样的内容负责人用。
包含哪些内容
- 每个尺寸都写下来了. 版式是对着一组固定值（固定 56px 的标题字号、120px 间距）解出来的，首屏在任何宽度下因此都保持成构图。间距和字号用同一套单位写明，两者可以直接比。
- 数字用展示字号. 数字是按文字排的，不是装进卡片的：Instrument Serif 的展示字号，标签低一档。标签在数字下方，用需求简报里最小的字阶，这一行因此读成数据而不是装饰。别给数字加框。
- 一屏之内的结构. 功能区的排法是让文案先落地：层级由字体承担，640x470 的画幅撑住构图，其余数值保持安静。页面在 640x470 下就是一套完整构图，所以文案变了它依然立得住。
- 用一行数据代替一句自夸. 数字是按文字排的，不是装进卡片的：Instrument Serif 的展示字号，标签低一档。标签在数字下方，用需求简报里最小的字阶，这一行因此读成数据而不是装饰。宁可删一个数字，也别缩标签字号。
动效与交互
文字分片到达
入场动效只花在一个元素上（打字机式地逐字打出引言行），这才让信息量大的首屏不显得拥挤。动画只在加载时跑一次，不跟着滚动重播，所以你读的时候页面不会反复表演。这份参考在 640x470 下收录。
几乎没有动效
需求简报里没有动画，页面靠 640x470 的版式撑住，唯一的变化是悬停态和按下态。动效被当作反馈，而不是装饰。静止是一个成立的选择。
Arceage Stats 里什么在动
短小的动效预算让你在第一帧上失去戏剧性。换来的是可读性，也意味着打字机式逐字写入不用任何动画库就能移植。这个功能区里没有为动而动的动画。这份参考在 640x470 下收录。
把这个功能区变成你自己的
假设你只有一个下午。换掉标题和行动按钮的标签，别动固定 56px 的标题字号、120px 间距，你也能得到一个看起来是刻意做过的页面。在碰颜色之前，先重写那行展示字。
这个功能区背后的顺序
SaaS读者落到一屏内容上时，是先扫再读的。这套版式回应了这一点：标题、数据行、背景片段的尺寸就是为扫读定的，固定 56px 的标题字号、120px 间距让每一站彼此分明。 SaaS读者先看到主张，再看到选项。
常见问题
Arceage Stats 背后那份需求简报里到底有什么？
简报是从页面上收录下来的，共 7,826 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么这条条目还要标注 React 和 Tailwind CSS？
Arceage Stats 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Arceage Stats 的动效是由什么驱动的？
入场和状态切换都落在不足一秒这个区间内，由状态变化触发而不是滚动库，也从不会拖住文案。这份参考在 640x470 下收录。
