关于这个模板
HAUL! 展示了为AI 或 SaaS 产品做页脚的一种做法，并把生成它的说明一起公开。它以“`. Next to the logo block, add the text”开场，给这句话整个版心，而不是把它缩进一张卡片里。整套配色是白色 #FFFFFF 打底、橙色 #BB420D 承担强调色，页面字体是 Inter。交付形式是 React 和 Tailwind CSS，收录于 1832x1354，所以画幅在任何一行代码写下去之前就已经定好。动效归结起来就是0.8s 的过渡。当你要做面向AI 或 SaaS 产品的页脚、想要一个成品构图而不是一个起点时，就拿它当参照。收录的提示词记录于 1832x1354，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 1832x1354 的画幅一直到最小的间距档。
适合谁
- 用提示词给页脚提需求的人，会把这份 4,329 字符的提示词当作起点。
- 给要改写一版页脚、标题长度又得和HAUL!一样的内容负责人用。
- 留住 Inter，围绕它重建页脚，别为你的品牌另开一套字阶。
包含哪些内容
- 能逐项核对的数值. 这份清单很短（50vh 高的板块、0.8s 的过渡），整套系统因此能靠手一个个核过去。落回这些数值的重建不用再调就长得像参考。
- 一块面板一个观点. 栅格替你把阅读顺序排好了：每块面板分量相同、各讲一个观点，用 Inter 的小字号排，结构始终看得见。每块面板内部排法一致，栅格因此能按形状扫。
- 强调色的纪律. 颜色是配给的：一个强调色（#BB420D）、一个底色（白色 #FFFFFF），没有第三个值来抢注意力。#BB420D 与白色 #FFFFFF 之间的对比，是强调色在小面积上仍然可读的原因。
- 构图即内容. 构图在 1832x1354 下就是完整的：文案、素材和控件都在需求简报里点明了。页面在 1832x1354 下就是一套完整构图，所以文案变了它依然立得住。
动效与交互
交互限制在局部
交互层是刻意做小的：悬停态只给按钮和链接，而不是每张卡片。悬停态和聚焦态写在一起，指针和键盘拿到的信息因此一样。这份参考在 1832x1354 下收录。
板块跟着滚动出现
读者往下走，背景层与前景以不同速度移动随之改变构图，而版式顺序始终不动。它绑在位置上，所以每次访问的呈现方式都一样。只留一种滚动行为，不要三种。这份参考在 1832x1354 下收录。
把这个页脚变成你自己的
先改文案，别先改颜色。把“`. Next to the logo block, add the text”重写成一句说你自己产品的话，再用 Inter 按需求简报里的字号排。别动的是画幅和字阶。
这个页脚背后的数字
认定50vh 高的板块、0.8s 的过渡，是用灵活性换可重复性。这正是这份参考的意义：同一个页面换到另一个品牌上，不用再猜一轮。这个页脚里没有任何一处依赖默认值。
这个页脚怎么重排
这里的响应式说的是尺度在变，而不是层级在变：板块高度锁在 50vh。文字始终留在折叠线以上，控件保持足够大的点击面积，减少动态效果的设置也被认真对待。直接挤小更省事，但撑不住。
常见问题
HAUL! 的提示词是定稿规格，还是只是一个起点？
它是构建简报，不是感觉描述：写明 1832x1354 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
HAUL! 有多少地方依赖 React 和 Tailwind CSS？
HAUL! 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
HAUL! 的设计是从哪来的？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 1832x1354 下收录。
