Claude 介面設計解析：Anthropic 如何用色彩、字體和摩擦力打造品牌定位

從產品設計負責人 Joel Lewenstein 的訪談，拆解 Claude 每一個設計決策背後的策略邏輯

設計師 Riven

2026年4月1日上午 3:53

AI 設計

1. 為什麼要分析 Claude 的介面設計？

2. 品牌定位：冷靜的協作者，不是炫技的工具

3. 色彩系統：赤陶色為什麼能脫穎而出

4. 字體選擇：襯線體背後的心理學

5. Good Friction：刻意保留的摩擦力

6. Claude vs ChatGPT vs Gemini 介面設計比較

7. 設計師可以從中學到什麼

8. 重點整理與延伸資源

打開 Claude，你會注意到一件事：它看起來跟其他 AI 聊天工具不一樣。

沒有科技感的深色漸層、沒有冷冽的藍紫色調、沒有無襯線字體的俐落感。取而代之的是米白色背景、赤陶色的品牌色、以及會讓你以為在讀書的襯線字體。

這些選擇不是設計師的個人品味，而是一套完整的品牌策略。每一個視覺決策背後，都有一個清楚的目的：讓你信任它，然後把不完美的想法交給它。

這篇文章從 Anthropic 產品設計負責人 Joel Lewenstein 的多個公開訪談、品牌設計公司 Geist 的案例研究，以及 Claude 介面的實際細節出發，拆解 Claude 每一個設計決策背後的策略邏輯。

▲ Joel Lewenstein 在 Figma Config 2025 的演講：Beyond Agents — AI as a Creative Partner

為什麼要分析 Claude 的介面設計？

2024 到 2025 年，AI 聊天工具的介面長得越來越像。白色背景、無襯線字體、藍色或紫色的品牌色、左邊一條側欄放對話歷史。ChatGPT、Gemini、Copilot、Perplexity——如果把 logo 遮起來，你很難分辨是誰。

Claude 是少數走出不同路線的產品。它的設計選擇不是為了「好看」或「有個性」，而是為了解決一個具體的產品問題：如何讓使用者願意把不完美的、模糊的、還沒成形的想法交給 AI。

這是一個設計問題，不是技術問題。而 Anthropic 的解法，是用色彩、字體、互動模式去建立一種特定的心理場域。

對設計師來說，拆解這套邏輯比學習任何 AI 工具教學都更有價值——因為它示範的是設計語言如何服務品牌定位，而不只是服務美學。

品牌定位：冷靜的協作者，不是炫技的工具

要理解 Claude 的設計，必須先理解 Anthropic 的品牌定位。

Joel Lewenstein 在 Fast Company 的訪談中說得很清楚：Anthropic 不追求大眾市場，也不在乎使用者每天花多少時間在平台上。他們感興趣的是使用者用 Claude 來「工作」和「解決生活中的問題」的那個面向。

這跟 OpenAI 走的路完全不同。OpenAI 打造 ChatGPT 的方向是成為下一個大型消費級平台——推出社群網路、圖像生成社區、甚至考慮開放 NSFW 內容。它追求的是黏性和停留時間。

Anthropic 選擇了相反的方向：Claude 不是要讓你待得更久，而是要讓你的工作做得更好。

💬 Joel Lewenstein — Prompted Podcast

我們花了很多時間思考如何訓練 Claude，讓它成為一個你真正願意對它展現脆弱的對象。開放、好奇、不評判、不簡化、不化約，能擁抱你生活和世界的複雜性。

這段話定義了 Claude 的設計方向。它的核心不是「強大」，而是「值得信任」。所有的設計決策——從色彩到字體到互動邏輯——都服務於這個目標。

▲ Geist 為 Anthropic 打造的 Claude 產品頁面，品牌調性在視覺設計中貫穿始終（圖片來源：geist.co）

負責 Anthropic 品牌識別的是波特蘭設計公司 Geist。他們從 Anthropic 還在隱身模式時就開始合作，任務是建立一個「同時傳達人文使命和技術專業」的品牌形象。Geist 形容 Anthropic 的品牌應該像一個「做挑戰者品牌的機會——安全和利他主義作為核心差異化」。

色彩系統：赤陶色為什麼能脫穎而出

Claude 的品牌主色是赤陶色（Terracotta），色碼 #da7756。搭配米白色背景和深黑色文字，形成一個極度溫暖的視覺系統。

在一個所有 AI 產品都在搶藍色和紫色的市場裡，這個選擇非常刻意。

🎨 AI 產品品牌色比較

Claude

赤陶色

ChatGPT

綠色

Gemini

藍色

Copilot

紫色

Perplexity

藍色

在藍紫色主導的 AI 市場中，赤陶色是唯一的暖色系選擇

