精選 · 開放 · 免費

Algolia

一個精緻的 AI 驅動搜尋平台，在深度技術能力與易於理解、大膽的視覺傳達之間取得平衡。

01

設計氣質 DNA

一個複雜的、以開發者為核心的搜尋基礎設施，融合了深色、技術感的美學與明亮、親切的強調色。

02

色彩

以高對比度的暗色模式為基礎，搭配鮮明的主藍色強調，並使用中性的淺色表面作為內容區塊。

03

字型

humanist-sans · geometric-sans · monospace

• display56px · 700
• h240px · 700
• body16px · 400

標題使用粗體、幾何風格的無襯線字體，字距緊湊。 · 內文預設使用乾淨的幾何無襯線字體，以最大化可讀性。 · 程式碼片段使用標準的等寬字體。

04

間距

以 4px 為基礎網格，並提供寬裕的間距以確保呼吸空間。

05

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

1px solid rgb(229, 231, 235)

rgba(0, 0, 0, 0.05) 0px 1px 2px 0px · rgba(0, 61, 255, 0.12) 0px 0px 6px 2px

06

版面

最大寬度容器置中，採用 12 欄網格並設有 24px 欄間距。

07

動效與互動

按鈕與連結在懸停時，顏色與透明度進行平滑過渡。 · 互動元素採用細微的縮放或變形效果。

細微的背景顏色變化或透明度改變。 · 提供即時的視覺回饋，無厚重動畫。

08

組件

• button 實心藍色的主按鈕，採用膠囊或圓角設計，次要按鈕則為幽靈或外框樣式。
• card 簡潔的矩形卡片，帶有細微陰影或邊框，常用於展示客戶商標。
• chip 在截圖中並未明顯呈現。
• input 搜尋輸入框帶有細微邊框與放大鏡圖示。
• hero 分割式佈局，左側為粗體文字，右側為大型、深色主題的產品截圖或互動式視覺效果。

09

文案語氣與禁用清單

• 語氣 專業、自信且具技術權威感。
• 標題風格 簡短、有力且直接，常使用如「Agentic」或「Generative」等強烈形容詞。
• 按鈕文案 以行動為導向的短語，如「Explore the platform」或「Get started」。

• 不要使用純黑背景 — 網站使用深邃的午夜藍（#000033）作為替代。
• 不要為主要文字使用細、輕的字體粗細 — 網站大量採用粗體（700）或正常（400）字重。
• 不要 everywhere 使用銳利的方角 — 設計採用圓角，主要為 8px 或 12px。
• 不要使用明亮的霓虹強調色 — 主要的強調色是實心、自信的藍色（#003DFF）。
• 不要創造過於密集、擁擠的佈局 — 網站使用寬裕的間距（24px 欄間距，64px 章節間距）。
• 不要在 UI 元件上使用複雜、厚重的投影 — 陰影是細微的，主要用於柔和的抬高或發光效果。
• 避免: 避免過於隨意或俏皮的用語。
• 避免: 避免雜亂的佈局，以免模糊核心訊息。
• 避免: 避免使用無力或不具描述性的行動呼籲。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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