精选 · 开放 · 免费

Metalab

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

01

设计气质 DNA

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

02

色彩

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

03

字体

didone-serif · grotesque-sans

• display88px · 240
• body16px · 400

04

间距

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

05

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

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

06

布局

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

07

动效与交互

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

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

08

组件

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

09

文案语气与禁用清单

• 语气 自信、权威且简洁。
• 标题风格 大尺寸、优雅且极简。
• 按钮文案 含蓄并融入导航结构中。

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

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko