精選 · 開放 · 免費
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
互動元素在 hover 時的平滑過渡效果（0.15 秒） · 彈出視窗覆蓋層的淡入淡出過渡效果（0.5 秒）
互動元素在 hover 時細微的背景顏色變化或邊框強調。 · 互動元素使用標準指標游標。
08
組件
- button 極簡，圓角（12px），通常帶有邊框與 hover 狀態。主要按鈕使用純黑，次要按鈕使用白色搭配邊框。
- card 乾淨的白色卡片，12px border-radius，細微的 1px inset 邊框，並附有圖片預覽。
- chip 標籤式元素，圓角（9999px），用於篩選類別。
- input 搜尋欄，帶有圓角與細微邊框。
- hero 內容卡片網格，展示各種設計專案與素材。
09
文案語氣與禁用清單
- 語氣 專業、簡潔，專注於設計社群與策展。
- 標題風格 簡潔，標籤使用大寫，標題使用粗體。
- 按鈕文案 簡單、以行動為導向的按鈕，標籤清晰明確。
- 不要使用複雜的漸層 — 截圖顯示的是乾淨、純色的背景，色彩極簡。
- 不要實作暗色模式 — 截圖僅顯示淺色主題，採用白色背景。
- 不要使用裝飾性的襯線字體 — 截圖顯示一致使用無襯線字體。
- 不要添加厚重的投影 — 截圖顯示使用細微的 inset 邊框，而非突出的陰影。
- 不要使用鮮豔的強調色 — 截圖維持嚴格的單色調色板，偶爾在內容中使用品牌色彩。
- 不要建立雜亂的佈局 — 截圖展示了充裕的留白與清晰的視覺層次。
- 避免: 俏皮或非正式的語言
- 避免: 過度裝飾的元素
- 避免: 雜亂的佈局
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。關鍵禁忌：絕不使用暗色模式（截圖僅顯示淺色主題），避免使用裝飾性襯線體（僅使用無襯線字體），並防止厚重陰影（改用細微的 inset 邊框）。介面優先考量乾淨的卡片式佈局，採用 12px border-radius 與最小化的互動狀態。
en · zh-CN · zh-TW · ja · ko