精选 · 开放 · 免费

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

颜色、背景与透明度的平滑过渡。 · 交互元素的悬停状态。

微妙的背景或颜色过渡。 · 即时的视觉反馈。

08

组件

button 采用1px边框与透明背景的极简药丸形按钮。
card 图像优先的简洁卡片，边框极少或不可见。
chip 带有细边框的圆角小标签。
input 浅灰色背景、圆角设计的搜索栏。
hero 横跨视口、占据主导地位的超大通栏文字，位于全幅摄影图片之上。

09

文案语气与禁用清单

语气专业、权威、简洁。
标题风格 加粗、超大字号、超细字重。
按钮文案 简洁文字或极简的描边按钮。

使用鲜艳、饱和的色彩 — 截图显示的是严格的单色配色。
使用浓重的投影 — 截图显示几乎没有任何高度感或阴影。
使用装饰性或衬线字体 — 截图显示的完全是干净的无衬线字体。
创建圆润、气泡感的界面 — 截图显示的是锐利至适度圆角的边角。
在布局中填充多种相互竞争的色彩 — 截图仅使用黑、白、灰。
使用复杂、繁杂的背景 — 截图依赖纯色或单张主视觉照片。
避免: 装饰性或华丽的字体
避免: 过于鲜艳的色彩
避免: 杂乱的布局

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。排版大量使用超细字重（300）的 grotesque-sans 字体作为巨型展示文字，600字重用于较小标题。布局宽敞，运用12栏网格与充足留白。关键禁忌：不要使用饱和的强调色；不要使用浓重阴影；不要使用衬线字体；不要用视觉噪音使布局杂乱。整体基调是精致、专业且高度精选的。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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