关于这个模板
Personal Showcase 交给了创意机构或工作室一个已经做完的首屏，以及做出它的那组数字。颜色只用了深蓝色 #050E13 打底、白色 #EFEEE9 给文字，正文排的是 Inter。交付就是 React 和 Tailwind CSS：一个页面，没有插件，你和设计之间不隔任何构建工具链。动效只限于300ms 的过渡、cubic-bezier(0.76, 0, 0.24, 1)、一段循环视频打底。当这个作品集需要在新增任何板块之前先定下顺序时，就拿它来用。
适合谁
- 在交接说明里写上 1462x1080 画幅，下一次构建就不必再从页面里倒推。
- 这个作品集回答的是想知道 16vh 高的板块、28px 间距在布局里到底管哪一块的构建者。
- 产品市场的人需要作品集在背后有12.9s 的循环视频时依然好读。
包含哪些内容
- 顶栏：字标、链接、一个操作. 字标占住左边缘，链接从它右边排开，全部用 Inter 排，所以这条导航条属于下面的页面，而不是另一套系统。导航条悬在 1462x1080 的构图上，自己没有底色，素材因此从它下面通到两边。这条导航只有几个元素，不用组件库也能重建。
- 需求简报点了名. 版式是对着一组固定值（16vh 高的板块、28px 间距、300ms 的过渡、cubic-bezier(0.76, 0, 0.24, 1) 缓动曲线）解出来的，首屏在任何宽度下因此都保持成构图。数值是从收录的提示词里抄下来的，不是反推的，重渲染也不会丢。看着没道理的那些值，照留。
- 导航条落在页面栅格上. 字标占住左边缘，链接从它右边排开，全部用 Inter 排，所以这条导航条属于下面的页面，而不是另一套系统。导航条悬在 1462x1080 的构图上，自己没有底色，素材因此从它下面通到两边。你自己的页面板块更多时，把它们归组，而不是把导航条拉宽。
- 素材上不加色罩. 一段静音循环视频按 1462x1080、12.9s 铺满画幅，以 cover 裁切，文案叠在它上面。需求简报不允许在视频上压叠加层，所以画面不会被压灰。按 1462x1080 或更宽的尺寸导出，cover 裁切就继续成立。
动效与交互
以毫秒计的时长
状态变化的时长写明为 300ms，所以控件上的反馈是一个设计过的值，不是浏览器默认值。聚焦态和悬停态用同一个时长，键盘和指针的反馈因此一致。反馈的时间要卡准。
环境动效交给循环
环境动感来自 1462x1080 的 12.9s 循环，而不是滚动特效，页面因此保持平静，文字也更好读。因为是静音的，循环可以在文案下面跑，不抢声音，也不抢注意力。
这个作品集背后的顺序
在这里，顺序就是设计。导航、数据行、页脚的摆放让主张先于证据落地，16vh 高的板块、28px 间距定下两者之间的距离。创意机构读者先看到主张，再看到选项。
把这个作品集变成你自己的
主题给你的是一堆组件，这份需求简报给你的是一套构图：16vh 高的板块、28px 间距、300ms 的过渡、cubic-bezier(0.76, 0, 0.24, 1) 缓动曲线和一个素材画幅，题材留给你自己。换一个品牌，整套画幅都能接着用。
这个作品集怎么重排
窄屏版式是设计出来的，不是继承来的。每个宽度下板块高度锁在 16vh、导航收进移动端菜单、动效带减少动态效果分支，层级因此扛得住重排。窄屏版式是一个决定，而不是把宽屏挤小，层级在窄屏上依然成立。
常见问题
Personal Showcase 背后的提示词到底有多长？
简报是从页面上收录下来的，共 6,948 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
拿到 Personal Showcase 的简报之后，我能用它做什么？
页面上引用的内容全部出自收录的 6,948 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
为什么这条条目还要标注 React 和 Tailwind CSS？
Personal Showcase 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
