Claude 做的首頁不再只有空白框框：一份內容排出玻璃擬態、極簡、雜誌 3 種風格

你叫 AI 做首頁，是不是只拿到一堆灰色框框，寫著「圖片放這裡」？不是 AI 只會做空殼，是你沒給它照片，也沒告訴它「好看」長什麼樣子。這篇替一間虛構的植物店「青苔選物 Moss & Co.」做手機首頁：先看參考、再生照片、最後才叫 Claude 排版，同一份內容一次做出三種風格。下面的首頁畫面都是 Claude Design 實際做出來的，植物照是 ChatGPT 生成的。

01先打開 Claude Design（1 分鐘）

打開 claude.ai/design，登入你的 Claude 帳號。也可以在一般的 Claude 對話裡直接用。
開一個新專案。我們選的是「UI mockups」模板，專門做 App 和網頁畫面。
先不要急著打字。照片和參考準備好，成品會差很多。

Claude 官方頁面寫明，Claude Design 包含在每一種方案裡，免費方案也能用。claude.ai/design 這個獨立網站會開到 2026 年 12 月 14 日，現在在一般的 Claude 對話裡也已經能用。模板名稱官方頁面沒有列出，之後可能會改名。

Claude Design 官方介紹 — 方案、獨立網站開放時間、匯出格式

02第 1 步：先看 Pinterest，把「好在哪」寫下來

AI 不知道你心中的「好看」是什麼。先找幾張真的好看的設計，把好在哪裡寫成文字，這些字等一下會直接放進 prompt。

在 Pinterest 搜尋「plant shop mobile app ui」，換成你的產業也可以，例如「coffee shop app ui」。
挑 3 到 5 張你最喜歡的。
每張寫一句它好在哪。我們寫下的是：每張卡片都是真的商品照；主視覺的植物突破卡片邊框；只用一個綠色系，加白色或深色；大圓角卡片、大價格、一顆圓按鈕；一個畫面最多三件事。
再看三種風格差在哪：玻璃擬態是漸層底加毛玻璃卡片，極簡是白底，雜誌風是深色底配襯線大標。

03第 2 步：用 ChatGPT 生去背商品照

首頁會空，是因為卡片裡沒有東西。先在 ChatGPT 把商品照生好，每一張都是同樣的光線和角度，放在一起才像同一間店。

商品照提示詞（把［］換成你的）

幫我生成［斑葉龜背芋］的商品照：［赤陶盆］，正面平視，柔和棚拍光，淺米色背景。同一個對話裡我會再要［鹿角蕨、苔球、琴葉榕］，請保持一樣的光線、角度和大小。

ChatGPT 生成的 6 盆植物商品照：斑葉龜背芋、鹿角蕨、苔球羊齒、琴葉榕、珍珠吊蘭、橄欖樹 — ChatGPT 一次生了 6 盆，光線和角度都一樣。首頁最後用了其中 4 盆。

接著叫它把要用的每一張做成透明背景的 PNG。去背之後，同一張照片放在淺綠漸層、白底、深綠底上都乾淨，三種風格可以共用。

同一張去背的斑葉龜背芋，放在淺綠、米白和深綠三種背景上 — 同一張去背 PNG，放在三種風格的底色上都站得住。

04第 3 步：一段 prompt，同一份內容排三種風格

在 Claude Design 的專案裡附上剛剛的去背 PNG。
貼上下面的 prompt，把［］換成你的。
第 1 步寫下的「好在哪」，就是 prompt 裡「參考方向」那一段。

三風格首頁提示詞（把［］換成你的）

幫［店名］做手機首頁，同一份內容做 3 種風格並排：A 玻璃擬態、B 極簡留白、C 雜誌編輯。參考方向：每張卡都用我附的去背商品照，主視覺突破卡片邊框；只用一個［主色］色系＋白或深色；大圓角卡片、大價格、一顆圓按鈕。全部繁體中文，不要灰色佔位框。

