精選 · 開放 · 免費

Readymag

一個用於打造具有表現力、畫廊式網站的高端設計工具平台。

01

設計氣質 DNA

一個瑞士風格的數位設計工具畫廊。

02

色彩

高對比度基調，搭配大膽、飽和的強調色與充足的留白。

03

字型

humanist-sans · system-sans

• display80px · 500
• headline30px · 400
• body16px · 400
• caption14px · 400

使用幾何/人文無襯線字體作為標題展示字型。 · 使用系統字體作為介面元素。 · 確保大型標題字的字母間距緊湊。

04

間距

以 4px 為基礎網格，針對緊湊的介面元素採用緊密且具意圖的間距。

05

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

1px solid rgba(40,40,40,0.24)

0 2px 8px rgba(0,0,0,0.05)

06

版面

標準的 12 欄網格，具有靈活的溝槽與高密度畫廊佈局。

07

動效與互動

UI 狀態變更時採用流暢的透明度過渡。 · 互動元素採用細微的變換動畫。 · 模態視窗與覆蓋層出現時採用淡入/淡出效果。

互動元素在互動時產生細微的亮度或透明度變化。 · 立即提供視覺反饋，帶有輕微的變換或色彩偏移。

08

組件

• button 藥丸形狀，採用大膽的橙色背景與白色文字，或帶有深色邊框的輪廓樣式。
• card 以圖片為主，邊框緊密且內距極小，專注於視覺內容。
• chip 並非主要特色，用於標籤或小型狀態標示。
• input 簡潔的文字輸入框，帶有底部邊框或細微背景。
• hero 大膽、具表現力的字體排印，搭配高密度圖片畫廊或大膽的色塊。

09

文案語氣與禁用清單

• 語氣 自信、直接且專注於創意。
• 標題風格 大膽、極簡，常帶有實驗性或超大尺寸。
• 按鈕文案 直接且以行動為導向，常使用大膽的主色調。

• 不要使用裝飾性或手寫體字型 — 截圖顯示的是乾淨、功能性的無襯線字體排印。
• 不要使用低對比度的文字顏色 — 截圖顯示的是高對比度的黑白搭配大膽強調色。
• 不要使用複雜、雜亂的佈局 — 截圖顯示的是清晰、基於網格的畫廊佈局。
• 不要在所有地方都使用圓潤、氣泡狀的 UI 元素 — 截圖顯示的是銳利、具意圖的邊框，僅按鈕使用藥丸形狀。
• 不要使用柔和、粉彩色的色盤 — 截圖顯示的是像橙色與紫色這樣大膽、飽和的色彩。
• 不要將視覺內容隱藏在互動之後 — 截圖顯示的是以高密度圖片畫廊作為主要內容。
• 避免: 充斥行話的技術性語言
• 避免: 過度企業化或死板的語氣
• 避免: 低對比度或難以閱讀的字體排印

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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