精選 · 開放 · 免費
Josh Comeau
一個教育性的 Web 開發者部落格,運用明亮、趣味的插圖與清晰的排版,讓複雜的程式碼概念變得易於理解。
portfolio blog
01
設計氣質 DNA
教育性 趣味性 易親近 技術性 友善感
一本友善的圖解教科書,運用豐富色彩與互動隱喻來解釋複雜的網路技術。
02
色彩
#E60067Accent
#0A0C10Ink
#294E60Ink soft
#FFFFFFBG
#B1DFF6BG soft
#F0F4F6BG quiet
#5A6072Muted
rgba(10, 12, 16, 0.1)Line
明亮通透的美學風格,以標誌性的天空藍(#B1DFF6)和鮮豔的洋紅色強調色(#E60067)為主,深海軍藍文字(#0A0C10)確保最佳可讀性。
03
字型
geometric-sans · monospace
display 36px · 700heading 24px · 600subtitle 19px · 400body 16px · 400caption 14px · 400類別標籤使用大寫字母與較寬的字元間距。 · 等寬字體僅限用於程式碼片段與技術術語。 · 維持 1.5 的寬鬆行高,確保長文閱讀舒適度。 · 粗體字體謹慎使用,用於強調關鍵詞而不影響整體佈局。
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
以 4px 基礎格線確保節奏一致性,結構元素之間採用 24px 間距,主要分段則為 48-96px。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
卡片與輸入欄位使用細微的中性灰色細邊框(如 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
版面
1200 container
12 columns
24px gutter
768 / 1024 breakpoints
雙欄佈局,窄側邊欄(300px)用於「熱門內容」與「分類」,旁邊為寬廣的主內容欄。
07
動效與互動
125ms micro
300ms small
500ms medium
cubic-bezier(0.06, 0.63, 0.43, 1) easing
UI 狀態變換採用流暢的透明度過渡 · 互動元素使用細微的變換動畫 · 內容區塊採用錯落進入動畫
互動元素在懸停時有細微的縮放或色彩變化,提供即時視覺回饋。 · 點擊後流暢過渡至新狀態或頁面,延遲最小化。
08
組件
button 簡潔的文字按鈕或細微的膠囊狀標籤,帶有淺色背景填充與圓角。 card 邊緣對齊的簡潔內容卡片,具清晰的排版層次與細微的背景色彩強調。 chip 小型膠囊狀標籤,使用大寫文字,用於分類(如 CSS、React)。 input 簡潔的圓角輸入欄位,配有細微邊框與清晰的焦點狀態。 hero 全寬的插圖主視覺區塊,包含 3D 風格圖形與淺藍色漸層背景。
09
文案語氣與禁用清單
語氣 友善、親切且鼓勵人心,如同 helpful 的導師。 標題風格 清晰、直接且以效益為導向,常用「互動式指南:...」或「友善入門:...」句型。 按鈕文案 細微的文字行動呼籲,自然融入內容流中。 勿使用深色背景作為主內容區域 —— 截圖顯示明亮、淺色背景的美學風格。 勿使用單一黑白或灰階配色方案 —— 設計依賴鮮豔的天空藍與洋紅色強調。 勿使用傳統襯線字體作為內文字體 —— 截圖僅使用簡潔的幾何無襯線與等寬字體。 勿使用生硬的黑色邊框作為 UI 元件邊框 —— 邊框細微且淺色,常為透明或灰色。 勿讓佈局因邊距過窄而顯得擁擠 —— 設計採用充足留白與清晰的分段處理。 勿使用尖銳的 90 度直角作為按鈕或卡片圓角 —— 截圖顯示一致採用圓角(4-12px)。 避免: 艱澀難懂的行話術語 避免: 缺乏人情味的企業用語 避免: 過度戲劇化或聳動的語言 避免: 枯燥乏味的教科書式文風
10
包內真實截圖
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個友善的教育性 Web 開發者作品集與部落格。美學風格明亮通透,主視覺區塊採用標誌性天空藍(#B1DFF6),強調色使用鮮豔的洋紅色(#E60067)。排版簡潔幾何化,注重可讀性與清晰層次。佈局寬敞,運用充足留白與細微邊框來界定分區。關鍵禁忌包括:避免以深色模式作為主要主題、避免使用襯線字體作為內文、避免創造擁擠且低對比度的佈局。整體感覺親切鼓勵,讓複雜技術主題變得平易近人。
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
為什麼收錄: 這個網站是展示如何透過周全的設計與插圖,讓技術教育內容變得溫暖、易親近且引人入勝的絕佳範例。