精选 · 开放 · 免费
Layers
一个供设计师分享和探索分层UI组件与作品集的策展平台。
designcommunity
01
设计气质 DNA
设计策展图层作品集社区
一个供UI/UX设计师展示和发现分层设计资源的数字画廊。
02
色彩
#000000Ink
#64748BInk soft
#FFFFFFBG
#94A3B8Muted
rgba(229, 231, 235, 1)Line
极简主义，高对比度的黑白配色，辅以细微的灰色层次，营造干净、画廊般的体验。
03
字体
grotesque-sans
- display
36px · 500 - body
16px · 400 - caption
14px · 400
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
以4px为基础，间距和间隔采用8px、12px和16px的增量。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
1px solid rgb(229, 231, 235)，用于细微分隔和卡片边框。
rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset · rgba(0, 0, 0, 0.03) 0px 0px 0px 1px inset
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
响应式栅格布局，包含左侧边栏、主内容区以及用于职位和广告的右侧边栏。
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素悬停时的平滑过渡（0.15秒） · 模态框覆盖层的淡入淡出过渡（0.5秒）
交互元素上细微的背景色变化或边框强调。 · 交互元素上使用标准指针光标。
08
组件
- button 极简风格，圆角（12px），常带有边框和悬停状态。主按钮使用实心黑色，次按钮使用带边框的白色。
- card 干净的白色卡片，12px圆角，细微的1px内边框，以及图片预览。
- chip 类似标签的元素，圆角（9999px），用于筛选分类。
- input 带圆角和细微边框的搜索栏。
- hero 展示各种设计项目和资源的内容卡片网格。
09
文案语气与禁用清单
- 语气 专业、干净，专注于设计社区和策展。
- 标题风格 简洁，标签使用大写，标题使用加粗。
- 按钮文案 简洁、以行动为导向的按钮，带有清晰的标签。
- 避免使用复杂渐变——截图显示的是干净的纯色背景，色彩极少。
- 避免实现深色模式——截图显示仅为浅色主题，白色背景。
- 避免使用装饰性衬线字体——截图显示一致使用无衬线字体。
- 避免添加厚重的投影——截图显示使用细微的内边框而非突出的阴影。
- 避免使用鲜艳的强调色——截图保持严格的单色方案，偶尔在内容中使用品牌色。
- 避免创建杂乱的布局——截图展示了充足的留白和清晰的视觉层次。
- 避免: 俏皮或非正式的语言
- 避免: 过度装饰的元素
- 避免: 杂乱的布局
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Layers.to 是一个面向UI/UX设计师的策展设计画廊平台。其视觉系统采用极简的黑白配色方案，#000000墨色搭配#FFFFFF白色背景，辅以细微的灰色层次（#64748B、#94A3B8）。字体仅为 grotesque-sans（Inter字体族），基础尺寸16px，字重400。布局采用12栏栅格，间距24px，最大容器宽度1280px。关键禁忌：绝不使用深色模式（截图仅显示浅色主题），避免装饰性衬线字体（仅使用无衬线字体），并防止厚重阴影（使用细微内边框代替）。界面优先考虑干净的卡片式布局，圆角12px，交互状态极简。
en · zh-CN · zh-TW · ja · ko