精選 · 開放 · 免費
Astro
內容驅動網站的網路框架。
devtoolsframework
01
設計氣質 DNA
以開發者為核心內容驅動快速現代現代化框架
如同打造網站的高性能跑車。
02
色彩
#54B9FFAccent
#F2F6FAInk
#BFC1C9Ink soft
#0D0F14BG
#12151CBG soft
#858B98Muted
rgba(133, 139, 152, 0.2)Line
深邃的深色背景,為鮮明的漸層與清晰的白色字體,創造出高級且高對比度的畫布。
03
字型
grotesque-sans · monospace
- display
64px · 700 - h2
30px · 600 - body
16px · 400 - caption
13px · 400
標題與內文使用簡潔、幾何感的人文/怪誕無襯線字體,以維持技術感與現代感。 · 程式碼片段與 CLI 指令嚴格使用等寬字體。 · 大型展示文字保持緊湊的字距,以增強視覺衝擊力。
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
基於 4px 格線系統,採用寬裕的留白(16px、24px、32px)來界定區塊邊界與元件間距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 16px
pill · 9999px
1px solid rgba(133, 139, 152, 0.2)
rgba(24, 24, 27, 0.3) 0px 1px 2px 0px · rgba(0, 0, 0, 0.1) 0px 1px 3px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中的單欄首頁區域,採用堆疊式內容,隨後過渡為多欄網格以展示主題。
07
動效與互動
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素的色彩與背景色過渡效果平滑。 · 懸停狀態的透明度與外框陰影過渡效果細微。 · 互動回饋的變形過渡效果。
色彩與背景色過渡效果平滑,採用標準緩動曲線。 · 標準指標游標,無突兀的視覺跳動。
08
組件
- button 膠囊形狀,採用實心背景(白色或紫色)並搭配高對比度文字。
- card 深色背景,帶有細微邊框與圓角,用於展示主題。
- chip 膠囊形狀的分類篩選器,帶有細微邊框。
- input 深色背景的程式碼區塊,使用等寬字體並配有複製圖示。
- hero 全寬區塊,擁有引人注目的線性漸層背景與置中的字體排印。
09
文案語氣與禁用清單
- 語氣 自信、以開發者為中心、直截了當。
- 標題風格 粗體、直接、以價值為導向的陳述。
- 按鈕文案 清晰、以行動為導向的短語,例如「立即開始」。
- 勿使用明亮、飽和的背景——截圖顯示的是深邃的深色漸層。
- 勿使用裝飾性或襯線字體——截圖顯示的是簡潔、幾何感的無襯線字體。
- 勿使用尖銳的矩形按鈕——截圖顯示的是完全圓角的膠囊形狀按鈕。
- 勿使用纖細、淺色的標題字重——截圖顯示的是粗體(700)與半粗體(600)字重。
- 勿使用擁擠或雜亂的佈局——截圖顯示的是寬裕的留白與清晰的層次結構。
- 勿使用過多色彩——截圖顯示的是受限的深藍、紫色與白色調色板。
- 避免: 過於華麗或行銷味過重的語言
- 避免: 被動語態
- 避免: 缺乏脈絡的技術術語
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Astro 是一款專為內容驅動網站設計的現代網路框架。其設計風格高級且以開發者為核心,採用深色模式調色板,基底為深邃的海軍藍(#0D0F14),搭配鮮明的紫色漸層與純白(#F2F6FA)文字。字體排印簡潔現代,依賴人文/怪誕無襯線字體分類以營造技術感。關鍵設計規則包括:1. 始終使用深色、高對比度的背景。2. 主要操作按鈕使用膠囊形狀(border-radius: 9999px)。3. 標題或內文切勿使用裝飾性襯線字體。
en · zh-CN · zh-TW · ja · ko