OpenDesign·你的设计资产库

网页参考

Metalab

一个将高对比度编辑式字体排印与抽象、光亮的 3D 视觉效果相结合的高端设计机构网站。

AgencyCase StudyClean
Metalab 网站截图

01

设计气质 DNA

高端大胆编辑感精致

一家高端设计工作室的数字作品集。

02

色彩

#FFFFFFInk
#000000BG
#C7C7C7Muted
rgba(255, 255, 255, 0.1)Line

以高对比度的单色基底搭配微妙的灰色点缀,让富有戏剧性的图像成为焦点。

03

字体

didone-serif · grotesque-sans

  • display88px · 240
  • body16px · 400

04

间距

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

统一使用 24px padding 和间距,构建模块化的留白节奏。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

1px solid rgba(255, 255, 255, 0.1)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

非对称、编辑式的布局,搭配悬浮的导航元素。

07

动效与交互

200msmicro
300mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

导航项在 hover 时微妙的 opacity 过渡 · 流畅的背景色变化

导航元素在 hover 时的微妙 opacity 变化。 · 标准的链接导航。

08

组件

  • button 药丸形导航项,采用半透明深色背景和浅色文字。
  • card 无
  • chip 用于导航链接的半透明深色药丸(例如,Midjourney,Uber)。
  • input 无
  • hero 全视口沉浸式区域,以大尺寸、高对比度的衬线标题为主体,背景为复杂的 3D 抽象效果,附有次要的描述性文本。

09

文案语气与禁用清单

  • 语气 自信、权威且简洁。
  • 标题风格 大尺寸、优雅且极简。
  • 按钮文案 含蓄并融入导航结构中。
  • 不要使用明亮或高饱和度的点缀色 — 截图显示的是严格的单色调色板。
  • 不要为展示标题使用圆角几何无衬线字体 — 截图显示的是锐利、高对比度的衬线体。
  • 不要创建密集、栅格化过重的布局 — 截图显示的是开阔、非对称的构图。
  • 不要为按钮使用纯色、不透明的背景色 — 截图显示的是半透明的深色药丸。
  • 不要在 UI 元素上使用大的阴影或 3D 凸出效果 — 截图显示的是扁平、半透明的表面。
  • 不要使用标准的顶部对齐导航栏 — 截图显示的是位于左上角的悬浮菜单药丸。
  • 避免: 杂乱的界面
  • 避免: 鲜艳或主色调的点缀
  • 避免: 过于技术化的术语

10

包内真实截图

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

11

System Prompt

为 Metalab 这家高端设计机构定义的设计 DNA。网站采用高对比度的单色调色板,以纯黑背景 (#000000) 和白色文字 (#FFFFFF) 为主,辅以微妙的灰色 (#C7C7C7) 点缀。字体排印定义为:用于展示标题的大型、优雅的 didone 衬线体,以及用于正文的简洁 grotesque-sans 无衬线体。布局开阔且具有编辑感,优先考虑富有戏剧性的视觉冲击。关键约束:不要引入任何明亮的点缀色;严格保持单色调色板。不要为标题使用圆角、友好的无衬线字体;保持锐利的衬线对比度。避免密集、复杂的栅格;保留宽敞、非对称的构图。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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