赤陶色傳遞的訊號是：溫暖、接地、人文。它不是一個「科技色」，而是一個「文化色」——你會在義大利鄉間的陶器、日式茶道的器皿、手作工藝品上看到這個顏色。

這不是意外。Anthropic 需要 Claude 看起來不像一個冰冷的 AI 工具，而像一個有溫度的思考夥伴。在你還沒開始打字之前，赤陶色就已經在暗示：「這裡是安全的、溫暖的、不會評判你的地方」。

Geist 在案例研究中提到，他們為 Anthropic 開發了一套「能為品牌帶來溫暖，同時能處理行銷溝通和產品 UI 雙重需求」的色彩系統。這代表赤陶色不只用在行銷素材上——它滲透到產品的每一個角落。

字體選擇：襯線體背後的心理學

Claude 的字體策略分三層：

LOGO

Galaxie Copernicus

客製襯線體，溫潤書卷氣

品牌標題

Styrene B

Commercial Type，技術感但不冷硬

對話介面內文

ui-serif 字體堆疊

Georgia → Cambria → Times New Roman — 學術、溫潤的閱讀體驗

Geist 形容 Anthropic 的字體組合是「技術感精煉，又帶著迷人的古怪（technically refined and charmingly quirky）」。Styrene 處理品牌和行銷場景，Tiempos（Klim Type Foundry 出品）負責內文的閱讀體驗。

在 Claude 的聊天介面中，Logo 使用客製的 Galaxie Copernicus，對話文字則走 ui-serif 字體堆疊。有一個很有趣的細節：Anthropic 的開發者文件甚至建議避免使用 Arial 和 Inter，理由是這些字體太泛濫，會讓介面產生「廉價 AI 感」。

襯線字體在心理上傳遞的訊號是：學術、深思熟慮、有份量。它讓你覺得 Claude 說出的每一句話，都經過了認真的思考——就像讀一本好書的體驗，而不是掃過一條推播通知。

這背後的設計洞察是：字體影響的不只是可讀性，還有使用者對內容品質的感知。同樣的回答，用 Inter 呈現和用 Georgia 呈現，使用者的信任程度是不一樣的。

▲ Anthropic 品牌視覺系統：排版、色彩和插畫語言的統一應用（圖片來源：geist.co）

Good Friction：刻意保留的摩擦力

這是我在研究 Claude 設計哲學時，覺得最有價值的觀點。

過去二十年，產品設計的主流思維就是一件事：消滅摩擦力。讓使用者用最少的步驟完成任務、讓介面盡可能不需要思考。從 Steve Krug 的《Don't Make Me Think》開始，「減少摩擦」幾乎成了 UX 設計的教條。

但 Joel Lewenstein 在 Prompted Podcast 中提出了一個反直覺的概念：Good Friction（好的摩擦力）。

💬 Good Friction 的核心概念

當你面對的是「協作者」而不是「工具」，消滅摩擦力反而不是最佳解。面對協作者，你反而需要保留好的摩擦力。

想像兩種場景：

工具模式（零摩擦）

你說：「幫我寫一封離職信」

AI 立刻產出一封完美的離職信。快、直接、零摩擦。但可能完全不符合你的情況。

協作者模式（好的摩擦力）

你說：「幫我寫一封離職信」

AI 先問你：離職原因？想保持什麼語氣？跟主管的關係？然後才動手。

第二種方式比較慢、步驟比較多，但產出的結果通常更好——因為它確保了 AI 理解你真正想要什麼。

這就是 Claude 的 Plan Mode 背後的設計邏輯。當你丟出一個複雜任務，Claude 不會立刻衝去執行，而是先跟你核對計畫、確認方向，然後再開始做。這個「多出來的步驟」就是 Good Friction。

Joel 在現實生活中用了一個比喻：我們跟人類協作時，也不會希望對方不問任何問題就直接開幹。一個好的設計師在接到 brief 之後，會先釐清需求、確認方向，然後才開始畫圖。Claude 的互動設計模仿的就是這種協作關係，而不是「你說什麼我做什麼」的工具關係。

Claude vs ChatGPT vs Gemini 介面設計比較

把三個主流 AI 產品的設計語言攤開來比較，你會發現每一個視覺差異都對應著不同的品牌策略：

	Claude	ChatGPT	Gemini
品牌色	赤陶色（暖）	綠色（理性）	藍色漸層（科技）
背景色	米白 / 奶油色	純白	純白
字體類型	襯線體	無襯線體	Google Sans
品牌調性	學者、思考夥伴	萬能助理	Google 生態系延伸
設計策略	差異化 + 信任	效率 + 多功能	生態整合
對摩擦力的態度	保留好的摩擦力	盡量消除	盡量消除