← OpenDesign 精選 · 開放 · 免費
Bolt
一個現代深色主題的 AI 平台，讓使用者能透過自然語言建立應用程式與網站。
ai dev
01
設計氣質 DNA
AI 建構工具 開發者 現代感 提示詞
為開發者打造的 AI 驅動創意工作室。
02
色彩
#1488fcAccent
#ffffffInk
rgba(255,255,255,0.75)Ink soft
#111114BG
#1e1e21BG soft
#171719BG quiet
rgba(255,255,255,0.6)Muted
rgba(255,255,255,0.1)Line
採用單一鮮明藍色強調色的高對比深色模式。
03
字型
humanist-sans · monospace
display 56px · 700heading 48px · 600body 16px · 400small 14px · 40004
間距
4px
8px
16px
24px
32px
48px
64px
96px
以 4px 為基準單位，主要間距採用 16px 與 24px。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(255, 255, 255, 0.1)
0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px -15px 24.8px 0px rgba(17, 114, 226, 0.6)
06
版面
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
內容置中，具有固定最大寬度。
07
動效與互動
150ms micro
200ms small
400ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
互動元素的色彩過渡 · 懸停與聚焦時的透明度淡出
細微的色彩或透明度變化。 · 立即的視覺回應。
08
組件
button 主要操作採用實心藍色，次要操作採用透明背景，圓角藥丸形或小圓角。 card 深色表面搭配細微邊框與柔和陰影。 chip 用於標籤與工具的描邊或極簡背景設計。 input 深色文字區域，搭配柔和邊框與細微內陰影。 hero 大型置中文字，搭配發光藍色弧形漸層背景。 09
文案語氣與禁用清單
語氣 直接、賦予力量且具現代感。 標題風格 以問題為導向，強調行動。 按鈕文案 清晰且具指令性。 不要使用淺色背景——截圖顯示的是嚴格的深色模式介面 不要使用襯線字體——截圖顯示的是現代人文無襯線字體 不要添加厚重的陰影——截圖最多顯示細微柔和的陰影 不要使用多樣化的色彩——截圖顯示的是深灰、白色與單一鮮明藍色的嚴格配色 不要使用銳利的直角——截圖顯示的是持續一致的圓角與藥丸形狀 不要使用低對比文字——截圖顯示的是深色背景上的高對比白色文字 避免: 技術術語 避免: 正式的企業語言 避免: 過於複雜的句子 10
包內真實截圖
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 擷取自真實頁面 · 真 computed styles
11
System Prompt
Bolt.new 是一個現代化的 AI 驅動開發者工具，用於透過自然語言建構應用程式與網站。設計採用了深沉、高對比的深色模式配色，以鮮明的電光藍（#1488fc）作為唯一的高飽和度強調色。字體主要使用乾淨的人文無襯線字族，包含專用於大膽、緊湊標題的展示字型。關鍵限制：不可引入淺色背景或次要明亮色彩，避免使用襯線字體，永遠不對元件套用銳利的直角。整體佈局寬敞置中，強調乾淨、高科技且專注的使用者體驗。
更多精選 en · zh-CN · zh-TW · ja · ko
