用聊天的方式更換整個網站的配色

顏色決定了網站給人的第一印象。許多設計一開始都是黑、白、灰，雖然簡潔，但用在咖啡館、工作室或商店時可能會顯得有點冷淡。在 WordPress 中，你得打開 Site Editor、找到 Styles、編輯色票，然後再一個個手動調整每個元素。在 ShipPress 裡，你只要在聊天中描述想要的顏色，AI 就會一次幫你改好整個網站。在這個教學中，我要為 Pier 7 Coffee 設計一組溫暖的海港配色：奶油色、深海軍藍和銅色。

先看看目前的配色

在 ShipPress 中打開你的網站，並將預覽畫面捲動到有按鈕、連結和小標籤的區塊。在 Pier 7 Coffee 上，所有東西都是白色、黑色和灰色：頁面背景、咖啡卡片上的標籤，還有連結。先想好你想要什麼樣的感覺，以及每種顏色該用在哪裡。

更換前：乾淨但單調的黑白網站。
用一則訊息描述配色

在聊天中輸入你想要的效果，以及每種顏色要用在哪裡。你不需要知道色碼，只要說「柔和的奶油色」、「深海軍藍」和「銅色」這類的詞就夠了。也別忘了說明哪些地方要維持不變，例如所有文字都要容易閱讀。我送出的訊息是：
請幫整個網站換上溫暖的海港配色：頁面背景用柔和的奶油色，頁首、頁尾和深色區塊用深海軍藍，按鈕、連結和咖啡卡片上的小標籤則用銅色作為強調色。所有文字都要保持容易閱讀。

用簡單的文字說出顏色，並說明每種顏色要用在哪裡。
讓 AI 來更換顏色

按下 Enter。AI 會先說明它要做什麼，接著更新設計的色票，也就是控制每個頁面上頁首、頁尾、深色區塊、按鈕和連結的顏色。在 Pier 7 Coffee 上大約花了一分半鐘。AI 作業時你可以繼續輸入，新的訊息會等它完成後再處理。

AI 修改的是全站的色票，而不是一次只改一個頁面。
看看改了什麼

完成後，AI 會列出每一項變更：頁面背景、頁首和頁尾、按鈕和連結、咖啡卡片標籤，以及文字顏色。它也會告訴你是怎麼維持文字可讀性的，例如在銅色按鈕上使用奶油色文字。

一份簡短的清單，列出所有改過的顏色。
比較前後差異

點擊預覽畫面上方的 Refresh，並捲動到同一個位置。頁面現在有溫暖的奶油色背景，咖啡卡片上的標籤和「All lots and past lots」連結都變成了銅色。再捲到最下面：頁尾是深海軍藍搭配奶油色文字。

同一個區塊，全新的配色。

頁尾和深色區塊使用深海軍藍。
用簡短的後續訊息微調

不太滿意嗎？用幾個字說出來就好。在回覆下方，ShipPress 會建議下一步；我點了 Make the copper a bit lighter。AI 把銅色調得更溫暖、更明亮，並說明為什麼沒有再調更多：銅色再淺的話，按鈕上的奶油色文字會比較難閱讀。如果你改變主意，Undo this change 就在旁邊。

小幅調整只要一則簡短的訊息和幾秒鐘。
在 Phone 上檢查

點擊預覽畫面右上角的 Phone，並捲動瀏覽整個頁面。顏色是針對整個網站設定的，所以手機版面也會使用相同的奶油色背景、銅色標籤和海軍藍標題。

新的配色在手機尺寸螢幕上的樣子。
在 Colors and fonts 中查看色票

想自己查看或調整顏色嗎？點擊預覽畫面上方的 Colors and fonts，就會打開 WordPress 的全站 Styles 面板。在 Colors 底下，你可以看到新的色票，以及 Link、Captions、Button 和 Heading 的顏色。你可以在那裡手動修改任何一個，不過完全沒有這個必要。

AI 設定的色票就是一般的 WordPress 色票，你可以自行編輯。
隨時都能用 History 回到之前的狀態

ShipPress 會在 AI 每一輪作業後儲存一個還原點。點擊右上角的 History，你會看到新配色的還原點，以及調淡銅色的還原點。點擊任何一個旁邊的 Restore，就能回到網站在那個時間點的樣子。

每一次顏色變更都可以復原。
小提醒
- 通常三種顏色就夠了：一個背景色、一個用於頁首和文字的深色，以及一個用於按鈕和連結的強調色。
- 要說明每種顏色用在哪裡，而不只是告訴 AI 你喜歡哪些顏色。
- 請 AI 讓文字保持容易閱讀；必要時它會選用稍深或稍淺的色調。
- 照片會保有自己的顏色，所以請選擇和照片搭配的配色。
- 在點擊 Go live 之前，先檢查幾個頁面和 Phone。