关于这个模板
这是 Cognitra Feature 的功能区，连同生成它的那份需求简报一起发布，而不是只给一张截图。页面自己的标题是“We provide all-in-one AI automation services in one place”，整个构图就是围绕这串字搭的。颜色只用了灰调橙色 #877A73 打底、灰色 #D2CDC5 给文字，正文排的是 Helvetica, Arial。实现用的是 React 和 Tailwind CSS；里面的每个尺寸都写了下来，这正是它可复用的原因。动效只限于0.08s 的过渡。当你要做面向AI 或 SaaS 产品的功能区、想要一个成品构图而不是一个起点时，就拿它当参照。
适合谁
- 这个功能区要服务的，是需要让 640x470 画幅撑过三轮客户修改的代理公司。
- 给必须在不做原型的前提下向客户解释 260px 表现的工作室用。
- 用提示词给功能区提需求的人，会把这份 3,241 字符的提示词当作起点。
包含哪些内容
- 链接在前，操作在后. 导航只有一行，下面没有二级。在 260px 以下，链接收进一个全屏浮层。标签短到能在 260px 下一行放下，当前项用字重标出，而不是加一个胶囊底。一条导航只放一个操作。
- 字阶就是样式系统. 字体和它的字号是一起写明的（Helvetica, Arial，跨 14px），字体因此在不同的构建之间搬得动。字号越大字距收得越紧，标题行在 14px 范围内才能保持完整。没有职责的字号不要加。
- 每种宽度都有明确行为. 字号用 26px 到 32px 的 clamp 来处理，而不是写死档位，标题行在各个断点之间因此保持比例，不会跳变。因为字阶是钳制过的，标题行在断点之间从来不会跳变。
- 一屏之内的结构. 折叠线以上的每样东西都得挣到自己的位置。需求简报点明了文案、640x470 画幅和字号，没有留下任何装饰物跟它们抢。页面在 640x470 下就是一套完整构图，所以文案变了它依然立得住。需求简报就是规格。
动效与交互
以毫秒计的时长
一个时长覆盖所有交互（0.08s），悬停和按下才读成同一套系统。缓动和时长写在一起（0.08s），复刻时没法悄悄换成另一种手感。
几乎没有动效
需求简报里没有动画，页面靠 640x470 的版式撑住，唯一的变化是悬停态和按下态。构图保持不动，所以页面得靠层级撑住，而它撑住了。
这个功能区在论证什么
你完全可以把这页重建成一摞分开的卡片，丢掉的只是那个论点。这个功能区读起来是一个决定：导航、数据行、背景片段串成一条序列。它给SaaS读者的是一条通向主张的最短诚实路径。这份参考在 640x470 下收录。
这个功能区背后的数字
这份参考之所以能反复使用，原因就在这里：固定 14px 的标题字号、100vh 高的板块、32px 间距、0.08s 的过渡、260px 断点。页面里没有任何一处交给默认值，所以替换之后只要保住这些数字，整套构图就跟着保住了。这个功能区里没有任何一处依赖默认值。
在 Cognitra Feature 里先改什么
要把这个功能区变成自己的，不必重建。换掉标题和素材，保住字阶（固定 14px 的标题字号、100vh 高的板块），版式读起来还是原来设计的样子。该换掉的是题材。
常见问题
Cognitra Feature 背后那份需求简报里到底有什么？
简报是从页面上收录下来的，共 3,241 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么这条条目还要标注 React 和 Tailwind CSS？
Cognitra Feature 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Cognitra Feature 里 0.08s 的过渡是怎么动的？
过渡挂在界面状态上，而不是挂在滚动时间轴上，收敛在 0.08s 这个区间内。简报把这些数值记录在案，复刻时照着对齐就行，不用猜。
