---
title: "Claude 介面設計解析：Anthropic 如何用色彩、字體和摩擦力打造品牌定位"
slug: claude-interface-design-philosophy
url: https://rar.design/posts/claude-interface-design-philosophy
published_at: 2026-04-01
modified_at: 2026-04-01
author: "設計師 Riven"
category: "AI 設計"
tags: ["Claude"]
access: public_access
---

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

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

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-04-01

目錄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 的字體策略分三層：LOGOGalaxie Copernicus客製襯線體，溫潤書卷氣品牌標題Styrene BCommercial 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 產品的設計語言攤開來比較，你會發現每一個視覺差異都對應著不同的品牌策略： ClaudeChatGPTGemini品牌色赤陶色（暖）綠色（理性）藍色漸層（科技）背景色米白 / 奶油色純白純白字體類型襯線體無襯線體Google Sans品牌調性學者、思考夥伴萬能助理Google 生態系延伸設計策略差異化 + 信任效率 + 多功能生態整合對摩擦力的態度保留好的摩擦力盡量消除盡量消除ChatGPT 的設計語言說的是「我什麼都能做，而且很快」。Gemini 說的是「我是 Google 家族的一員，跟你現有的工具無縫銜接」。而 Claude 說的是：「坐下來，我們慢慢想」。三種策略沒有對錯，但它們各自吸引的是不同心態的使用者。Claude 用設計語言篩選出的，是那些重視「思考品質」多於「產出速度」的人。▲ Anthropic 品牌攝影風格：強調人文氛圍，遠離科技公司慣用的冷調視覺（圖片來源：geist.co）設計師可以從中學到什麼Claude 的設計案例不只是一個 AI 產品的介面分析，它示範了幾個設計師在任何專案中都能應用的思維框架：一、設計語言必須服務品牌定位，而非追隨趨勢「大家都在用藍色，那我們也用藍色」是設計師最常掉進的陷阱。Claude 用赤陶色不是為了標新立異，而是因為它服務於「溫暖、信任、人文」的品牌定位。在做色彩決策時，問自己的不該是「什麼色最流行」，而是「什麼色最能傳達我的品牌想說的話」。二、UX 教條不是絕對真理「消滅摩擦力」在大多數場景下是對的，但 Claude 證明了：在特定定位下，刻意保留好的摩擦力反而能創造更好的體驗。下次在做設計決策時，不要自動套用 best practice——先問自己，這個 best practice 的前提條件，跟你的產品情境是否一致。三、視覺設計影響的不只是外觀，還有互動邏輯色彩、字體、排版不只是「好不好看」的問題。它們會直接影響使用者的心理狀態，進而改變人們跟產品互動的方式。Claude 的米白背景和襯線字體讓人下意識放慢閱讀速度，這正是 Anthropic 想要的效果。四、在競爭激烈的市場中，反向操作可能是最好的差異化當所有人都往同一個方向走，往反方向走反而更容易被看到。Claude 在一個被藍紫色和無襯線體主導的市場中，選擇了赤陶色和襯線體——結果是它成為了最容易被辨識的 AI 介面。重點整理與延伸資源📝 重點整理→Claude 從第一天就定位為「冷靜、誠實的協作者」，這個定位決定了所有設計語言→赤陶色 + 米白背景 = 溫暖、接地、人文，刻意遠離科技產品的冷色調標配→襯線字體傳遞「深思熟慮、學術嚴謹」，讓 AI 的回應讀起來更像思考後的建議→Good Friction 打破了「消滅摩擦力」的 UX 教條，用 Plan Mode 先核對計畫再執行→設計語言的終極目標是建立「安全場域」——讓使用者願意把不完美的想法交出來→在競爭激烈的市場中，設計語言必須服務品牌定位，反向操作可能是最好的差異化🔗 延伸資源Config 2025 — Beyond Agents: AI as a Creative Partner（Joel Lewenstein 演講）Prompted Podcast — The Hidden Design Choices Behind ClaudeDive Club — Joel Lewenstein: Pursuing Ambitious Design IdeasGeist — Anthropic 品牌設計案例Fast Company — Anthropic has never been more different than OpenAI線上課程 ✨ UI/UX 設計想做出像 Claude 一樣有策略的介面設計？好的設計不只是好看——它服務於品牌定位、使用者心理和商業目標。從 Figma 開始，打好介面設計的基本功。了解 Figma 課程 →訂閱制 ✨ AI × 設計趨勢AI 設計覺醒｜RAR 設計攻略訂閱方案AI 工具每週都在更新，我幫你過濾雜訊，只整理對設計師真正有用的 AI 應用。✦ AI 工具實測與工作流分享✦ 設計師角度的 Prompt 技巧✦ 每週精選 AI × 設計新知了解訂閱方案 →