精選 · 開放 · 免費
Sketch
一個專業、高對比的設計平台，將使用者的工作置於精緻的深色主題介面中心。
Design ToolsCleanProductPremiumCollaboration
01
設計氣質 DNA
設計導向專業專注親和力
一個高端、專注的工具套件，宛如精心打造的工作室環境。
02
色彩
#212123Ink
#000000Ink soft
#f5f5f5BG
#ffffffBG soft
#f0f0f0BG quiet
#0000006bMuted
rgba(0,0,0,0.32)Line
高對比的中性色調，搭配主視覺區域的細膩暖色漸層，以創造聚焦感與深度。
03
字型
transitional-serif · humanist-sans · monospace
- display
72px · 400 - heading
40px · 400 - subhead
22px · 400 - body
16px · 400 - caption
14px · 400
標題字體為高對比的過渡襯線體。 · 內文使用中性的無襯線人文主義字體。 · 大型標題的字距緊湊。
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
基於 4px 網格系統，搭配充足的空白以創造呼吸空間。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
使用 rgba(0,0,0,0.32) 的細膩 1px 邊框來界定區域。
rgba(0, 0, 0, 0.2) 0px 1px 4px 0px · rgba(0, 0, 0, 0.1) 0px 2px 4px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中的內容佈局，具有寬裕的內邊距與清晰的視覺層級。
07
動效與互動
125msmicro
200mssmall
400msmedium
cubic-bezier(0.455, 0.03, 0.515, 0.955)easing
捲動時淡入 · 流暢的 hover 過渡效果
互動元素上的細膩色彩或透明度變化。 · 標準的指向游標，並提供即時反饋。
08
組件
- button 深色、圓角的矩形按鈕，搭配高對比文字。
- card 圓角容器，帶有細膩陰影，用於功能展示。
- chip 小型圓角標籤，帶有背景色與大寫文字。
- input 簡約的圓角輸入欄位，帶有細膩邊框。
- hero 大型分割式版面佈局，包含醒目的襯線體標題與柔和的漸層背景。
09
文案語氣與禁用清單
- 語氣 自信、友善且專業。
- 標題風格 直接明瞭，常使用襯線體以增強衝擊力並營造親和語氣。
- 按鈕文案 以行動為導向且清晰明確，採用高對比按鈕。
- 避免使用低對比文字——截圖顯示淺色背景上使用高對比的深色墨色。
- 避免為內文使用過度裝飾的字體——截圖使用簡潔的人文主義無襯線體。
- 避免為主要操作使用刺眼、明亮的強調色——截圖使用深色、高對比的按鈕。
- 避免在版面上堆砌過多元素——截圖維持了充足的空白。
- 避免為主要元件使用尖銳的方形角落——截圖使用圓角（20px, 12px）。
- 避免為大型標題使用纖細、輕量的字體——截圖使用粗體、高對比的襯線體。
- 避免: 技術術語
- 避免: 激進的銷售用語
- 避免: 過於隨意的俚語
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
這是一個定位為設計師專業工具套件的高端設計工具網站。關鍵十六進制色彩包括淺灰背景色 (#f5f5f5)、高對比深墨色 (#212123)，以及用於次要文字的細膩中性色調。字體方面，標題使用過渡襯線體（例如 'Designers, welcome home.'），內文則使用人文主義無襯線體。重要禁忌：1. 避免使用低對比文字；設計依賴高可讀性。2. 避免為內文使用過度裝飾的字體；保持清晰度。3. 避免版面過於雜亂；保留能創造聚焦感的充足空白。4. 避免為主要按鈕使用刺眼、明亮的強調色；保持深色與高對比。5. 避免元件使用尖銳的方形角落；採用已建立的圓角系統。6. 避免為大型標題使用纖細、輕量的字體；使用高對比襯線體以增強衝擊力。
en · zh-CN · zh-TW · ja · ko