精選 · 開放 · 免費
Cardsagainsthumanity
一款為熱門派對遊戲設計的極簡、強烈對比電商網站。
PlayfulConsumerBold TypographyEditorialClean
01
設計氣質 DNA
挑釁不羈成人派對遊戲極簡主義
一個充滿驚人笑話的黑白對比盒裝遊戲。
02
色彩
#FFFFFFInk
#000000BG
#808080Muted
rgba(255, 255, 255, 1)Line
僅使用高對比黑白二色，反映實體產品的本質。
03
字型
grotesque-sans
- display
80px · 800 - heading
55px · 800 - subheading
40px · 800 - body
20px · 400 - small
14px · 400
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
基於 4px 增量的彈性格線系統。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 13px
lg · 20px
pill · 999px
2px solid #FFFFFF 或 #000000，視背景色而定。
無
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中的內容，搭配寬裕的留白空間。
07
動效與互動
220msmicro
300mssmall
400msmedium
cubic-bezier(0, 0, 0, 1)easing
平滑的捲動與懸停過渡效果。 · 用於卡片旋轉的 CSS transform。
文字連結的細微底線，或輕微的背景色變化。 · 直接導覽。
08
組件
- button 帶底線或圓形箭頭圖示的簡潔文字連結。
- card 旋轉的白色矩形，內有黑色文字，模仿實體撲克牌。
- input 極簡的底線式文字輸入框。
- hero 在純黑背景上散佈、重疊的實體撲克牌圖形。
09
文案語氣與禁用清單
- 語氣 不羈、直接且刻意挑釁。
- 標題風格 極大、粗體，並採用全小寫或標準大寫格式。
- 按鈕文案 極簡、直接且不加修飾。
- 請勿使用粉彩或柔和色彩——截圖顯示嚴格的黑白配色。
- 請勿使用襯線字體——截圖顯示乾淨、粗體的無襯線字體。
- 請勿使用投影或柔和漸層——截圖顯示平面的、高對比的元素。
- 請勿將卡片整齊排列於網格中——截圖顯示它們隨意散佈且旋轉。
- 請勿使用傳統的邊距或間距——截圖顯示寬裕、有時重疊的留白空間。
- 請勿在主要元素上使用圓角——截圖顯示銳角或微圓角的矩形卡片。
- 避免: 柔和或粉彩色調
- 避免: 圓潤友善的 UI 元素
- 避免: 複雜的動畫效果
- 避免: 襯線字體
- 避免: 傳統的行銷術語
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
一個為派對遊戲設計的強烈、不羈的電商網站。採用嚴格的高對比黑白配色（hex #000000 與 #FFFFFF），無任何強調色。字體使用粗體的 grotesque-sans-serif（Helvetica Neue），尺寸極大（最高可達 80px）。版面採用散佈、重疊的卡片元件，並以角度旋轉。關鍵禁忌：絕對不要使用粉彩色調，絕對不要使用襯線字體，絕對不要使用投影，絕對不要將元素整齊排列於網格中，絕對不要使用傳統的柔和 UI，絕對不要使用過多的留白空間。
en · zh-CN · zh-TW · ja · ko