精選 · 開放 · 免費

Qatalog

一個企業級的 AI 工作空間，能消除工作分散問題並統一生產力。

01

設計氣質 DNA

一個為現代團隊打造的 AI 驅動指揮中心，整合了工具與資訊。

02

色彩

以乾淨、高對比的白色為基底，搭配中性灰與單一紫色點綴，呈現優質、專注的美學感受。

03

字型

humanist-sans · monospace

• display60px · 700
• headline18px · 500
• body16px · 400
• caption14px · 400

展示標題使用緊湊的字距和粗體字重，以傳達權威感。 · 內文則保持舒適的行高，確保閱讀性。 · 等寬字體僅保留給特定的技術標籤或程式碼元素。

04

間距

透過 4px 的倍數，建立一致的垂直與水平節奏。

05

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

使用細微的 1px 淺灰色邊框，來定義卡片邊緣與容器。

0px 4px 12px rgba(0, 0, 0, 0.08)

06

版面

響應式佈局，從桌面版的多欄網格轉換至移動版的單欄堆疊。

07

動效與互動

互動元素上有細微的 opacity 和 transform 轉場效果。 · UI 狀態變化時使用流暢的緩動效果。

透過背景色或文字字重的細微變化來指示可互動性。 · 透過顏色變化或輕微縮放提供即時的視覺反饋。

08

組件

• button 主要按鈕採用高對比、圓角膠囊造型，次要按鈕則使用較淺的背景色。
• card 卡片以細微邊框和充足的內部邊距來定義，偶爾會搭配柔和的漸層或背景圖片。
• chip 小型、圓角的標籤或標記，用於狀態更新或分類標示。
• input 搜尋欄具有明顯的圓角和整合式圖示。
• hero 大面積、文字量較多的區塊，搭配動態的 AI 主題插圖或產品模型展示。

09

文案語氣與禁用清單

• 語氣 自信、專業且具前瞻性。
• 標題風格 清晰、強調效益的陳述，著重於 AI 整合與統一工作。
• 按鈕文案 直接且以行動為導向，聚焦於開始免費旅程或取得展示。

• 勿使用深色主題作為主要模式——截圖顯示的是淺色主題搭配深色文字。
• 勿使用裝飾性的襯線字體——截圖中整體使用的是人文主義無襯線字體。
• 勿使用高飽和度或霓虹色作為主要強調色——截圖顯示的是以紫色為點綴的克制色盤。
• 勿在主要按鈕上使用銳利的方形圓角——截圖顯示的是圓角膠囊造型。
• 勿使用過多的陰影或厚重的 3D 效果——截圖顯示的是乾淨、平面或帶有細微邊框的表面。
• 勿在移動裝置上使用複雜的多欄網格——截圖顯示在較小螢幕上採用單欄堆疊。
• 避免: 過於技術性的術語
• 避免: 被動語態
• 避免: 泛用的企業流行語

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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