OpenDesign·你的设计资产库

网页参考

SiteInspire

一个展示网络顶尖设计与人才的优质极简策展画廊。

DesignGallery
SiteInspire 网站截图

01

设计气质 DNA

设计展示灵感策展画廊目录

一场经过精心策展的数字设计博物馆展览

02

色彩

#18181bInk
#71717aInk soft
#f4f4f5BG
#fafafaBG soft
#ffffffBG quiet
#a1a1aaMuted
rgba(228,228,231,1)Line

单色系且克制,依靠柔和的米白色画布,让展示的彩色设计作品得以自由呼吸,避免视觉竞争。

03

字体

grotesque-sans

  • display56px · 500
  • heading30px · 500
  • body14px · 400

所有文本使用紧凑的字间距(-0.4px),以保持紧凑、高端的编辑感。 · 正文尺寸相对较小(14px),以优先呈现画廊缩略图的视觉密度。 · 仅标题、副标题和激活的导航项使用字重500。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

所有内边距与外边距均采用一致的4px微网格,营造紧凑、可预测的结构。

05

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

sm · 2px
md · 4px
lg · 9999px
pill · 9999px

使用1px实线 rgb(228,228,231) 进行结构分隔和卡片轮廓勾勒。

0px 0px 0px 0px rgba(0,0,0,0) · 0 4px 6px -1px rgba(0,0,0,0.05)

06

布局

1400container
12columns
24pxgutter
768 / 1024breakpoints

固定顶部导航栏位于全宽主视觉区域上方。下方是灵活的网格布局(通常为3列),用于展示项目缩略图,底部设有可折叠的页脚用于分类导航。

07

动效与交互

150msmicro
150mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

悬停时,透明度与颜色采用快速的150毫秒过渡。 · 交互状态变化(如边框颜色、背景颜色)采用更平滑的0.15秒过渡。

文本链接和UI元素进行细微的色彩变化,保持整体沉静的美学风格。 · 交互元素使用标准指针光标,通过过渡动画提供即时视觉反馈。

08

组件

  • button 药丸形(border-radius: 9999px),用于“登录”等主要操作,常采用深色实心背景。导航使用标准文本链接。
  • card 简洁的无边框或带细边框容器,内含大尺寸缩略图及下方对齐的元数据(标题、日期、作者)。
  • chip 页脚区域的文本类分类标签,呈现为水平排列的简单文本链接列表。
  • input 顶部导航中的极简搜索框,主要由放大镜图标和简单文本标签指示。
  • hero 一个大型、水平滚动的轮播区域,以柔和的灰色背景展示精选项目截图。

09

文案语气与禁用清单

  • 语气 权威、策展性、客观。
  • 标题风格 直接、简洁、有力的陈述(例如:“展示网络顶尖设计与人才”)。
  • 按钮文案 极简且以行动为导向,常仅为一个词或短语(例如:“登录”、“订阅”)。
  • 勿使用鲜艳、高对比度的强调色——截图显示的是严格的单色系调色板,仅有一个微妙的红色Logo点。
  • 勿使用装饰性、衬线或手写体字体——截图仅使用干净、统一的怪诞无衬线体。
  • 勿添加厚重的阴影或复杂的圆角——截图显示的是大多为平面、圆角极小(2px、4px或药丸形)的表面。
  • 勿用过多文本或复杂UI组件充斥界面——截图严重依赖干净的、以图像优先的网格布局。
  • 勿使用大而笨重的按钮样式——截图显示的是极简的药丸形按钮,留有充足留白。
  • 勿偏离严格的4px基础网格——截图显示所有元素间始终保持非常一致、紧凑的间距模式。
  • 避免: 避免使用过于随意或热情的语言。
  • 避免: 避免视觉杂乱或复杂的装饰性元素。
  • 避免: 避免使用会分散对展示作品注意力的明亮、竞争性强的强调色。

10

包内真实截图

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

11

System Prompt

SiteInspire 是一个展示网络顶尖设计与人才的优质极简策展画廊。它使用严格的单色系调色板:柔和的米白色背景(#f4f4f5)、深墨色文字(#18181b)和柔和的次要文本色(#71717a)。排版完全依赖干净、字间距紧凑的怪诞无衬线体。关键禁忌包括:切勿使用明亮、竞争性的强调色;切勿使用装饰性或衬线字体;切勿实现厚重的阴影;并始终保持严格的4px基础间距网格。设计通过以图像优先的网格强调视觉密度,将展示内容视为主要视觉元素。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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