精選 · 開放 · 免費
Climatecatastrophepack
一款在深色畫布上，運用高對比度排版與緊迫紅色強調的大膽、玩世不恭產品上市頁面。
Bold TypographyDark ModePlayfulEditorialConsumer
01
設計氣質 DNA
玩世不恭末日感諷刺大膽公益
一個用於產品上市的諷刺性緊急廣播系統。
02
色彩
#FF4034Accent
#000000Ink
#E4E4D8BG quiet
rgba(255, 64, 52, 1)Line
以深邃黑色為基底的高對比度雙色調，搭配單一、緊迫的紅色強調。
03
字型
condensed-sans · humanist-sans
- display
201px · 800 - h1
40px · 800 - body
16px · 400
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
寬裕
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 2520px
2px solid
rgba(0, 0, 0, 0.17) 0px 4.18px 8.36px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中單欄
07
動效與互動
50msmicro
200mssmall
500msmedium
cubic-bezier(0.5, 0, 0, 1)easing
hover-scale · text-strike-through
互動元素的 scale-transform · 互動元素的 scale-transform
08
組件
- button 膠囊形狀，搭配粗體緊縮文字
- card 無可見卡片
- chip 無可見標籤
- 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 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
為一個諷刺卡牌遊戲包設計一個玩世不恭、高對比度的產品上市頁面。使用深邃的黑色背景 (#000000) 與米白色 (#E4E4D8) 作為文字與介面基底，搭配單一高飽和度紅色 (#FF4034) 作為緊急強調。字體排版必須以巨大、緊縮的無襯線展示字體（800 字重）作為標題主體，內文則使用乾淨的人文無襯線體。不要使用柔和陰影、細膩漸層或寬鬆字距。佈局應採置中，並具備寬裕的 padding 與清晰的垂直節奏。使用膠囊形狀按鈕與危險主題圖示。務必避免禮貌或企業化的語調；設計必須感覺大膽、混亂且刻意造成壓迫感。
en · zh-CN · zh-TW · ja · ko