关于这个模板
Modern Agency 收录于 364x640，保留的是一份规格书，而不是一张画廊图片。“We craft digital experiences for brands ready to dominate their category online” 就是整套版式要承载的那一行。配色是白色 #FFFFFF 打底、亮橙色 #F26522 承担强调色。交付形式是 React 和 Tailwind CSS，收录于 364x640，所以画幅在任何一行代码写下去之前就已经定好。动效是cubic-bezier(0.25,0.1,0.25,1)，克制到文案依然是主角。当这个落地页需要在新增任何板块之前先定下顺序时，就拿它来用。下面引用的每一项都是那份简报里的数值，从 364x640 的画幅一直到最小的间距档。
适合谁
- 给正在做创意机构或工作室落地页、背后还没有设计系统的独立创始人用。
- 用提示词给落地页提需求的人，会把这份 10,347 字符的提示词当作起点。
- 给要改写一版落地页、标题长度又得和Modern Agency一样的内容负责人用。
包含哪些内容
- 顶栏：字标、链接、一个操作. 链接在同一行、同一个字号上排开，#F26522 操作收在行尾右侧，视线正好在导航结束的地方停下。链接比字标小一档，#F26522 操作是导航条上唯一有分量的元素。加第六条链接之前，先把收起状态设计好。
- 尺寸写在需求简报里，不在一套比例里. 这份清单很短（13px 间距、cubic-bezier(0.25,0.1,0.25,1) 缓动曲线），整套系统因此能靠手一个个核过去。因为数值是固定的，替换只改样子，不改节奏。
- 面板分量相同. 本该放一整段文案的地方，这一页放了一组面板，落地页因此扫得完。每块面板把一个观点和一个图标配在一起，扫读路径就一直保持横向。这份参考在 364x640 下收录。
- 公告胶囊. 公告就是标题上方那枚 #F26522 胶囊，字号压得比支撑文案还小，所以它读起来是标签，不是第二个标题。徽标用 #F26522，而标题留在正文色上。消息过期就把它删掉。
动效与交互
时长以需求简报为准
这里的动效用毫秒计量：0缓动是 cubic-bezier(0.25,0.1,0.25,1)这就是全部的动画预算，而且花在状态变化上，不在滚动时间轴上。控件之间复用同一个值，时长就不会各自漂移。
要画布，不要图片
主体是实时渲染出来的（一块 WebGL 画布），而不是一张图片，所以 364x640 的构图会回应视口，而不是待在后面不动。场景是实时的，所以调整版式尺寸不需要另做一套素材。
把这个落地页变成你自己的
可复用的是构图，题材是你自己的。换掉标题，保留字阶（流体字阶），再在你的素材上重新测一遍 #F26522 强调色。如果新加的元素不能帮助说明产品主张或下一步动作，它就该放到折叠线以下。你的强调色要过和参考强调色同样的对比度测试。
这个落地页背后的时序
这里的每一次过渡都挂着一个数字。所以悬停态与按下态、实时画布可以按值逐个移植，而不用靠手感重调。这个落地页里没有为动而动的动画。这份参考在 364x640 下收录。
这个落地页背后的顺序
首屏一次读下来，主张就已经清楚了。导航、标题、公告徽标、数据行、卡片栅格依次出现，靠13px 间距、cubic-bezier(0.25,0.1,0.25,1) 缓动曲线分隔，而不是靠装饰性分割线。创意机构读者先看到主张，再看到选项。
常见问题
Modern Agency 背后那份需求简报里到底有什么？
它是构建简报，不是感觉描述：写明 364x640 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。
为什么这条条目还要标注 React 和 Tailwind CSS？
Modern Agency 是用 React 和 Tailwind CSS 构建的，条目标注只是说明出处。简报写的是位置、尺寸和时长，所以任何能设字体、能摆元素的前端框架都能重建。
在客户项目里该怎么处理 Modern Agency 的素材？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 364x640 下收录。
