Network Hero 创意机构与工作室首屏设计｜版式拆解与提示词

关于这个模板

Network Hero 是面向创意机构或工作室的一份可用参考：这套首屏已经排好、量好，可以直接照着复刻。标题是“Unlock Top Marketing Talent You Thought Was Out of Reach -- Now Just One Click Away!”，首屏其余部分都围着它排。整套配色是深靛蓝色 #070319 打底、白色 #FFFFFF 给文字、靛蓝色 #A068FF 承担强调色，页面字体是 Inter。这一条会把生成页面的技术栈（React、Vite）写出来，而不是藏起来。动效是35ms 的过渡、cubic-bezier(0.22, 1, 0.36, 1)，克制到文案依然是主角。写作时让它开着：能迁移到你页面上的，是那份 7,543 字符的简报。

适合谁

需要这版首屏在慢网络下也撑得住的工程师，会把 640x472 和字阶当作重量预算。
给要改写一版首屏、标题长度又得和Network Hero一样的内容负责人用。
这个首屏的适用对象，是需要重建时复用 #A068FF、而不是另造一套配色的产品经理。

包含哪些内容

导航条落在页面栅格上. 顶栏装下字标、四到五个链接和一个染成 #A068FF 的操作，字号压得很低，不跟页面其他地方抢。链接比字标小一档，#A068FF 操作是导航条上唯一有分量的元素。你自己的页面板块更多时，把它们归组，而不是把导航条拉宽。
间距档位是写明的. 这些值就是规格本身：64px 间距、35ms 的过渡、cubic-bezier(0.22, 1, 0.36, 1) 缓动曲线，是在 640x472 下收录的，而不是从截图里反推的。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。
靠展示字号说话. 这里字体就是那套样式系统：Inter 撑展示字号，整个界面共用同一套字，不需要第二个强调色来帮忙。字号档位是固定值，换字体时层级才能原样保住。
对着视口量出来的. 这些值就是规格本身：64px 间距、35ms 的过渡、cubic-bezier(0.22, 1, 0.36, 1) 缓动曲线，是在 640x472 下收录的，而不是从截图里反推的。需求简报给的是数值，不是比例，所以文案长度变了，构图里的关系也不会散。换题材，别换档位。

动效与交互

时长写进了需求简报

过渡在需求简报里写明为 35ms使用 cubic-bezier(0.22, 1, 0.36, 1)，控件上的时长就以这个值为准。写明的时长只覆盖状态变化，反馈正是这套动效里被规格管住的部分。

入场动作即签名

动效只集中在一种行为上（打字机式地逐字打出引言行），页面因此不会读成一整套特效合集。时间加在文字上，而不是加在容器上，所以这一行落下时是一句话，而不是一块。这份参考在 640x472 下收录。

把这个首屏变成你自己的

模板要求你接受它的版式，这份参考要求你保住版式、把里面的东西全换掉。区别在于：题材在动，64px 间距、35ms 的过渡、cubic-bezier(0.22, 1, 0.36, 1) 缓动曲线不动。在重新配色之前，先把文案和素材改完。

这个首屏背后的时序

代价是：这里没有任何东西的动画值得你回头看第二眼。值得看的是阅读顺序，35ms 的过渡、打字机式逐字写入、标题按字符逐个计时只用来确认状态，不做装饰。这个首屏里没有为动而动的动画。

这份创意机构需求简报为什么站得住

它对创意机构或工作室有效，是因为它从不要求读者自己去拼信息。页面直接把这句话说出来了：“Unlock Top Marketing Talent You Thought Was Out of Reach -- Now Just One Click Away!”。版式、字体和颜色都已经定好（深靛蓝色 #070319 和靛蓝色 #A068FF，用 Inter），所以第一屏读起来是一个完整的论点，而不是一堆零件。 Network Hero 只把主张说一次，然后让构图去重复它，而不是再加第二个主张。