Creative Portfolio 创意机构与工作室作品集设计｜版式拆解与提示词

关于这个模板

这是 Creative Portfolio 的作品集，连同生成它的那份需求简报一起发布，而不是只给一张截图。“I craft bold brands and modern websites with purpose” 就是整套版式要承载的那一行。配色是深绿色 #181B17 打底、白色 #DED9CF 给文字、亮蓝色 #309ADA 承担强调色，字体用 Figtree。这份参考用 React 和 Tailwind CSS 构建，但版式上的决定都独立于它写清楚了。动效只限于1200ms 的过渡、cubic-bezier(0.16, 1, 0.3, 1)。当你要做面向创意机构或工作室的作品集、想要一个成品构图而不是一个起点时，就拿它当参照。

适合谁

需要这版作品集在慢网络下也撑得住的工程师，会把 640x468 和字阶当作重量预算。
接手这版作品集的市场人员，会用字号从 28px 到 200px、80px 间距检查改稿有没有保住原来的尺度。
用提示词给作品集提需求的人，会把这份 5,639 字符的提示词当作起点。

包含哪些内容

导航不带底色. 链接在同一行、同一个字号上排开，#309ADA 操作收在行尾右侧，视线正好在导航结束的地方停下。链接比字标小一档，#309ADA 操作是导航条上唯一有分量的元素。加底色之前，先把自己的素材垫在导航条下面测一遍。
量出来的，不是估的. 尺寸是收录时就在需求简报里写下的（字号从 28px 到 200px、80px 间距、1200ms 的过渡、cubic-bezier(0.16, 1, 0.3, 1) 缓动曲线），重建因此可以逐项核对，而不是大约像。字体和版式共用同一套档位，换掉其中一样时不会有东西漂移。
一屏之内的结构. 作品集的排法是让文案先落地：层级由字体承担，640x468 的画幅撑住构图，其余数值保持安静。页面在 640x468 下就是一套完整构图，所以文案变了它依然立得住。
两套字，各有各的活. 字体是 Figtree，用在字阶最高一档；支撑文案掉得远低于它，层级因此不用靠颜色就读得出来。字号越大字距收得越紧，标题行在 28–200px 范围内才能保持完整。

动效与交互

动效只落在文案上

入场动效花在页面自己的信息上，而不是花在包围它的框架上：各个板块进入视口时依次揭示。在“减少动态效果”下，元素直接出现，布局不变。先确认静帧本身就成立。这份参考在 640x468 下收录。

看位置，不看计时器

驱动构图的是滚动位置，不是计时器：各个板块进入视口时依次揭示。这个效果是装饰性的：关掉它，层级依然成立。这份参考在 640x468 下收录。

这个作品集背后的顺序

“I craft bold brands and modern websites with purpose”从第一帧起就在做这件事。注意力是被引导的，而不是散开的：视线先落在主标题那一行，然后是支撑文案，最后是行动。需要社会证明时，它是一条长条或一行，而不是一整面客户评价墙。这个顺序就是设计本身。创意机构读者先看到主张，再看到选项。

在 Creative Portfolio 里先改什么

先改承诺，别先改装饰。把“I craft bold brands and modern websites with purpose”重写成一句能说清你做什么的话，再用 Figtree 按需求简报里的主标题字号排。把亮蓝色 #309ADA换成你自己的强调色，并在动别的东西之前先对着深绿色 #181B17检查一遍。保住素材的裁切；它和字体承担的工作一样多。