精選 · 開放 · 免費

Raindrop

一款為創意工作者設計、專為程式碼打造的全方位書籤管理工具

01

設計氣質 DNA

現代網路的數位文件櫃

02

色彩

乾淨的白色表面，搭配主要藍色強調色與柔和的深色文字

03

字型

system-ui · monospace

• display50px · 500
• h236px · 600
• body18px · 400
• small16px · 400

使用 system-ui 或 Segoe UI 以達到原生、簡潔的視覺效果 · 標題排版緊湊、簡潔且略為粗體 · 在白色背景上保持高對比度以確保可讀性

04

間距

主視覺區塊採用充裕的垂直內距 (50px)，水平內距則統一為 30px

05

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

容器與輸入欄位使用 1px solid rgba(0,0,0,0.1) 邊框

0px 12px 24px rgba(0, 0, 0, 0.1) · 0px 2px 4px rgba(0, 0, 0, 0.1) · 0px 0px 0px 0.5px rgba(0, 0, 0, 0.15)

06

版面

分割式主視覺版面，左側放置文案，右側是重疊的產品截圖，並使用有機的背景斑點來增添視覺趣味

07

動效與互動

hover 狀態採用平滑的 opacity 與 transform 過渡動畫 · 互動元素上帶有細微的 background-color 變化

細微的背景顏色變化或 opacity 轉變 · 極簡的物理回饋，依賴狀態改變來呈現

08

組件

• button 主要按鈕採用明亮的藍色填充並帶有小圓角；次要按鈕則是透明的文字連結
• card 容器與功能卡片使用柔和陰影與淺色邊框
• chip 圓角膠囊狀標籤，帶有柔和背景色（例如「新增：AI 助理」膠囊）
• input 簡潔的輸入框，帶有細微邊框與 4px 圓角
• hero 左側為大型粗體展示文字，右側為多層次的產品截圖，背景為白色並搭配彩色抽象有機形狀

09

文案語氣與禁用清單

• 語氣 專業、有幫助且直接明瞭
• 標題風格 簡短、陳述式且聚焦於效益
• 按鈕文案 直接且以行動為導向（立即註冊、下載應用程式）

• 勿使用深色模式作為主要背景——截圖顯示以白色為主的背景
• 勿使用刺眼的霓虹強調色——截圖使用乾淨的明亮藍色 (#0B7ED0)
• 勿使用厚重、裝飾性的襯線字體——截圖使用簡潔的原生系統字體
• 勿讓版面過於僵硬方正——截圖融合了有機、柔和的背景斑點
• 勿使用過多邊框使介面顯得雜亂——截圖運用留白與細微陰影
• 勿使用深色主文字顏色——截圖使用較柔和、稍淺的深灰色 (#1A1A1A)
• 避免: 過度隨意的俚語
• 避免: 具攻擊性或誇張的行銷語言
• 避免: 未經解釋的複雜技術術語

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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