讓 Claude 做出有故事的配色：一張照片、5 個地名、5 句故事，色票不再只有色號

你叫 AI 配色，它是不是只丟給你五個色號？顏色沒有錯，但看完就忘。問題不在 AI，是你沒給它東西看。這篇用 Claude Design 做了一組「台南老街的夏天」配色：顏色從照片裡取出來，每個顏色有一個台南地名、一句故事，最後配好字體，套上海報和帆布袋。下面每一張圖都是我們實際做出來的：照片由 ChatGPT 生成，色票、字體頁、海報和帆布袋由 Claude Design 生成。

01先打開 Claude Design（1 分鐘）

到 claude.ai/design，用你的 Claude 帳號登入。官方說 Claude Design 每個方案都能用，包括免費方案。
也可以直接在一般的 Claude 對話裡用 Claude Design。claude.ai/design 這個獨立網站開放到 2026 年 12 月 14 日。
新建一個專案。我們選的是「Color + type pairing」模板。

Claude Design — 免費方案也能用

02第 1 步：先看 Pinterest，寫下好的色票「好在哪」

不要一打開就叫 Claude 配色。先花 5 分鐘看別人怎麼做。到 Pinterest 搜「color palette from photo」，挑 3 到 5 張你喜歡的。

我們看完，整理出好看的色票有 4 個共同點：

色票直接疊在照片上，看得出每個顏色是從哪裡來的。
4 到 6 個顏色就好。每個顏色名字大、色號小。
名字來自那個地方，不是來自顏色本身。不叫「橘色」，叫某條街、某個角落。
名字用襯線體或有個性的字，色號用等寬字，畫面上沒有多餘的東西。

03第 2 步：用 ChatGPT 先生一張照片

Claude 配色會「憑空想」，是因為它沒有東西可以看。所以先在 ChatGPT 生一張照片，裡面放好你想要的顏色。我們的主題是台南老街的夏天，照片裡有紅磚牆、一碗芒果冰、白色老屋、榕樹，還有傍晚的運河。

照片提示詞範本（把［］換成你的）

生一張［地方＋季節＋時間，例如 台南老街的夏天傍晚］的街景照片，直式。
畫面裡要有：［3 到 5 個有顏色的東西，例如 紅磚牆、一碗芒果冰、白色老屋、榕樹、遠處的運河］。
暖色光線，像真的照片。不要文字，不要人物。

ChatGPT 生成的台南老街夏天傍晚照片：紅磚牆、冰店的芒果冰、白牆老屋、榕樹和巷底的運河 — 我們用 ChatGPT 生的照片：紅磚牆、芒果冰、白牆、榕樹和運河都在畫面裡。

04第 3 步：附上照片，叫 Claude 從照片裡取色

在 Claude Design 的專案裡附上剛剛那張照片。
貼上下面的 prompt，把［］換成你的。
送出，等它做完整個專案。

配色提示詞（把［］換成你的）

用我附的照片做一組配色「［主題］」。參考方向：色票直接疊在照片上、從照片裡真的取出來；每個顏色用一個當地地名命名，附 HEX 和一句故事；再搭一組中英文字體，做一張海報和一個帆布袋。全部繁體中文。

我們拿到的第一頁就是這張：5 張色票直接疊在原本的照片上。

Claude Design 做的色票頁：5 張色票疊在台南老街照片上，每張有編號、HEX、地名和一句故事 — Claude Design 做出的色票頁：5 個顏色、5 個台南地名、5 句故事，疊在原本那張照片上。

色票放在照片上，一眼就能對照：安平運河晚藍的旁邊，就是巷子盡頭傍晚的運河。

05 安平運河晚藍 #2C4566 色票，旁邊是照片裡傍晚的運河和漁船 — 05 安平運河晚藍 #2C4566，旁邊就是照片裡的運河。

05第 4 步：每個顏色一個地名、一句故事

這一步就是「有故事」和「只有色號」的差別。Claude 給每個顏色一個台南的名字，再寫一句像在地人會說的話：

01 神農街磚牆紅 #B5552E：磚牆把整個下午的太陽存了起來。
02 正興街芒果黃 #EBA021：排了半小時的冰，化在第三口。
03 老屋灰泥白 #E8DFCF：石灰剝落處，藏著百年的雨。
04 安平樹屋榕綠 #3E5A2C：氣根垂到地面，夏天就慢了下來。
05 安平運河晚藍 #2C4566：漁船回港時，天和水同一個顏色。

5 張色票特寫：粗襯線體的地名、等寬字的 HEX 和一行故事 — 名字用粗襯線體，色號用小小的等寬字，故事一行就講完。

名字一定要自己檢查一次。第 3 個顏色，Claude 一開始取名「孔廟灰泥白」。但台南孔廟出名的是紅牆，照片裡也沒有孔廟，在地人一看就會覺得怪。我們用一句話請它改名，故事不用動，帆布袋上的地名也跟著改。

改名提示詞（把［］換成你的）

把第［3］個顏色改名為「［新名字］」，故事不變。海報和帆布袋上的地名也一起改。

06第 5 步：配字體，套上海報和帆布袋

同一個專案裡，Claude 也排好了字體頁：中文標題用思源宋體 Black，英文用 Instrument Serif 斜體，內文用思源宋體 Regular，色碼用 IBM Plex Mono。

字體搭配頁：思源宋體 Black 標題「台南老街的夏天」、Instrument Serif 斜體英文、內文和 5 個色碼 — 字體頁：宋體配英文斜體，色碼用等寬字，底色就是 05 安平運河晚藍。

再來是海報。標題「台南老街」用老屋灰泥白，「的夏天」用正興街芒果黃。2026 旁邊那條細線，就是 5 個顏色依序排開。

海報：台南老街照片當底，標題「台南老街的夏天」，英文副標和 2026，下方是 5 色色條 — 海報直接用那張照片當底，下方色條就是這組配色。

海報和深藍色帆布袋並排，帆布袋上有標題和色條 — 海報和帆布袋放在一起：帆布袋換成運河晚藍底，一樣看得出是同一組。

07做好之後：修改和匯出

哪裡不滿意，就用一句話講清楚「哪一頁、改什麼」，並說其他頁不要動。
官方列出的匯出方式有 PDF、PPTX、獨立 HTML，也可以送到 Canva 繼續編輯。
要放 IG，可以送到 Canva 再下載成圖片，或直接截圖。

只改一頁的提示詞（把［］換成你的）

只改「［海報］」這一頁：［把英文副標放大一點］。色票和其他頁都不要動。

08要注意

「台南老街的夏天」是我們示範用的主題。照片由 ChatGPT 生成，不是真實街景；色票、故事、字體頁、海報和帆布袋由 Claude Design 生成。
顏色拿來放文字之前，先算對比。這組配色裡，白配藍 7.39:1、白配綠 5.88:1，小字也看得清楚；01 磚牆紅上的白字只有 3.69:1，比較適合大標題；芒果黃配藍 4.46:1，差一點才到小字建議的 4.5:1。可以用 WebAIM 的 Contrast Checker 免費算。
HEX 是螢幕用的顏色。要印海報或帆布袋，請印刷廠用 CMYK 或特別色打樣，先看實體色票再印；芒果黃這種很亮的顏色，印出來可能會比螢幕暗。
帆布袋的顏色還會受布料底色和印法影響，量產前先做一個樣品。
字體要確認能商用。思源宋體（Noto Serif TC）、Instrument Serif、IBM Plex Mono 都是 SIL OFL 授權的免費字體。
claude.ai/design 獨立網站開放到 2026 年 12 月 14 日，重要的專案記得先匯出。