精選 · 開放 · 免費

n8n

一個採用深色主題的開發者工具登陸頁，使用高對比橙色強調色與簡潔的無襯線字體，來呈現 AI 工作流程。

01

設計氣質 DNA

如同用於連接 API 與 AI 的 IDE，風格彷彿高端開發者工具。

02

色彩

高對比深色 UI，搭配鮮明的橙色焦點，並嚴格限制輔助色彩。

03

字型

geometric-sans · monospace

• display56px · 600
• h240px · 600
• body-lg20px · 400
• body16px · 400
• caption12px · 600

所有字體均使用幾何無襯線字族 (Geomanist)。 · 標題採用緊湊的字距 (-1px) 與半粗體字重。 · 內文字重維持 400 以確保可讀性。

04

間距

標準 4px 基礎網格，主要區塊搭配寬裕的內距 (48px)。

05

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

1px solid rgba(111,111,111,0.3)

0px 1px 0px 0px inset rgba(255,142,93,0.3) · 0px 0px 0px 1px inset rgba(255,255,255,0.1) · 1px 2px 8px 0px rgba(0,0,0,0.35)

06

版面

標準最大寬度容器，內容置中，主標題文字左對齊。

07

動效與互動

hover 時，顏色與背景色進行流暢過渡 (0.2s)。 · 互動狀態變化時，採用 transform 與 opacity 的過渡動畫 (0.3s)。 · 所有 UI 元素的狀態變化均使用細微的緩動效果。

流暢的顏色與背景過渡，按鈕可搭配細微的縮放或位移。 · 透過背景色變化或透明度提供視覺回饋。

08

組件

• button 主要操作按鈕採用實心橙色 (#ee4f27)，次要按鈕採用深色描邊，圓角膠囊造型。
• card 深色背景，搭配微妙的邊框與 box-shadow 以增加深度感。
• chip 未特別突出，但勾選指示器採用簡潔、極簡的風格。
• input 深色背景，搭配細微邊框。
• hero 大型置中標題，兩個 CTA 按鈕，以及一個顯眼的 3D 圖形。

09

文案語氣與禁用清單

• 語氣 直接、專業，並聚焦於開發者。
• 標題風格 簡潔、以行動為導向的陳述（例如：「快速前進，無所破壞。」）。
• 按鈕文案 清晰直接的行動呼籲（「免費開始使用」、「聯繫銷售團隊」）。

• 不要使用俏皮或圓潤的字體——截圖顯示的是簡潔的幾何無襯線字體。
• 不要使用淺色背景——截圖顯示的是深海軍藍 (#0e0918) 背景。
• 不要使用多種高飽和度顏色——截圖僅使用橙色作為唯一的主導強調色。
• 不要使用複雜或雜亂的背景圖案——截圖使用簡潔的深色漸層與微妙的放射狀光暈。
• 不要在標題中使用寬鬆、空靈的字距——截圖顯示的是緊湊、緊密的字距。
• 不要使用厚重的投影——截圖使用細微的內陰影與細邊框來營造深度感。
• 避免: 過度休閒或俏皮的語言。
• 避免: 與工作流程自動化無關的過多術語。
• 避免: 雜亂或混亂的佈局。
• 避免: 明亮、多彩的調色板。
• 避免: 厚重、裝飾性的襯線字體。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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