关于这个模板
这是 Digital Director 的作品集，连同生成它的那份需求简报一起发布，而不是只给一张截图。它以“Adam Roberts - Design & Engineering”开场，给这句话整个版心，而不是把它缩进一张卡片里。配色是黑色 #000000 打底、白色 #FFFFFF 给文字，字体用 Inter。交付形式是 React 和 Tailwind CSS，所以整个作品集可以直接搬进项目，不需要设计交接。动效只限于400ms 的过渡、cubic-bezier(0.16,1,0.3,1)、一段循环视频打底。从收录的需求简报起步，然后改这个作品集，而不是从零重建。需求简报钉住的一切（画幅、字号、时长、断点）下面都写出来了，所以你可以照着复刻这个作品集，不用猜它背后的意图。
适合谁
- 正在写构建需求、想拿 1472x1080 画幅作为讨论依据的工作室团队。
- 自己写作品集文案的产品团队，需要每一行都守住展示级字号当初按长度定下的上限。
- 给需要把作品集的范围收进一个迭代、并且不新增任何素材的产品经理用。
包含哪些内容
- 一条会主动让开的导航. 导航只有一行，下面没有二级。到了平板断点以下，改由移动端浮层接管。导航条悬在 1472x1080 的构图上，自己没有底色，素材因此从它下面通到两边。
- 尺寸钉在需求简报里. 字体和间距在这里共用同一份清单：10px 间距、400ms 的过渡、cubic-bezier(0.16,1,0.3,1) 缓动曲线。落回这些数值的重建不用再调就长得像参考。
- 一套字，克制着用. 展示行用 Inter 排，字号由需求简报定死，标题因此是构图元素，而不是一段文字。数字和界面共用同一套字，统计数据与标签因此属于同一套系统。就算换字体，也保留这些字号档位。
- 顶栏只放一个操作. 导航只有一行，下面没有二级。到了平板断点以下，改由移动端浮层接管。导航条悬在 1472x1080 的构图上，自己没有底色，素材因此从它下面通到两边。加第六条链接之前，先把收起状态设计好。
动效与交互
短而互相匹配的时长
这里的动效用毫秒计量：400ms缓动是 cubic-bezier(0.16,1,0.3,1)这就是全部的动画预算，而且花在状态变化上，不在滚动时间轴上。每一次状态变化都写明了数值，所以永远不会用到浏览器默认值。
不靠滚动库的环境动效
环境动感来自 1472x1080 的 7s 循环，而不是滚动特效，页面因此保持平静，文字也更好读。片段静音且行内播放，所以第一帧不需要任何交互就能看到。
Digital Director 怎么安排第一次阅读的顺序
营销页面会把证据堆在折叠线以下然后听天由命，这个作品集把导航、标题、数据行、功能列表、背景片段直接推到读者面前，其余的先按住不发。创意机构读者先看到主张，再看到选项。这份参考在 1472x1080 下收录。
在 Digital Director 里先改什么
先改文案，别先改颜色。把“Adam Roberts - Design & Engineering”重写成一句说你自己产品的话，再用 Inter 按需求简报里的字号排。该换掉的是题材。
这个作品集怎么重排
和把板块藏起来的移动端版式比，这一版把板块留住、只改它们的形状：导航收进移动端菜单。窄屏版式是一个决定，而不是把宽屏挤小，层级在窄屏上依然成立。这份参考在 1472x1080 下收录。
常见问题
为什么 Digital Director 的提示词没有直接印在这里？
页面上引用的内容全部出自收录的 8,947 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
Digital Director 背后那份需求简报里到底有什么？
它是构建简报，不是感觉描述：写明 1472x1080 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
为什么这条条目还要标注 React 和 Tailwind CSS？
Digital Director 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
