精選 · 開放 · 免費

StackBlitz

StackBlitz 是一個基於瀏覽器的雲端IDE，為現代網路團隊帶來閃電般快速、安全的開發環境。

01

設計氣質 DNA

一個用於瀏覽器基礎開發的高性能引擎。

02

色彩

高對比暗色UI，強調速度與專注，並以單一鮮明的藍色作為強調。

03

字型

humanist-sans · monospace

• display94px · 700
• heading40px · 700
• body16px · 400
• small13px · 500

使用 Manrope 作為大型展示字體，Inter 作為內文/介面字體。 · 為標題保持緊湊的字間距，以營造密集、高衝擊力的感受。 · 任何技術或程式碼相關的片段使用 Roboto Mono。

04

間距

主要區塊間有寬裕的間距，UI元件內部則使用緊湊的填充。

05

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

1px solid rgba(255, 255, 255, 0.12)

rgba(0, 0, 0, 0.32) 0px 4px 8px 0px · rgba(255, 255, 255, 0.1) 0px 0px 0px 1px · rgba(0, 0, 0, 0.3) 0px 0px 0px 1px inset

06

版面

標準的高端行銷網站佈局，包含全寬暗色主視覺區塊、中央內容欄位，以及並排的比較網格。

07

動效與互動

平滑的淡入淡出與滑動過渡，用於內容呈現。 · 彈性/伸縮過渡，用於UI狀態變化。

互動元素上的細微色彩或透明度變化。 · 透過狀態變化提供即時回饋。

08

組件

• button 實心藍色主要按鈕，白色文字，採用藥丸形或大圓角設計；具有細微的懸停狀態。
• card 帶有細微邊框的暗色介面，常用於數據或功能比較。
• chip 用於資料表格中的狀態指示器或小型標籤。
• input 極簡的暗色輸入框，帶有細微的內嵌陰影和細邊框。
• hero 大規模、字體導向的主視覺區塊，具有粗體背景漸層和淡雅、線框風格的UI插圖。

09

文案語氣與禁用清單

• 語氣 自信、技術性且直接。
• 標題風格 粗體、以效益為導向，並經常使用大規模字體來強調關鍵字。
• 按鈕文案 簡單、以行動為導向的標籤，例如「試用 Bolt.new」。

• 勿使用白色背景 — 截圖顯示為深色、近乎黑色的主要背景。
• 勿使用襯線字體 — 截圖顯示為乾淨、現代的無襯線字體排版。
• 勿使用多個互相競爭的強調色 — 截圖顯示為單一主導的藍色強調。
• 勿為主要按鈕使用大圓角 — 截圖顯示為矩形或略微圓角的按鈕。
• 勿使用細、淺色的外框作為焦點狀態 — 截圖使用高對比的白色或藍色邊框。
• 勿使用過於複雜的漸層 — 截圖使用微妙的、從暗到更暗的漸層或純色暗色介面。
• 避免: 模糊的行銷術語
• 避免: 未清楚說明效益、過於複雜的技術解釋
• 避免: 被動語氣

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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