精選 · 開放 · 免費

Windsurf

從單一介面管理本地與雲端代理機隊。

01

設計氣質 DNA

管理多個 AI 程式碼代理機隊的指揮中心。

02

色彩

以乾淨的白色畫布為基底，搭配高對比的墨色，並使用單一鮮明的藍色作為主要操作的強調色。

03

字型

geometric-sans · humanist-sans · monospace

• display56px · 500
• heading40px · 500
• body-lg20px · 400
• body16px · 400
• caption13px · 400

使用幾何無襯線字體作為標題，傳達現代技術精確感。 · 使用人文主義無襯線字體作為內文，以維持高度可讀性。 · 對於技術術語、程式碼片段或 UI 狀態指示器，使用等寬字體。 · 對大型標題文字保持緊湊的字距（-1.5px），以創造強烈的視覺區塊。

04

間距

基於 4px 網格的一致垂直節奏，主視覺區塊留有充裕的空白。

05

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

1px solid rgba(0,0,0,0.1)

rgba(0,0,0,0.05) 0px 1px 2px 0px · rgba(0,0,0,0.1) 0px 2px 6px -2px · rgba(0,0,0,0.1) 0px 10px 15px -3px

06

版面

全寬的主視覺區塊，後接受控的內容區塊。

07

動效與互動

hover 狀態時細膩的 opacity 與 background-color 過渡效果。 · 選單或抽屜開啟與關閉時的平滑過渡。

按鈕與互動元素在 hover 時有細微的 background-color 或 opacity 變化。 · 透過輕微的 scale 縮放或 opacity 降低提供即時的視覺回饋。

08

組件

• button 實心主按鈕（藍色背景、白色文字）、次要按鈕（白色背景、黑色文字、細微邊框）、幽靈按鈕（僅文字）。所有按鈕皆帶有輕微的 border-radius。
• card 白色背景搭配細微的 1px 邊框或柔和陰影，用於容納結構化資料或見證文字。
• chip 帶有 1px 邊框的淺灰色背景（rgba(0,0,0,0.06)），用於標籤與篩選器。
• input 白色背景搭配 1px 邊框、圓角，並有清晰的佔位符文字。
• hero 在乾淨的白色背景上使用大型字體，並搭配顯著的號召性用語按鈕。

09

文案語氣與禁用清單

• 語氣 專業、技術且直接，專注於效率與控制力。
• 標題風格 大型、粗體且簡潔，技術術語常使用等寬字體。
• 按鈕文案 以行動為導向且清晰，例如「Download for MacOS」或「Try Devin」。

• 不要使用多種爭相突出的鮮豔色彩——截圖顯示的是以白色、黑色與單一藍色強調色組成的內斂色板。
• 不要使用裝飾性的襯線字體作為標題——截圖顯示所有標題皆採用乾淨的幾何無襯線字體。
• 不要使用厚重的 box-shadow 或 3D 效果——截圖顯示的是細微、柔和且幾乎難以察覺的陰影。
• 不要使用擁擠、緊湊的佈局——截圖顯示所有主要內容區塊周圍皆有充裕的空白。
• 不要使用小且難以閱讀的詮釋資料文字——截圖顯示的是 13-16px 大小且行高清晰的文字。
• 不要將所有容器都做成圓角膠囊形狀——截圖顯示主要是細微的 4-10px 圓角。
• 避免: 模糊的行銷術語
• 避免: 過於俏皮或隨意的語言
• 避免: 複雜的句子結構

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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