精選 · 開放 · 免費
Minymon
提供可愛互動式吉祥物角色的趣味服務,旨在提升網站參與度。
PlayfulConsumerFriendlyConsumerApp UI
01
設計氣質 DNA
活潑親切數位寵物品牌吉祥物對話式
專屬於您網站的數位寵物商店
02
色彩
#F16849Accent
#154C7EInk
#F9F2EABG
#474747Muted
rgba(21, 76, 126, 1)Line
溫暖親切,採用高對比度、友善的配色方案。
03
字型
humanist-sans
- display
56px · 700 - h1
36px · 700 - body
18px · 400 - nav
13px · 500
導覽連結使用全大寫與寬鬆字距。 · 首頁標題採用緊密負字距排列。 · 內文搭配表情符號以增添活潑語氣。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
主要內容區塊間採用寬裕的垂直內距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 24px
pill · 999px
實心主色邊框搭配實體偏移陰影。
4px 4px 0px 0px rgba(21, 76, 126, 1)
06
版面
1200container
12columns
24pxgutter
768 / 1024breakpoints
置中單欄佈局,設有最大寬度容器與醒目浮動吉祥物。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素採用平滑過渡效果。
互動元素上方游標轉為指標圖示。 · 標準按鈕點擊行為。
08
組件
- button 實體邊框搭配實體偏移陰影,圓角設計增添趣味感。
- card 定義未明確,角色以簡約浮動行列呈現。
- chip 定義未明確。
- input 定義未明確。
- hero 置中文字首頁區塊,搭配大型裝飾波浪分隔線。
09
文案語氣與禁用清單
- 語氣 友善、親切且略帶奇趣。
- 標題風格 直接對話式風格,適時運用表情符號。
- 按鈕文案 以行動為導向,充滿鼓勵性質。
- 勿使用單調白色背景——截圖顯示溫暖奶油米色(#F9F2EA)。
- 勿使用生硬機械感陰影——截圖顯示趣味性實體偏移陰影。
- 勿採用高科技深色介面——截圖使用淺色、柔和且親切的配色。
- 勿採用複雜多欄網格——截圖顯示簡潔置中單欄佈局。
- 勿使用強勢霓虹點綴色——截圖採用柔和溫暖的珊瑚/鮭魚色(#F16849)。
- 勿使用嚴肅專業襯線字體——截圖採用圓潤人文無襯線字體。
- 避免: 企業術語
- 避免: 複雜技術詞彙
- 避免: 強勢銷售話術
- 避免: 正式或生硬語調
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Minymon 是一項面向消費者的趣味服務,為網站提供可愛互動數位吉祥物(「minymons」)。設計風格溫暖親切,採用奶油米色(#F9F2EA)背景、深海軍藍(#154C7E)文字與柔和珊瑚色(#F16849)點綴。字體選用圓潤人文無襯線字體,營造友善非正式的視覺感受。關鍵視覺元素包括趣味表情符號、實體偏移陰影與裝飾性波浪分隔線。重要禁忌:切勿使用單調白色背景;切勿採用機械感柔和陰影;切勿使用深色或高科技配色。務必保持奇趣邀請的語調。
en · zh-CN · zh-TW · ja · ko