用 Claude Design 做第一個設計稿：從 Prompt 到美甲師預約頁
用已登入的 Chrome 實測 Claude Design，從美甲師預約頁 Prompt、追問校準到活動海報加碼示範，整理成新手可照做的教學流程。
這篇不是工具新聞，而是一篇完整實測教學：我用已登入的 Chrome 打開 Claude Design，請它幫一位美甲師做預約 Landing Page，並把過程整理成新手可以照做的流程。
Claude Design 是 Anthropic Labs 推出的 research preview。它和一般聊天機器人最大的差別，不只是「會回答你」，而是可以把設計任務放進一個專案脈絡裡，搭配設計系統、截圖、Figma 或其他參考資料，產出可以預覽、可以修改、可以繼續討論的設計稿。
這次我做一個很小但很完整的案例：請 Claude Design 幫一位美甲師做一頁式預約網站。這種題目很適合新手練習，因為需求不會太大，但會同時碰到版型、文案、CTA、作品集、服務方案與視覺風格。
這次示範的目標
我們要做的不是正式上線網站，而是一版可以拿來討論的設計初稿。
對美甲師來說，這樣的初稿已經很有價值：你可以先看整體風格是否對味，再決定要不要補真實作品照、調整價格區塊、換成自己的 Line ID，或交給網站工程師繼續細修。
這次示範會完成四件事：
- 打開 Claude Design 並建立專案。
- 用一段完整 Prompt 描述美甲師預約頁。
- 回答 Claude Design 的追問，讓設計方向更準。
- 檢查產生的 Landing Page 初稿，整理成可放進文章或提案文件的截圖。
為什麼不是直接用聊天機器人？
你當然可以在 Claude、Gemini 或 ChatGPT 裡面問：「幫我設計一個美甲師網站。」聊天機器人通常會先給你文案、區塊架構，甚至給你 HTML 或 CSS。
但 Claude Design 的使用感比較像：你開了一個設計專案，然後把設計需求、參考資料、設計系統和修改意見都放在同一個工作區。它不只是回一段文字，而是會把結果做成可預覽的設計稿。
這也是桌機 Agent 或瀏覽器自動化最方便的地方：你可以要求它一邊操作工具、一邊截圖、一邊把流程整理成文章。這次我使用的是已登入的 Chrome 分頁，但沒有讀取 cookie、密碼或帳號資料；所有可公開圖片也都另外裁切與遮蔽。
步驟一：開啟 Claude Design 並建立專案
先到 claude.ai/design。如果帳號可以使用 Claude Design，你會看到建立專案的畫面。官方說明可以參考 Anthropic 的 Claude Design 發布文章，以及 Claude Help Center 的入門頁面。
這次我建立的專案名稱是「美甲師預約頁教學示範」。在專案中，可以看到它支援放入設計系統、截圖、Codebase、Figma 等素材。新手第一次練習時，不一定要全部準備好；先用文字 Prompt 做一版，也很適合。
這裡有一個小提醒：如果你已經有品牌色、Logo、作品照、網站截圖，最好一開始就放進去。Claude Design 看到的脈絡越完整，第一版就越接近你想要的方向。
補充：Design System 可以跳過嗎？
嚴格說，Claude Design 的新專案流程比較像「自動套用目前組織的 Design System」，而不是每次都要你從零建立一套。Anthropic 的官方說明也提到，建立新專案時會自動繼承組織的設計系統；如果你是 Team 或 Enterprise，設計負責人可以先把品牌資產、色彩、字體、元件整理成一套可重複使用的系統。
所以這次示範裡，我沒有先建立新的 Design System，而是先沿用當時專案裡可選的預設系統。進入專案後，再用 Prompt 明確說明：「這次要做的是溫柔、乾淨、專業的美甲工作室風格，不要太像深色霓虹或科技產品。」
如果你在畫面上覺得跳不過 Design System，可以用這個方式處理：
- 先選目前畫面上可用的 Design System 或預設值，讓專案建立起來。
- 進入專案後，在 Prompt 裡明確寫出本次設計要採用的風格。
- 如果 Claude Design 發現預設 Design System 和你的需求衝突，它可能會追問；這時選擇「另立一套比較適合本次任務的方向」。
- 如果你之後會大量做同一品牌的設計，再回頭正式建立自己的 Design System。
我會把它理解成：Design System 不一定要先做完才能開始，但你不能完全忽略它。新手先用預設系統開專案，再用 Prompt 校準風格，是目前比較順的做法。
步驟二：給它一段可以直接工作的 Prompt
我這次沒有只寫「幫我做美甲網站」，而是把讀者、用途、頁面區塊、文案語言和視覺風格一次講清楚。
你可以直接參考這段：
請幫我設計一個美甲師個人工作室的預約 Landing Page。
目標讀者：第一次看到這位美甲師的女性客人，想快速了解風格、價格與如何預約。
請產生一個適合手機與桌機觀看的單頁設計，內容使用繁體中文，包含：
1. Hero 區：主標題、簡短說明、立即預約按鈕
2. 作品集區：3 種風格分類，例如日系裸感、法式優雅、短甲顯白
3. 服務方案區：基礎保養、凝膠設計、客製延甲
4. 客人評價區：2 則簡短評價
5. 預約 CTA：Line 預約、營業時間、地址提示
視覺風格：乾淨、溫柔、專業，不要太像廣告傳單。請用柔和但不要太單一的色彩，讓畫面像真正可以交給美甲師使用的網站初稿。
這段 Prompt 有幾個重點。
第一，它指定了「第一次看到這位美甲師的女性客人」，所以 Claude Design 會知道這不是給內部員工看的管理頁，而是給新客人看的預約頁。
第二，它指定了頁面區塊。這能避免 Claude 只做漂亮 Hero，卻忘了作品集、方案、評價和預約資訊。
第三，它指定了視覺風格，而且用了反向限制：「不要太像廣告傳單」。這種限制很重要，因為很多 AI 設計初稿會做得太滿、太像促銷頁。
步驟三：把 Claude Design 的追問當成設計校準
很有趣的是，Claude Design 沒有馬上硬做。它先發現一個問題：這個專案預設綁定的設計系統偏深色霓虹，但我想做的是溫柔、乾淨、專業的美甲風格。
所以它先問我幾個問題，例如要不要另立一套比較柔和的美甲視覺方向、要不要用圖片佔位框、品牌名稱要放什麼。
這件事很值得放進教學文章，因為新手常常以為 AI 沒有直接產出就是失敗。其實在設計任務裡，追問通常代表它正在幫你校準需求。
我這次的回答方向大概是：
視覺方向：另立一套柔和溫柔的美甲風格。
圖片素材：先用圖片佔位框，之後再替換真實作品照。
整體風格：簡約專業、留白多。
版本範圍：先做一版完整的即可。
品牌資訊：Mika Nail Studio。
預約資訊：Line、營業時間與地址先用示範文字。
這一步的重點不是答案一定要多漂亮，而是你要讓 Claude Design 知道「哪些可以先假設，哪些不能亂猜」。
步驟四：檢查第一版設計稿
Claude Design 最後產生了一版美甲師預約 Landing Page。畫面裡可以看到它做出了 Hero、立即預約 CTA、作品集入口、服務方案與圖片佔位框。
我會用三個角度檢查這一版。
第一，看它是否符合原始任務：有沒有 Hero、作品集、服務方案、評價和預約 CTA。這次第一版的主視覺和 CTA 有出來，但作品集與方案需要往下捲動再確認。
第二，看它是否符合產業語氣。美甲師網站不適合太科技、太企業簡報、或太像折扣廣告。這次它把語氣做得比較柔和，主標「把每一次指尖，都當作一件溫柔的事」也算貼近美甲工作室。
第三，看它有沒有保留後續修改空間。這次圖片還是佔位框，這其實是合理的，因為美甲作品照最好用真實照片。設計稿先留位置，後面再換素材，比硬生 AI 圖更適合正式網站。
加碼示範：同一個需求也能改做活動海報
如果只做 Landing Page，讀者會理解 Claude Design 可以做網站初稿；但如果再補一張活動海報，文章會更容易讓人看懂它的延伸價值：同一個品牌、同一個美甲服務情境，可以轉成網站、社群貼文、活動海報、提案插圖或簡報素材。
下面這張是延伸示範：把美甲師預約頁的風格，改成「夏日裸感美甲體驗日」活動海報。這類圖很適合放在部落格中間，讓讀者看到 AI 設計工具不只是在做版型，也可以協助行銷素材的第一版發想。
可以使用這段 Prompt 讓 Claude Design 產生活動海報方向：
請延續剛剛的美甲工作室視覺風格，改做一張活動海報。
活動主題：夏日裸感美甲體驗日
品牌：拾光 Nail Studio
目的：吸引第一次接觸工作室的新客人預約體驗
內容需要包含：
1. 活動主標題
2. 活動日期與時間
3. 三個體驗內容：色卡諮詢、顯白短甲、裸感凝膠
4. 名額限制：6 位，採預約制
5. CTA：LINE 預約
視覺風格請延續網站初稿的溫柔、留白、專業感，但海報可以更有活動感。請不要做得像低價促銷傳單。
這個加碼案例可以提醒讀者：設計工具的價值不只是「做一張圖」，而是把同一個品牌脈絡轉成不同用途的溝通素材。對美甲師、瑜珈老師、顧問或課程講師來說，這會非常實用。
新手最容易忽略的三個細節
第一個細節是「不要只給風格詞」。只說溫柔、乾淨、專業，Claude Design 還是不知道你要做首頁、作品集、價格頁還是預約頁。風格詞要搭配頁面用途和內容結構。
第二個細節是「如果有設計系統衝突，要明確處理」。這次它提示預設設計系統不適合美甲網站，我選擇另立一套柔和方向。這比硬套原本設計系統更合理。
第三個細節是「截圖前要先處理隱私」。如果你要把操作過程放進部落格、簡報或服務建議書，記得遮蔽帳號、信箱、專案機密、客戶名稱與任何不該公開的資訊。
可直接複製的 Prompt 模板
如果你想把這個案例改成別的產業，可以用下面這個模板。
請幫我設計一個【產業/角色】的【頁面類型】。
目標讀者：【誰會看到這個頁面？他們最想知道什麼？】
請產生一個適合【手機/桌機/兩者】觀看的設計，內容使用【語言】，包含：
1. 【區塊一】：【內容要求】
2. 【區塊二】：【內容要求】
3. 【區塊三】：【內容要求】
4. 【區塊四】：【內容要求】
5. 【CTA】：【希望使用者做什麼】
視覺風格：【你想要的風格】
避免：【你不想要的風格】
素材狀態：【有沒有 Logo、圖片、截圖、品牌色；沒有的話請用佔位框】
如果你是美甲師，可以把【區塊】換成作品集、服務方案、風格分類、客人評價、Line 預約。如果你是瑜珈老師，可以換成課程類型、適合對象、課表、學員回饋與試上預約。
這篇示範真正想教的事
Claude Design 的價值，不只是「幫我做一張漂亮畫面」。更重要的是，它把設計任務變成一個可以對話、可以追問、可以截圖、可以迭代的工作流程。
對部落格作者來說，這很適合做教學文章：你可以一邊展示 Prompt，一邊展示工具怎麼追問，一邊展示產出的第一版設計稿。讀者看到的就不是抽象概念，而是一個真的跑過的流程。
對服務業工作者來說，這也很適合做提案或溝通：你不必一開始就把網站做完，而是先做出一版視覺初稿，讓客戶、同事或合作設計師更快進入討論。
下一步，我會建議把這個流程延伸成兩種文章：一種是「Claude Design 如何做不同產業的 Landing Page」，另一種是「如何把 Claude Design 產出的圖稿與截圖放進服務建議書或品牌提案」。
