关于这个模板
Max Reed Portfolio 交给了创意机构或工作室一个已经做完的首屏，以及做出它的那组数字。标题是“Let's Team Up Today”，功能区其余部分都围着它排。整套配色是深青绿色 #324444 打底，页面字体是 Inter。实现用的是 React 和 Tailwind CSS；里面的每个尺寸都写了下来，这正是它可复用的原因。从收录的需求简报起步，然后改这个功能区，而不是从零重建。
适合谁
- 接手这版功能区的外包团队，需要在第一次提交之前把 640x470 画幅钉进仓库里。
- 这个功能区回答的是想知道字号从 13px 到 88px、240px 间距在布局里到底管哪一块的构建者。
- 用提示词给功能区提需求的人，会把这份 5,397 字符的提示词当作起点。
包含哪些内容
- 字和画幅共用一套档位. 尺寸是写明的，不是继承来的：字号从 13px 到 88px、240px 间距。换字体或换文案，这些关系依然成立。清单里最小和最大的两个值，划定了这套构图的取值范围。搬运页面时保留这些写明的数值。
- 中段交给面板. 栅格替你把阅读顺序排好了：每块面板分量相同、各讲一个观点，用 Inter 的小字号排，结构始终看得见。栅格里的强调色最多只标一个元素，面板之间才不会互相抢。
- 构图即内容. 功能区的排法是让文案先落地：层级由字体承担，640x470 的画幅撑住构图，其余数值保持安静。页面在 640x470 下就是一套完整构图，所以文案变了它依然立得住。画幅保留，换掉主题。
- 每个尺寸都写下来了. 尺寸是写明的，不是继承来的：字号从 13px 到 88px、240px 间距。换字体或换文案，这些关系依然成立。清单里最小和最大的两个值，划定了这套构图的取值范围。先量，再调。
动效与交互
持续的水平运动
一条跑马灯横穿构图、无限循环，用 Inter 排，所以即使没有滚动动画的地方，页面也有动感。跑马灯和界面用同一套字体，所以它读起来是内容，而不是花边。内容可读的话，悬停时让它暂停。
不挡路的动效
这一份交付的是 640x470 下的静态构图，所以层级必须不靠动效也成立，它确实成立。只有响应指针的元素会动。不需要滚动时间轴。
这个功能区背后的时序
动效压到这么小，页面就得靠字体和画幅撑。就算把循环跑马灯全部去掉，构图依然立得住。这个功能区里没有为动而动的动画。这份参考在 640x470 下收录。
这个功能区背后的数字
需求简报就是一份规格书。它写明字号从 13px 到 88px、240px 间距，并在围绕素材做任何设计之前，先定下 640x470 的素材画幅。这个功能区里没有任何一处依赖默认值。
在 Max Reed Portfolio 里先改什么
换进你自己的素材时，保住裁切和图层顺序。素材是 640x470 下的一张静帧。正是这个摆放位置让文案保持可读。该换掉的是题材。
常见问题
Max Reed Portfolio 背后那份需求简报里到底有什么？
简报是从页面上收录下来的，共 5,397 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
为什么这条条目还要标注 React 和 Tailwind CSS？
Max Reed Portfolio 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Max Reed Portfolio 里有多少东西是动的？
过渡挂在界面状态上，而不是挂在滚动时间轴上，收敛在不足一秒这个区间内。简报把这些数值记录在案，复刻时照着对齐就行，不用猜。这份参考在 640x470 下收录。
