精選 · 開放 · 免費
Zed
一個高性能的程式碼編輯器登陸頁面，融合工業級的精準度與精緻的編輯清晰度。
devtoolseditor
01
設計氣質 DNA
速度簡約協作編輯器rust開發者
精密工程的德國汽車介面與現代極簡主義的結合
02
色彩
#1D4ED8Accent
#222B35Ink
#4E5E63Ink soft
#FAFBFCBG
#F0F2F4BG soft
#E6E9EDBG quiet
#A9AFC0Muted
rgba(169,175,188,0.3)Line
高對比度的功能性調色盤，以單一主導的藍色作為主要操作色，並以冷色調中性灰作為基底
03
字型
geometric-sans · monospace
- hero
64px · 700 - h1
48px · 700 - h2
24px · 700 - body
16px · 400 - small
14px · 400 - mono
14px · 400
大型展示文字使用緊湊的字間距 · 內文維持充裕的行高以確保可讀性 · 程式碼區塊與技術內容專門使用等寬字體
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
128px
8px 格線系統，搭配充裕的留白以創造呼吸空間
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(169,175,188,0.3)
0 1px 3px rgba(0,0,0,0.1) · 0 4px 6px -4px rgba(0,0,0,0.1) · 0 10px 15px -3px rgba(0,0,0,0.1) · 0 1px 3px 0 rgba(230,239,254,1)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中的單欄佈局，擁有充裕的內距與清晰的視覺階層
07
動效與互動
100msmicro
150mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
懸停時的細微縮放與位移變換 · 互動元素上的平滑顏色過渡 · 內容顯現時的輕柔淡入
細微上浮，伴隨陰影增強與輕微的顏色變化 · 即時的視覺回饋，帶有縮放變換
08
組件
- button 主要按鈕：實心藍色填充搭配白色文字；次要按鈕：外框式，灰色邊框搭配深色文字；兩者皆帶有細微的懸停陰影
- card 淺灰色背景，帶有細微邊框、清晰的字體排版與極簡的裝飾元素
- chip 用於標籤與中繼資料的小型行內元素，背景為淺灰色
- input 邊框清晰的輸入框，聚焦時帶有細微陰影
- hero 大型的置中標題，搭配輔助文字、雙行動按鈕，以及細微的漸層背景
09
文案語氣與禁用清單
- 語氣 自信、技術導向且平易近人
- 標題風格 清晰、簡潔的陳述，強調效能與開發者體驗
- 按鈕文案 直接、以行動為導向的語言，帶有明確的價值主張
- 避免使用過度的顏色對比——畫面截圖顯示了受控的藍色強調色與中性灰的搭配
- 避免將深色模式作為主要模式——畫面截圖顯示了帶有細微質感的淺色主題
- 避免使用裝飾性插圖——畫面截圖顯示了以清晰字體排版為主的設計
- 避免添加不必要的邊框或分隔線——畫面截圖顯示了透過留白實現的清晰區隔
- 避免使用複雜的動畫——畫面截圖顯示了極簡的動態設計
- 避免過度填滿介面——畫面截圖顯示了充裕的間距與呼吸空間
- 避免: 過於隨意或俏皮的語言
- 避免: 缺乏上下文的技術術語
- 避免: 行銷用語或誇飾詞
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（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
這是一個名為 Zed 的高性能程式碼編輯器登陸頁面，目標使用者是重視速度與簡約的開發者。設計採用精緻的幾何無襯線字體系統，標題使用緊湊的字間距，並以充裕的留白確保可讀性。主要操作使用醒目的藍色（#1D4ED8）作為強調色，與冷色調中性灰（#FAFBFC 背景，#222B35 文字）形成對比。關鍵設計原則包括：無任何會分散核心訊息注意力的裝飾元素、嚴格遵循基於格線的佈局，並全程保持視覺上的克制。介面強調清晰度勝過裝飾，等寬字體僅保留給與程式碼相關的內容。
en · zh-CN · zh-TW · ja · ko