关于这个模板
Pixel Grid Hover 是一个只靠一份书面简报搭出来的创意机构作品集，这一页记录的就是那份简报。它以“Brand Strategy & Product Design”开场，给这句话整个版心，而不是把它缩进一张卡片里。配色是白色 #EBEBEB 打底、黑色 #1A1819 给文字，字体用 DM Sans。交付就是 React 和 Tailwind CSS：一个页面，没有插件，你和设计之间不隔任何构建工具链。动作被收进0.7s 的过渡、cubic-bezier(0.22,1,0.36,1)里。对于需要在第一屏就显得刻意的创意机构或工作室作品集，它是一份合适的参考。
适合谁
- 先把 640x472 的画幅和字号从 12px 到 14px、12px 间距从这版作品集里拿走，再考虑别的。
- 用提示词给作品集提需求的人，会把这份 8,672 字符的提示词当作起点。
- 给要改写一版作品集、标题长度又得和Pixel Grid Hover一样的内容负责人用。
包含哪些内容
- 对着视口量出来的. 尺寸是写明的，不是继承来的：字号从 12px 到 14px、12px 间距、0.7s 的过渡、cubic-bezier(0.22,1,0.36,1) 缓动曲线。换字体或换文案，这些关系依然成立。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。
- 胶囊只装那一件新事. 一枚徽标只说一件事：胶囊用 DM Sans 的最小字阶待在标题上方，没有别的元素来争这个位置。这里只有一条公告，徽标因此像一条新闻。
- 用一行数据代替一句自夸. 一条紧凑的数据带承担了本来要一整段才能说清的主张，作品集因此不会变成功能清单。数字只用一种字重，这一行不会给自己的统计排名。这份参考在 640x472 下收录。
- 数值一路带进构建. 尺寸是写明的，不是继承来的：字号从 12px 到 14px、12px 间距、0.7s 的过渡、cubic-bezier(0.22,1,0.36,1) 缓动曲线。换字体或换文案，这些关系依然成立。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。需求简报没写的地方，是故意不写的。
动效与交互
板块随滚动到达
视差只在页面移动时运行，所以构图始终有一个明确的静止状态。这个效果不改变各板块的阅读顺序。这份参考在 640x472 下收录。
交互层就是这些控件
页面只在能被操作的地方给出回应：悬停态只给按钮和链接，而不是每张卡片，除此之外什么都不动。悬停态和聚焦态写在一起，指针和键盘拿到的信息因此一样。这份参考在 640x472 下收录。
这个作品集怎么重排
固定一套桌面端字阶会更省事。需求简报加了12px 到 14px 的 clamp，正是它让展示字在各个宽度之间保持比例。随视口改变的是尺度，不是顺序。
这个作品集做对了什么
如果你的首屏现在要解释三件事，这一版只解释一件。公告徽标、数据行、卡片栅格、页脚按阅读顺序依次摆开，字号从 12px 到 14px、12px 间距定下节奏。它给创意机构读者的是一条通向主张的最短诚实路径。
把 Pixel Grid Hover 当规格书读
把这个作品集拆开，这些数值依然能描述它：字号从 12px 到 14px、12px 间距，管住画幅和下面的节奏。这个作品集里没有任何一处依赖默认值。
常见问题
复制 Pixel Grid Hover 的需求简报，我能拿到什么？
简报是从页面上收录下来的，共 8,672 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
Pixel Grid Hover 有多少地方依赖 React 和 Tailwind CSS？
Pixel Grid Hover 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
Pixel Grid Hover 里有多少东西是动的？
入场和状态切换都落在 0.7s 这个区间内使用 cubic-bezier(0.22,1,0.36,1)，由状态变化触发而不是滚动库，也从不会拖住文案。
