精選 · 開放 · 免費

Microwaver59

一個單色調、以排版為核心、高度互動的作品集介面。

01

設計氣質 DNA

一個極簡、實驗性的設計工作室登入頁面。

02

色彩

高對比單色調，僅使用黑、白以及一個微妙的灰色。

03

字型

monospace

• body19px · 700

所有文字均為大寫 · 通篇使用等寬字體，營造技術感與統一美學 · 所有文字元素均套用寬鬆的字距調整

04

間距

嚴格對齊 4px 基礎網格，內部間距緊湊且一致。

05

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

互動元素與結構性分隔使用 1px 實線邊框。

0 0 0 1px rgba(252, 252, 250, 1)

06

版面

全出血、單欄版面，各區塊帶有大量內距。

07

動效與互動

標誌動畫變形為進度旋轉器 · hover 狀態時平滑、帶有輕微彈性的 cubic-bezier 轉場效果 · 載入狀態的 opacity 漸隱

互動元素上的 opacity 或底線進行微妙變化。 · 游標在互動元素上變為指針圖示。

08

組件

• button 外型方正、使用大寫等寬文字的按鈕，預設在 hover 時顯示底線。
• card 卡片主要透過排版與微妙的 hover 狀態來定義，而非厚重的容器外框。
• chip 在提供的截圖中並未明顯出現。
• input 在提供的截圖中並未明顯出現。
• hero 一個動態的、置中的排版標誌動畫，會變形為進度指示器。

09

文案語氣與禁用清單

• 語氣 技術性、直接且高度克制。
• 標題風格 全大寫、等寬字體且字距寬鬆。
• 按鈕文案 直接、大寫且極簡。

• 避免使用彩色漸層 — 截圖顯示的是嚴格的黑白單色調色板。
• 避免在主要元素上使用圓角 — 截圖顯示的是銳利的矩形邊緣。
• 避免使用多種字重 — 截圖顯示幾乎所有文字都使用統一的粗體。
• 避免使用靠左對齊的文字 — 截圖顯示的是置中、對稱的版面。
• 避免使用標準句子大小寫 — 截圖顯示所有文字皆為大寫。
• 避免使用寬鬆的字距 — 截圖顯示文字緊湊、收縮。
• 避免: 圓角形狀
• 避免: 柔和漸層
• 避免: 裝飾性圖片
• 避免: 多種色彩

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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