精选 · 开放 · 免费

SiteInspire

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

01

设计气质 DNA

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

02

色彩

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

03

字体

grotesque-sans

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

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

04

间距

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

05

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

使用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

布局

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

07

动效与交互

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

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

08

组件

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

09

文案语气与禁用清单

• 语气 权威、策展性、客观。
• 标题风格 直接、简洁、有力的陈述（例如：“展示网络顶尖设计与人才”）。
• 按钮文案 极简且以行动为导向，常仅为一个词或短语（例如：“登录”、“订阅”）。

• 勿使用鲜艳、高对比度的强调色——截图显示的是严格的单色系调色板，仅有一个微妙的红色Logo点。
• 勿使用装饰性、衬线或手写体字体——截图仅使用干净、统一的怪诞无衬线体。
• 勿添加厚重的阴影或复杂的圆角——截图显示的是大多为平面、圆角极小（2px、4px或药丸形）的表面。
• 勿用过多文本或复杂UI组件充斥界面——截图严重依赖干净的、以图像优先的网格布局。
• 勿使用大而笨重的按钮样式——截图显示的是极简的药丸形按钮，留有充足留白。
• 勿偏离严格的4px基础网格——截图显示所有元素间始终保持非常一致、紧凑的间距模式。
• 避免: 避免使用过于随意或热情的语言。
• 避免: 避免视觉杂乱或复杂的装饰性元素。
• 避免: 避免使用会分散对展示作品注意力的明亮、竞争性强的强调色。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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