关于这个模板
Playful Idea 用一份收录下来的需求简报，解决了面向创意机构或工作室做页脚时的问题。颜色只用了 #F0EEFA 打底、近黑 #080909 给文字，正文排的是 Epilogue。交付形式是一个自包含的 HTML 文件，收录于 1564x1080，所以画幅在任何一行代码写下去之前就已经定好。动作被收进2.54167s 的过渡、一段循环视频打底里。对于需要在第一屏就显得刻意的创意机构或工作室页脚，它是一份合适的参考。收录的提示词记录于 1564x1080，所以这一页引用的每个数值都能追回到它。下面引用的每一项都是那份简报里的数值，从 1564x1080 的画幅一直到最小的间距档。
适合谁
- 正在做创意机构或工作室页脚、需要在报价发出去之前把一个自包含的 HTML 文件落到纸面上的团队。
- 这个页脚面向的是已经熟悉一个自包含的 HTML 文件、只差把 700px 断点写下来的团队。
- 正在复刻竞品创意机构页脚的团队，想在有人选定框架之前先把一个自包含的 HTML 文件点明。
包含哪些内容
- 顶栏只放一个操作. 导航条就是一行文字加一个操作，尺寸按字号从 14px 到 17px、100vh 高的板块定，所以它读起来是一条细带，而不是一整条色块。标签短到能在 700px 下一行放下，当前项用字重标出，而不是加一个胶囊底。
- 一个素材元素承担整体情绪. 片段在 1564x1080 下循环 6.9s，接缝看不出来，所以它读起来是肌理，而不是一条片子。按 1564x1080 或更宽的尺寸导出，cover 裁切就继续成立。
- 折叠线之上的徽标. 一枚徽标只说一件事：胶囊用 Epilogue 的最小字阶待在标题上方，没有别的元素来争这个位置。胶囊用的是需求简报里最小的字阶，所以它读起来是标签，而不是第二个标题。
- 尺寸钉在需求简报里. 需求简报里的每个尺寸都是能反测量回去的数值：字号从 14px 到 17px、100vh 高的板块、2 栏栅格、100px 圆角。数值是从收录的提示词里抄下来的，不是反推的，重渲染也不会丢。搬运页面时保留这些写明的数值。
动效与交互
附了一条更安静的分支
动效层自带开关：在 prefers-reduced-motion 下入场动画和循环视频会被去掉。关掉动效后布局完全一样，所以没有东西依赖动画。这份参考在 1564x1080 下收录。
要场景，不要静帧
一块 WebGL 画布是页面上唯一的看点，周围的界面刻意排得不跟它抢。渲染自带颜色，所以它周围的配色保持安静。这份参考在 1564x1080 下收录。
把 Playful Idea 当规格书读
复刻走样时，最先崩的是间距。 Playful Idea 把字号从 14px 到 17px、100vh 高的板块、2 栏栅格、100px 圆角和构图一起公开，就是为了避开这一点。这个页脚里没有任何一处依赖默认值。
在 Playful Idea 里先改什么
先换内容，再回头检查画幅。字号从 14px 到 17px、100vh 高的板块、2 栏栅格、100px 圆角就是换文案时要护住的那几个值。保住素材的裁切；它和字体承担的工作一样多。
Playful Idea 怎么安排第一次阅读的顺序
在这里，顺序就是设计。导航、标题、公告徽标、数据行、背景片段的摆放让主张先于证据落地，字号从 14px 到 17px、100vh 高的板块定下两者之间的距离。创意机构读者先看到主张，再看到选项。
常见问题
Playful Idea 有多少地方依赖一个自包含的 HTML 文件？
Playful Idea 是用一个自包含的 HTML 文件构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
为什么 Playful Idea 的提示词没有直接印在这里？
页面上引用的内容全部出自收录的 30,665 字符简报，而不是事后补写的说明。数字和文字能对得上，原因就在这里。
Playful Idea 的提示词是定稿规格，还是只是一个起点？
它是构建简报，不是感觉描述：写明 1564x1080 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
