精選 · 開放 · 免費

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變化 · 平滑的背景顏色變化

導覽元素上的細微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