Glow Features 创意机构与工作室 功能区 design preview

这条是静帧设计,所以预览展示的是截取画面,而不是视频片段。

关于这个模板

Glow Features 是一个只靠一份书面简报搭出来的创意机构功能区,这一页记录的就是那份简报。它以“My entire desktop setup is built for power. It is silent, durable, and holds my focus”开场,给这句话整个版心,而不是把它缩进一张卡片里。整页都建立在黑色 #0A0A0B 打底、灰调红色 #FFB1CE 给文字、亮红色 #FF3D77 承担强调色之上。交付形式是 React 和 Tailwind CSS,收录于 1834x1362,所以画幅在任何一行代码写下去之前就已经定好。借结构,不借题材:这个功能区和它那组数字可以原样搬到你的品牌上。收录的提示词记录于 1834x1362,所以这一页引用的每个数值都能追回到它。

适合谁

  • 正在给创意机构或工作室功能区提案的代理公司,想把固定 14px 的标题字号、40px 间距写进方案里,好让报价在启动会之后仍然站得住。
  • 给正在做创意机构或工作室功能区、背后还没有设计系统的独立创始人用。
  • 用提示词给功能区提需求的人,会把这份 3,072 字符的提示词当作起点。

包含哪些内容

  • 能逐项核对的数值. 尺寸是收录时就在需求简报里写下的(固定 14px 的标题字号、40px 间距),重建因此可以逐项核对,而不是大约像。字体和版式共用同一套档位,换掉其中一样时不会有东西漂移。
  • 证据就一行. 统计数字是当字体来处理的:数字用展示字号,标签用需求简报里最小的字阶,颜色只走 #FF3D77 或正文色,而不是找一张彩色卡片垫着。数字带 #FF3D77 强调色,周围一切都留在正文色上。
  • 要栅格,不要长段落. 本该放一整段文案的地方,这一页放了一组面板,功能区因此扫得完。面板内的小标题比自己那块正文高一档,而不是比页面标题低一档。面板数量跟着文案走。这份参考在 1834x1362 下收录。
  • 强调色只上控件. 颜色是配给的:一个强调色(#FF3D77)、一个底色(黑色 #0A0A0B),没有第三个值来抢注意力。其余一切都落在黑色 #0A0A0B 上,高饱和配色才保得住可读性。

动效与交互

视觉就是这块场景

页面纵深来自渲染,而不是来自插画:一块 WebGL 画布,画幅因此不靠图片撑。需求简报里没有图片替换,所以场景属于首屏渲染的一部分。这份参考在 1834x1362 下收录。

几乎没有动效

需求简报里没有动画,页面靠 1834x1362 的版式撑住,唯一的变化是悬停态和按下态。动效被当作反馈,而不是装饰。

在 Glow Features 里先改什么

大多数人从强调色开始改。不如从主张开始:重写那行展示字,再在你的素材上重测亮红色 #FF3D77。换一个品牌,整套画幅都能接着用。

这个功能区怎么重排

窄屏版式是设计出来的,不是继承来的。每个宽度下字阶是流体的,而不是阶梯式的,层级因此扛得住重排。最后才会改的是顺序。这份参考在 1834x1362 下收录。

对创意机构与工作室来说成立的地方

3,072 个字符的需求简报,产出的是一屏没有填充内容的首屏。里面的数值都是明写的(固定 14px 的标题字号、40px 间距),所以换了文案,构图照样读得通。 Glow Features 只把主张说一次,然后让构图去重复它,而不是再加第二个主张。

常见问题

Glow Features 背后的提示词到底有多长?

它是构建简报,不是感觉描述:写明 1834x1362 的构图、间距和动效数值。全文没有一处把渲染画面当作事实依据。

Glow Features 有多少地方依赖 React 和 Tailwind CSS?

Glow Features 是用 React 和 Tailwind CSS 构建的,条目标注只是说明出处。简报写的是位置、尺寸和时长,所以任何能设字体、能摆元素的前端框架都能重建。

Glow Features 的设计是从哪来的?

简报是描述,不是转授权别人素材的许可。结构和数值可以留下,素材和品牌标识要换成你自己的;客户问起版式出处时,说明来源即可。这份参考在 1834x1362 下收录。

在 Studio 里复刻

先拿参考,再到 Studio 里替换内容与视觉细节。