精選 · 開放 · 免費
Vibrants
一個充滿童趣、以健康生活為焦點的登陸頁面，採用柔和漸層背景與鮮豔、親和的按鈕設計。
PlayfulConsumerCalmWarmCuration
01
設計氣質 DNA
活力健康生活童趣親和友善
一個友善的健康生活品牌，以鮮豔、充滿活力卻又平靜的氛圍迎接您。
02
色彩
#021422Ink
#67727AInk soft
#FDFFFEBG
#F3FAFFBG soft
rgba(0,0,0,0.1)Line
柔和、淺色背景，搭配高對比度文字與色彩鮮豔的點綴。
03
字型
humanist-sans
- display
48px · 700 - body
16px · 400
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
垂直間距保持一致，使用 4px 的倍數。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid
rgba(0, 0, 0, 0.1) 0px 2px 4px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中欄位佈局，具有寬裕的垂直間距。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing
按鈕帶有細膩的透明度變化。 · 按鈕點擊效果。
08
組件
- button 大型、描邊式按鈕，採用圓角設計，並為每個操作賦予獨特色彩。
- hero 置中佈局，包含標誌、標題、副標題，以及垂直堆疊的行動按鈕。
09
文案語氣與禁用清單
- 語氣 友善
- 標題風格 充滿童趣且具鼓勵性。
- 按鈕文案 直接且以行動為導向。
- 避免使用刺眼的純白背景 —— 螢幕截圖顯示的是柔和的粉彩漸層。
- 避免使用單一強調色 —— 螢幕截圖顯示的是多彩按鈕。
- 避免使用尖銳的按鈕邊角 —— 螢幕截圖顯示的是圓角矩形。
- 避免使用小型、緊湊的文字 —— 螢幕截圖顯示的是寬裕的間距與大型互動目標區域。
- 避免使用深色主題 —— 螢幕截圖顯示的是明亮、通透的設計。
- 避免使用嚴格的網格佈局 —— 螢幕截圖顯示的是置中、垂直堆疊的排列方式。
- 避免: 正式
- 避免: 技術性
- 避免: 強勢
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此設計是一個充滿童趣、以健康生活為焦點的登陸頁面。主要色彩包括柔和的白/淺藍漸層背景 (#FDFFFE, #F3FAFF)，搭配深海軍藍墨色 (#021422)。字體使用 humanist-sans 字型（Montserrat, Inter）。佈局採用置中方式，並具有寬裕的垂直間距。關鍵注意事項：避免使用刺眼的純白背景，避免使用單一強調色，避免使用尖銳的按鈕邊角。整體氛圍友善、親和且平靜。
en · zh-CN · zh-TW · ja · ko