关于这个模板
这是 Animated Cards 的功能区，连同生成它的那份需求简报一起发布，而不是只给一张截图。配色控制在黑色 #000000 打底、亮橙色 #FF9500 承担强调色之内，字体用 JetBrains Mono。交付形式是 React 和 Tailwind CSS，收录于 640x464，所以画幅在任何一行代码写下去之前就已经定好。对于需要在第一屏就显得刻意的金融科技产品功能区，它是一份合适的参考。下面引用的每一项都是那份简报里的数值，从 640x464 的画幅一直到最小的间距档。收录的提示词记录于 640x464，所以这一页引用的每个数值都能追回到它。
适合谁
- 正在给金融科技产品功能区提案的代理公司，想把固定 12px 的标题字号、16px 间距写进方案里，好让报价在启动会之后仍然站得住。
- 给要改写一版功能区、标题长度又得和Animated Cards一样的内容负责人用。
- 用提示词给功能区提需求的人，会把这份 36,212 字符的提示词当作起点。
包含哪些内容
- 需求简报点了名. 版式里没有一样交给感觉：需求简报写明了固定 12px 的标题字号、16px 间距，构建必须落回这些值。清单短到审核的人能一个元素一个元素地核。
- 强调色的纪律. 强调色的职责在需求简报里就定死了：亮橙色 #FF9500 给操作，黑色 #000000 给画幅。#FF9500 与黑色 #000000 之间的对比，是强调色在小面积上仍然可读的原因。
- 内容切成面板. 栅格就是结构：面板同样大小，用 JetBrains Mono 排，排得让视线横向移动，而不是向下。面板之间的间距是一个值，再密的栅格也不会显得挤。
- 量出来的，不是估的. 版式里没有一样交给感觉：需求简报写明了固定 12px 的标题字号、16px 间距，构建必须落回这些值。清单短到审核的人能一个元素一个元素地核。拿同一组数值验证重建结果。
动效与交互
交互只落在控件上
页面只在能被操作的地方给出回应：按需翻页浏览内容的滑块组件，除此之外什么都不动。交互状态不会推动版式，指针底下不会有东西跳。如果一个状态不能确认某个操作，就删掉。这份参考在 640x464 下收录。
正中一块实时画布
一个 3D 变换给页面提供纵深，周围的版式保持扁平，所以只有这块渲染在争取注意力。它是渲染而不是静帧，所以视觉焦点在任何尺寸下都站得住。画布起不来时，要有兜底画面。这份参考在 640x464 下收录。
这个功能区背后的数字
这一页里的数字比看上去多。复刻必须保住的是固定 12px 的标题字号、16px 间距，其余的都可以动。这个功能区里没有任何一处依赖默认值。
这个功能区做对了什么
在素材上压一层色调本来是最省事的办法，需求简报偏偏不用。素材是 640x464 下的一张静帧。文案依然站得住，因为固定 12px 的标题字号、16px 间距让画幅保持安静。 Animated Cards 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。
Animated Cards 怎么安排第一次阅读的顺序
注意力是被引导的，而不是散开的：视线先落在主标题那一行，然后是支撑文案，最后是行动。需要社会证明时，它是一条长条或一行，而不是一整面客户评价墙。这个顺序就是设计本身。金融科技读者先看到主张，再看到选项。这份参考在 640x464 下收录。
常见问题
Animated Cards 背后的提示词到底有多长？
简报是从页面上收录下来的，共 36,212 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
能用别的技术栈重建 Animated Cards 的功能区吗？
Animated Cards 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Animated Cards 能用在客户项目里吗？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 640x464 下收录。
