OpenDesign·你的设计资产库

网页参考

Awwwards

一个精选展示获奖网页设计的画廊与目录。

DesignGallery

封面待补录，可通过原站查看设计。

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 — 移动首屏
移动首屏

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

11

System Prompt

这是一个用于精选设计奖项平台的极简、画廊式设计系统。它采用严格的单色配色，背景为 #ffffff，主文本为 #222222，辅助文本为 #a7a7a7。排版大量使用超细字重（300）的 grotesque-sans 字体作为巨型展示文字，600字重用于较小标题。布局宽敞，运用12栏网格与充足留白。关键禁忌：不要使用饱和的强调色；不要使用浓重阴影；不要使用衬线字体；不要用视觉噪音使布局杂乱。整体基调是精致、专业且高度精选的。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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