精選 · 開放 · 免費

Astro

內容驅動網站的網路框架。

devtoolsframework
Astro 網站截圖
↓ 下載設計系統包 (14 MB)在 OpenDesign 中開啟

原站: https://astro.build

📦 瀏覽包內檔案 →

01

設計氣質 DNA

以開發者為核心內容驅動快速現代現代化框架

如同打造網站的高性能跑車。

02

色彩

#54B9FFAccent
#F2F6FAInk
#BFC1C9Ink soft
#0D0F14BG
#12151CBG soft
#858B98Muted
rgba(133, 139, 152, 0.2)Line

深邃的深色背景，為鮮明的漸層與清晰的白色字體，創造出高級且高對比度的畫布。

03

字型

grotesque-sans · monospace

標題與內文使用簡潔、幾何感的人文/怪誕無襯線字體，以維持技術感與現代感。 · 程式碼片段與 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

組件

09

文案語氣與禁用清單

10

包內真實截圖

Astro — 桌面首屏（hero）
桌面首屏（hero）
Astro — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Astro — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Astro — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Astro — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Astro — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Astro — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Astro — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Astro — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Astro — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Astro — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Astro — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Astro — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Astro — 移动首屏
移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Astro 是一款專為內容驅動網站設計的現代網路框架。其設計風格高級且以開發者為核心，採用深色模式調色板，基底為深邃的海軍藍（#0D0F14），搭配鮮明的紫色漸層與純白（#F2F6FA）文字。字體排印簡潔現代，依賴人文/怪誕無襯線字體分類以營造技術感。關鍵設計規則包括：1. 始終使用深色、高對比度的背景。2. 主要操作按鈕使用膠囊形狀（border-radius: 9999px）。3. 標題或內文切勿使用裝飾性襯線字體。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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