精選 · 開放 · 免費

Josh Comeau

一個教育性的 Web 開發者部落格，運用明亮、趣味的插圖與清晰的排版，讓複雜的程式碼概念變得易於理解。

01

設計氣質 DNA

一本友善的圖解教科書，運用豐富色彩與互動隱喻來解釋複雜的網路技術。

02

色彩

明亮通透的美學風格，以標誌性的天空藍（#B1DFF6）和鮮豔的洋紅色強調色（#E60067）為主，深海軍藍文字（#0A0C10）確保最佳可讀性。

03

字型

geometric-sans · monospace

• display36px · 700
• heading24px · 600
• subtitle19px · 400
• body16px · 400
• caption14px · 400

類別標籤使用大寫字母與較寬的字元間距。 · 等寬字體僅限用於程式碼片段與技術術語。 · 維持 1.5 的寬鬆行高，確保長文閱讀舒適度。 · 粗體字體謹慎使用，用於強調關鍵詞而不影響整體佈局。

04

間距

以 4px 基礎格線確保節奏一致性，結構元素之間採用 24px 間距，主要分段則為 48-96px。

05

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

卡片與輸入欄位使用細微的中性灰色細邊框（如 rgba(10, 12, 16, 0.1)），類別標籤則採用稍微明顯的描邊。

0px 2px 4px rgba(0, 0, 0, 0.02) · 0px 4px 12px rgba(0, 0, 0, 0.03) · 0px 8px 24px rgba(0, 0, 0, 0.05)

06

版面

雙欄佈局，窄側邊欄（300px）用於「熱門內容」與「分類」，旁邊為寬廣的主內容欄。

07

動效與互動

UI 狀態變換採用流暢的透明度過渡 · 互動元素使用細微的變換動畫 · 內容區塊採用錯落進入動畫

互動元素在懸停時有細微的縮放或色彩變化，提供即時視覺回饋。 · 點擊後流暢過渡至新狀態或頁面，延遲最小化。

08

組件

• button 簡潔的文字按鈕或細微的膠囊狀標籤，帶有淺色背景填充與圓角。
• card 邊緣對齊的簡潔內容卡片，具清晰的排版層次與細微的背景色彩強調。
• chip 小型膠囊狀標籤，使用大寫文字，用於分類（如 CSS、React）。
• input 簡潔的圓角輸入欄位，配有細微邊框與清晰的焦點狀態。
• hero 全寬的插圖主視覺區塊，包含 3D 風格圖形與淺藍色漸層背景。

09

文案語氣與禁用清單

• 語氣 友善、親切且鼓勵人心，如同 helpful 的導師。
• 標題風格 清晰、直接且以效益為導向，常用「互動式指南：...」或「友善入門：...」句型。
• 按鈕文案 細微的文字行動呼籲，自然融入內容流中。

• 勿使用深色背景作為主內容區域 —— 截圖顯示明亮、淺色背景的美學風格。
• 勿使用單一黑白或灰階配色方案 —— 設計依賴鮮豔的天空藍與洋紅色強調。
• 勿使用傳統襯線字體作為內文字體 —— 截圖僅使用簡潔的幾何無襯線與等寬字體。
• 勿使用生硬的黑色邊框作為 UI 元件邊框 —— 邊框細微且淺色，常為透明或灰色。
• 勿讓佈局因邊距過窄而顯得擁擠 —— 設計採用充足留白與清晰的分段處理。
• 勿使用尖銳的 90 度直角作為按鈕或卡片圓角 —— 截圖顯示一致採用圓角（4-12px）。
• 避免: 艱澀難懂的行話術語
• 避免: 缺乏人情味的企業用語
• 避免: 過度戲劇化或聳動的語言
• 避免: 枯燥乏味的教科書式文風

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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