精選 · 開放 · 免費

Character.AI

專注於角色對話的友善 AI 平台，提供低摩擦的註冊流程與極簡體驗。

01

設計氣質 DNA

簡潔現代的聊天應用程式介面，優先考慮簡約性與註冊流程的便利性。

02

色彩

採用中性柔和色調，並以高對比深色元素作為主要操作視覺。

03

字型

geometric-sans · humanist-sans

• display36px · 700
• body16px · 400

標題使用緊湊負字距以強化視覺衝擊力。 · 內文維持標準行高以確保可讀性。 · 字重嚴格限定使用 400、500、600 與 700。

04

間距

採用標準 4px 格線系統，內距與間距保持一致。

05

表面 (圓角 / 陰影 / 邊線)

1px solid #d4d4da

rgba(0, 0, 0, 0.1) 0px 4px 6px -1px · rgba(0, 0, 0, 0.1) 0px 2px 4px -2px

06

版面

居中卡片佈局，以大型主視覺圖像作為註冊表單的背景。

07

動效與互動

所有互動元素均採用細膩的 250 毫秒過渡效果。 · 背景圖像進行平滑的縮放或淡入淡出。 · 按鈕與連結具備簡潔的 hover 狀態。

主要按鈕在 hover 時產生細微背景色或透明度變化。 · 提供即時回饋，搭配輕微縮放或色彩變動。

08

組件

• button 大型圓角按鈕，採用高對比配色（黑或白），文字置中。
• card 帶有細微陰影的浮動白色卡片，用於主要註冊表單。
• chip 簡約文字連結，hover 時顯示底線，用於頁尾導覽。
• input 簡潔輸入欄位，採用圓角設計與細微邊框。
• hero 分割佈局，搭配大型動態／插畫背景與浮動白色轉化卡片。

09

文案語氣與禁用清單

• 語氣 邀請式、簡潔且具鼓勵性。
• 標題風格 直接強調效益，聚焦於規模與速度。
• 按鈕文案 明確且導向行動的按鈕文字（例如：「註冊開始聊天」、「使用 Google 繼續」）。

• 避免使用複雜的多欄格線——截圖顯示簡潔聚焦的單欄或分割佈局。
• 避免使用多樣化色彩——截圖顯示以黑白色為主要對比的中性色調。
• 避免使用裝飾性或華麗字型——截圖顯示簡潔現代的無襯線字體。
• 避免在主要介面使用厚重的深色背景——截圖呈現明亮通透的視覺感受。
• 避免使用小型擁擠的按鈕——截圖顯示大型且觸控友善、內距充足的按鈕。
• 避免使用強烈或高飽和的強調色——截圖呈現寧靜的單色系介面。
• 避免: 技術術語
• 避免: 正式或過度企業化的語言
• 避免: 冗長的說明

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko