OpenDesign·你的设计资产库

网页参考

Exo Ape

电影感、图像驱动的设计工作室网站,具有精致的排版和从容的节奏。

StudioWebGL
Exo Ape 网站截图

01

设计气质 DNA

精致电影感高端建筑感

高端建筑杂志与奢华酒店大堂的结合。

02

色彩

#FFFFFFInk
#0D0E13BG
#E0CCBDMuted
rgba(255,255,255,0.15)Line

英雄摄影作为主要画布,纯净白色排版提供最大对比度,单一暖色点缀增添微妙暖意。

03

字体

humanist-sans

  • display250px · 300
  • heading144px · 300
  • body16px · 300

对展示尺寸使用极紧的负字间距,以实现高端、建筑感的外观。 · 所有文本保持轻量 (300) 字重,以保持优雅。 · 所有排版元素确保高对比度(深色上的白色)。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

宽敞、画廊般的节奏,主要元素周围留有充足内边距。

05

表面 (圆角 / 阴影 / 边线)

sm · 0px
md · 0px
lg · 0px
pill · 999px

极简;依赖色彩对比和摄影景深而非线条。

06

布局

1440container
12columns
24pxgutter
768 / 1024breakpoints

全出血摄影主视觉,搭配左对齐的文本块。

07

动效与交互

220msmicro
500mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

悬停状态使用平滑的不透明度过渡。 · 大型文本元素使用电影感的滚动揭示。

微妙的不透明度降低。 · 即时响应。

08

组件

  • button 无背景的极简文本链接。
  • card 全出血图像叠加。
  • hero 全视口摄影背景,搭配巨大、左对齐的排版。

09

文案语气与禁用清单

  • 语气 自信、低调且高端。
  • 标题风格 轻量字重的巨大单词或短语陈述。
  • 按钮文案 低调、基于文本的行动号召。
  • 勿使用粗重字重 — 截图显示所有文本采用一致的轻量 (300) 字重。
  • 勿为主要表面添加圆角 — 截图显示锐利的建筑感边缘。
  • 勿使用明亮、饱和的点缀色 — 截图依赖摄影上的白色文本。
  • 勿使布局拥挤 — 截图显示文本块周围有充足内边距 (如 50px)。
  • 勿使用带可见线条的网格 — 截图使用空白和对齐来组织内容。
  • 勿使用小型展示文本 — 截图显示 'Digital' 以巨大的 250px 尺度呈现。
  • 避免: 响亮、饱和的色彩。
  • 避免: 主要容器上的圆角。
  • 避免: 粗重字体 (400+)。

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是一个高端数字设计工作室网站,使用电影感、图像驱动的布局来建立高端品牌形象。核心调色板包含深邃的建筑暗色 (#0D0E13) 和纯净白色 (#FFFFFF) 排版,辅以柔和的暖沙色 (#E0CCBD) 用于次要点缀。排版采用人文主义无衬线字体,具体为轻量 (300) 字体,在巨大尺寸下使用极紧的负字间距。布局采用全出血设计,宽敞布局,优先使用高质量摄影而非复杂的 UI 模式。关键约束:切勿使用粗重字重或明亮饱和的色彩;保持宽敞、画廊般的间距;并始终确保文本与摄影背景之间的高对比度。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。