精選 · 開放 · 免費

Sierra

一個成熟的 AI 代理人平台，運用溫暖的編輯式攝影，讓複雜科技顯得人性化且值得信賴。

01

設計氣質 DNA

一個高端的 AI 代理人諮詢服務，在技術深度與平易近人、以人為本的敘事之間取得平衡。

02

色彩

溫暖中性色：一個以暖灰色和大地色調為基礎的配色方案，依靠高品質攝影來創造視覺趣味，而非使用合成的強調色。

03

字型

grotesque-sans · monospace

• display56px · 500
• headline44px · 400
• subhead24px · 400
• body16px · 400
• caption14px · 400

為大型展示文字使用緊湊的字距調整 (-1.3px 至 -0.38px)，以營造精緻的編輯感。 · 幾乎所有文字皆保持嚴格的 400 字重；僅在特定強調時非常謹慎地使用 500 字重。 · 確保內文有寬裕的行高 (1.4-1.5) 以維持可讀性。

04

間距

寬裕且結構化，主要區塊使用較大的 padding (80px)，內部間距則採用一致的 8/16/24px 遞增，以創造乾淨、有呼吸感的佈局。

05

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

1px solid rgb(228, 224, 220)

0px 28px 34px 0px rgba(15, 79, 138, 0.15) · 0px 75px 63px 0px rgba(15, 79, 138, 0.15)

06

版面

一個置中、回應式的佈局，帶有最大寬度容器，從全版出血的編輯式首頁主視覺，過渡到結構化的多欄 UI，用於儀表板等。

07

動效與互動

色彩、background-color 與 opacity 的標準過渡效果 (0.25s) · 較複雜的屬性（如 filter）使用稍長的過渡時間 (0.5s) · 互動元素使用細微的變換效果

互動元素（如按鈕與導覽連結）的色彩與背景平滑過渡。 · 主要 CTA 進行細微的變換 (scale/translate) 或透明度變化。

08

組件

• button 藥丸形 (999px radius)，白色背景搭配深色墨色文字，或使用細微的外框表示次要操作。
• card 乾淨的容器，具有 16px border-radius 與柔和背景上的細微 1px 邊框。
• chip 簡約，通常僅使用文字搭配細微的背景或邊框處理。
• input 乾淨的輸入欄位，帶有細微邊框，常伴有小圖示及 4px/8px 的內部 padding。
• hero 全視口、攝影背景，搭配大型、靠左對齊的展示字型排印，以及一個高對比的藥丸形 CTA 按鈕。

09

文案語氣與禁用清單

• 語氣 自信、清晰且平易近人。
• 標題風格 簡短、具衝擊力的陳述，清晰闡明價值主張。
• 按鈕文案 直接且以行動為導向，通常使用單一的「進一步了解」或「登入」。

• 勿使用鮮豔的合成強調色——截圖顯示配色方案以暖灰色與大地攝影色調為基礎。
• 勿將大型標題設為寬鬆的字距——截圖顯示緊湊的字距調整 (例如 -1.3px) 以營造精緻的編輯感。
• 勿為內文字型使用厚重的字重——截圖顯示幾乎僅使用 400 字重。
• 勿在 UI 中使用厚重的陰影或邊框使其雜亂——截圖顯示細微的 1px 邊框與極簡的陰影使用。
• 勿在按鈕上使用銳利的幾何形 border-radius——截圖顯示完全圓潤的藥丸形 (999px)。
• 勿依賴顏色作為 UI 的主要強調方式——截圖顯示依賴字型層級與間距。
• 避免: 缺乏脈絡的行話
• 避免: 侵略性或過度熱情的行銷用語
• 避免: 分散核心訊息的雜亂 UI
• 避免: 高對比的霓虹或合成強調色

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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