精選 · 開放 · 免費

Awwwards

一個策展型的美術館與目錄，展示獲獎的網頁設計。

designgallery

Awwwards 網站截圖

↓ 下載設計系統包 (17 MB)在 OpenDesign 中開啟

原站: https://www.awwwards.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

策展設計獎項高端美術館

一個高端的數位設計美術館與獎項平台。

02

色彩

#222222Ink

#ffffffBG

#f8f8f8BG soft

#a7a7a7Muted

rgba(222,222,222,1)Line

高對比的黑白基底，搭配中性灰色調點綴。

03

字型

grotesque-sans

display80px · 300
heading20px · 600
body14px · 300

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

8px 基礎柵格

05

表面 (圓角 / 陰影 / 邊線)

sm · 2px

md · 8px

lg · 14px

pill · 999px

1px solid

rgb(128,128,128) 0px 0px 5px 0px

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

置中的單欄內容，搭配滿版的英雄圖片。

07

動效與互動

220msmicro

300mssmall

600msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

顏色、背景與透明度的平滑過渡。 · 互動元素的 hover 狀態。

細微的背景或顏色過渡。 · 即時的視覺回饋。

08

組件

button 極簡的膠囊形按鈕，具 1px 邊框與透明背景。
card 簡潔的圖片優先卡片，邊框極少或無可見邊框。
chip 小型圓角標籤，帶有細邊框。
input 搜尋欄位，淺灰色背景與圓角。
hero 滿版的巨大字型主導視窗，位於滿版攝影圖片之上。

09

文案語氣與禁用清單

語氣專業、權威且簡潔。
標題風格 粗體、超大號、極細字重。
按鈕文案 簡單文字或極簡的描邊按鈕。

使用鮮豔、飽和的顏色——截圖顯示的是嚴格的單色調色盤。
套用厚重的陰影——截圖顯示幾乎無立體感或陰影。
使用裝飾性或襯線字體——截圖顯示的是純粹簡潔的 grotesque-sans 字型。
建立圓潤、泡泡狀的介面——截圖顯示的是銳利至中等圓角的邊角。
在版面中填充多種競爭性顏色——截圖依賴黑、白、灰三色。
使用複雜、繁雜的背景——截圖依賴純色平面或單一英雄照片。
避免: 裝飾性或華麗的字型
避免: 響亮的色彩點綴
避免: 雜亂的版面

10

包內真實截圖

Awwwards — 桌面首屏（hero） — 桌面首屏（hero）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一個極簡、美術館風格的設計系統，用於策展型設計獎項平台。它使用嚴格的單色調色盤，背景為 #ffffff，墨色為 #222222，柔和文字為 #a7a7a7。字型極度依賴 grotesque-sans 字型，以極細字重 (300) 用於巨大的展示文字，600 字重用於較小的標題。版面寬敞，採用 12 欄柵格與充裕的留白。關鍵禁忌：勿使用飽和的強調色；勿使用厚重陰影；勿使用襯線字體；勿在版面中塞入視覺雜訊。整體語氣精緻、專業且高度策展。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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