精選 · 開放 · 免費
Qatalog
一個企業級的 AI 工作空間,能消除工作分散問題並統一生產力。
SaaSProductivityAICleanTooling
01
設計氣質 DNA
AIProductivityWorkspaceEnterpriseUnified
一個為現代團隊打造的 AI 驅動指揮中心,整合了工具與資訊。
02
色彩
#5D5D85Accent
#292D34Ink
#646464Ink soft
#FFFFFFBG
#F0F0F0BG quiet
#838383Muted
rgba(41, 45, 52, 0.1)Line
以乾淨、高對比的白色為基底,搭配中性灰與單一紫色點綴,呈現優質、專注的美學感受。
03
字型
humanist-sans · monospace
- display
60px · 700 - headline
18px · 500 - body
16px · 400 - caption
14px · 400
展示標題使用緊湊的字距和粗體字重,以傳達權威感。 · 內文則保持舒適的行高,確保閱讀性。 · 等寬字體僅保留給特定的技術標籤或程式碼元素。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
透過 4px 的倍數,建立一致的垂直與水平節奏。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 30px
使用細微的 1px 淺灰色邊框,來定義卡片邊緣與容器。
0px 4px 12px rgba(0, 0, 0, 0.08)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
響應式佈局,從桌面版的多欄網格轉換至移動版的單欄堆疊。
07
動效與互動
200msmicro
250mssmall
800msmedium
cubic-bezier(0.5, 0, 0.5, 1)easing
互動元素上有細微的 opacity 和 transform 轉場效果。 · UI 狀態變化時使用流暢的緩動效果。
透過背景色或文字字重的細微變化來指示可互動性。 · 透過顏色變化或輕微縮放提供即時的視覺反饋。
08
組件
- button 主要按鈕採用高對比、圓角膠囊造型,次要按鈕則使用較淺的背景色。
- card 卡片以細微邊框和充足的內部邊距來定義,偶爾會搭配柔和的漸層或背景圖片。
- chip 小型、圓角的標籤或標記,用於狀態更新或分類標示。
- input 搜尋欄具有明顯的圓角和整合式圖示。
- hero 大面積、文字量較多的區塊,搭配動態的 AI 主題插圖或產品模型展示。
09
文案語氣與禁用清單
- 語氣 自信、專業且具前瞻性。
- 標題風格 清晰、強調效益的陳述,著重於 AI 整合與統一工作。
- 按鈕文案 直接且以行動為導向,聚焦於開始免費旅程或取得展示。
- 勿使用深色主題作為主要模式——截圖顯示的是淺色主題搭配深色文字。
- 勿使用裝飾性的襯線字體——截圖中整體使用的是人文主義無襯線字體。
- 勿使用高飽和度或霓虹色作為主要強調色——截圖顯示的是以紫色為點綴的克制色盤。
- 勿在主要按鈕上使用銳利的方形圓角——截圖顯示的是圓角膠囊造型。
- 勿使用過多的陰影或厚重的 3D 效果——截圖顯示的是乾淨、平面或帶有細微邊框的表面。
- 勿在移動裝置上使用複雜的多欄網格——截圖顯示在較小螢幕上採用單欄堆疊。
- 避免: 過於技術性的術語
- 避免: 被動語態
- 避免: 泛用的企業流行語
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
一款為企業生產力設計的優質 AI 工作空間工具,採用簡潔的淺色主題,以白色 (#FFFFFF) 和中性灰 (#292D34, #646464) 為基底。字體採用 humanist-sans,展示標題使用緊湊字距。紫色 (#5D5D85) 作為主要強調色。佈局為響應式 12 欄網格。關鍵注意事項:避免使用深色主題、避免使用襯線字體、避免使用霓虹色、避免使用方形按鈕、避免使用厚重陰影、避免使用複雜的移動版網格。
en · zh-CN · zh-TW · ja · ko