精選 · 開放 · 免費
Manetatoulian
顯示相關搜尋主題的標準網域停泊登陸頁面。
ConsumerCalmProductCleanReference
01
設計氣質 DNA
網域停泊搜尋變現實用性
一個帶有生成式搜尋連結的數位候診室
02
色彩
#B8E4FCAccent
#111111Ink
#FFFFFFBG
#000000Muted
rgba(0,0,0,1.0)Line
高對比黑白配色,搭配淺藍色功能性強調色。
03
字型
grotesque-sans
- display
35px · 700 - body
16px · 700
04
間距
垂直堆疊,間距 16px 至 32px。
05
表面 (圓角 / 陰影 / 邊線)
sm · 5px
md · 6px
lg · 14px
pill · 999px
實心黑色邊框,1px 至 3px。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
頁首、內容方塊、項目列表、頁尾。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
hover 狀態的過渡效果
標準指標游標與 CSS 過渡效果。 · 標準連結導航。
08
組件
- button 深色膠囊形按鈕,白色文字。
- card 實心淺藍背景與黑色邊框的搜尋結果方塊。
- hero 簡潔文字佈局,包含已停泊網域名稱與行動呼籲按鈕。
09
文案語氣與禁用清單
- 語氣 中性
- 標題風格 粗體、直接的網域名稱。
- 按鈕文案 直接的行動呼籲。
- 不要使用圓角——截圖顯示搜尋卡片為銳角/方形角。
- 不要使用陰影——截圖顯示完全平面化的表面。
- 不要使用襯線字體——截圖顯示純粹的無襯線排版。
- 不要使用多種背景色——截圖顯示單一平面白色背景。
- 不要使用細邊框——截圖使用醒目、粗厚的黑色邊框。
- 不要使用柔和配色——截圖使用高對比的黑、白與亮淺藍色。
- 避免: 情感
- 避免: 詩意
- 避免: 複雜性
- 避免: 模糊性
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
設計一個極簡、以實用性為導向的介面,用於顯示搜尋相關內容。視覺基因建立在高對比黑白配色與亮淺藍色強調色上。採用簡潔的人文主義或怪誕風格無襯線字體家族。佈局嚴格置中,採用單欄功能性卡片列表。關鍵限制:不要使用陰影。不要在主要內容區塊使用圓角。不要使用襯線排版。不要使用細邊框,改用粗黑邊框。不要引入複雜漸層。不要使用柔和配色;維持文字與背景間的高對比。
en · zh-CN · zh-TW · ja · ko