「同一份內容」是關鍵。三版的標語、商品、價格都一樣，你比的就只有風格。我們這次的標語「把一小片森林，帶回家。」、本週植物和價格，都是 Claude 自己寫的。

05第 4 步：看懂三種風格差在哪

A 玻璃擬態：淺綠漸層底，卡片是半透明的毛玻璃，邊緣一條細白線，後面透出模糊的葉影。主視覺的龜背芋從卡片上方長出來，價格、光線、澆水做成三顆小膠囊。

A 玻璃擬態版：淺綠漸層底上的毛玻璃卡片，植物站在卡片上方 — A 玻璃擬態：每張卡片後面一團淡淡的萊姆綠光暈，看起來才像玻璃。

我們第一版的 A 不太像玻璃，只像半透明的白卡片。後來請它在卡片後面加光暈，植物保持清楚，玻璃感才出來。

玻璃感不夠時的修改提示詞（把［］換成你的）

A 版的卡片看起來只是半透明白卡。在每張卡片後面加一團淡淡的［萊姆綠］光暈，卡片保持半透明毛玻璃加細白邊，商品照要清楚地站在卡片上。B 和 C 不要動。

B 極簡留白：幾乎全白，只用一個苔綠色。植物放在淺色圓形裡，上面一排「全部、觀葉、蕨類、苔球」膠囊篩選，價格寫得很大。

B 極簡留白版：白底、苔綠色字和按鈕、植物放在淺色圓形裡 — B 極簡留白：白底加一個苔綠，大價格配一顆圓按鈕。

C 雜誌編輯：深綠底配米色襯線大標，像一本植物雜誌的封面。主視覺的龜背芋超出手機兩側，商品變成 01 到 04 的編號大卡。

C 雜誌編輯版：深綠底、米色襯線大標、編號 01 的鹿角蕨大卡 — C 雜誌編輯：襯線大標「把一小片森林，帶回家。」，主視覺突破版面。

06第 5 步：三版並排比，挑一版做完整長頁

三個手機首頁並排：玻璃擬態、極簡留白、雜誌編輯 — 同樣的字、同樣的植物，三種氣質。客戶一眼就能選。

並排看最容易決定。給客戶或同事看的時候，也是直接丟這一張，不用一版一版解釋。我們挑了 C，再叫它把整頁做完。

做完整長頁的提示詞（把［］換成你的）

我選［C 雜誌編輯］。把這一版做成完整的手機首頁長頁：導覽列、主視覺、［本週植物］、［養護小提醒］、［首購優惠］、頁尾。照片和文字沿用，同一張照片不要連續出現兩次。

C 雜誌編輯版的完整首頁長頁，分成四段由左到右排列 — 完整長頁（由左到右讀）：主視覺、01 到 04 本週植物、養護小提醒、首購 9 折。

小地方直接說要改哪一個區塊，並說其他地方不要動。
做好用匯出功能存成 PDF、PPTX、獨立 HTML，或送到 Canva。
要做成真的網站，可以把設計交給 Claude Code 接著做。

07要注意

青苔選物 Moss & Co. 是虛構品牌。首頁版面和文案由 Claude Design 生成，植物照由 ChatGPT 生成，示範用。
價格、優惠和養護小提醒都是 AI 為虛構品牌寫的，換成你店裡的真實資訊再上線。
玻璃底上的字要夠深、夠大。半透明的卡片會透出底下的顏色和葉影，A 版用深墨綠的字和深色按鈕才讀得清楚。一般內文和背景的對比至少要 4.5:1。
玻璃效果做成網頁時，通常用 CSS 的 backdrop-filter 把卡片後面模糊掉，卡片本身要半透明才看得到。
Pinterest 的圖只拿來定方向，頁面裡只放你自己的照片或自己生成的圖。
這篇是 2026 年 10 月在 claude.ai/design 用 UI mockups 模板做的，介面和模板名稱之後可能會不一樣。獨立網站開到 12 月 14 日，重要的專案記得先匯出。