精選 · 開放 · 免費
Readymag
一個用於打造具有表現力、畫廊式網站的高端設計工具平台。
tooldesign
01
設計氣質 DNA
創意表現力設計導向畫廊作品集
一個瑞士風格的數位設計工具畫廊。
02
色彩
#FF5000Accent
#282828Ink
#444444Ink soft
#FFFFFFBG
#F4F4F4BG soft
#808080Muted
rgba(40,40,40,0.24)Line
高對比度基調,搭配大膽、飽和的強調色與充足的留白。
03
字型
humanist-sans · system-sans
- display
80px · 500 - headline
30px · 400 - body
16px · 400 - caption
14px · 400
使用幾何/人文無襯線字體作為標題展示字型。 · 使用系統字體作為介面元素。 · 確保大型標題字的字母間距緊湊。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
以 4px 為基礎網格,針對緊湊的介面元素採用緊密且具意圖的間距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 10px
lg · 20px
pill · 999px
1px solid rgba(40,40,40,0.24)
0 2px 8px rgba(0,0,0,0.05)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
標準的 12 欄網格,具有靈活的溝槽與高密度畫廊佈局。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
UI 狀態變更時採用流暢的透明度過渡。 · 互動元素採用細微的變換動畫。 · 模態視窗與覆蓋層出現時採用淡入/淡出效果。
互動元素在互動時產生細微的亮度或透明度變化。 · 立即提供視覺反饋,帶有輕微的變換或色彩偏移。
08
組件
- button 藥丸形狀,採用大膽的橙色背景與白色文字,或帶有深色邊框的輪廓樣式。
- card 以圖片為主,邊框緊密且內距極小,專注於視覺內容。
- chip 並非主要特色,用於標籤或小型狀態標示。
- input 簡潔的文字輸入框,帶有底部邊框或細微背景。
- hero 大膽、具表現力的字體排印,搭配高密度圖片畫廊或大膽的色塊。
09
文案語氣與禁用清單
- 語氣 自信、直接且專注於創意。
- 標題風格 大膽、極簡,常帶有實驗性或超大尺寸。
- 按鈕文案 直接且以行動為導向,常使用大膽的主色調。
- 不要使用裝飾性或手寫體字型 — 截圖顯示的是乾淨、功能性的無襯線字體排印。
- 不要使用低對比度的文字顏色 — 截圖顯示的是高對比度的黑白搭配大膽強調色。
- 不要使用複雜、雜亂的佈局 — 截圖顯示的是清晰、基於網格的畫廊佈局。
- 不要在所有地方都使用圓潤、氣泡狀的 UI 元素 — 截圖顯示的是銳利、具意圖的邊框,僅按鈕使用藥丸形狀。
- 不要使用柔和、粉彩色的色盤 — 截圖顯示的是像橙色與紫色這樣大膽、飽和的色彩。
- 不要將視覺內容隱藏在互動之後 — 截圖顯示的是以高密度圖片畫廊作為主要內容。
- 避免: 充斥行話的技術性語言
- 避免: 過度企業化或死板的語氣
- 避免: 低對比度或難以閱讀的字體排印
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個用於打造具有表現力、畫廊式網站的高端設計工具平台。主要背景為白色 (#FFFFFF),文字使用深墨色 (#282828),並以大膽的橙色 (#FF5000) 作為行動呼籲的強調色,紫色 (#8800FF) 作為點綴。字體排印使用人文無襯線展示字型與系統無襯線字體作為內文字型。關鍵禁忌:不要使用裝飾性字型,不要使用低對比度文字,不要使用雜亂的佈局。佈局基於網格,包含高密度的視覺畫廊與充足的留白,專注於展示設計作品。
en · zh-CN · zh-TW · ja · ko