Claude Design：指南與五個實用情境

關於使用 Ailoot 的實用資訊，請參閱文件。

Claude Design 是什麼？為什麼大家都在關注 4 月 17 日？#

2026 年 4 月 17 日，星期五。Anthropic 推出 Claude Design——一款能將文字描述轉化為可運作的登陸頁、投資人簡報或行動應用程式原型的工具。它不是「另一個圖像生成器」，而是 Anthropic 首次嘗試在產品開發初期階段省去設計師的產品。

24 小時後，Adobe 宣布推出 Firefly-Claude 連接器，並將自己定位為平台合作夥伴。這個訊號代表：Anthropic 贏得的不是產品戰，而是典範轉移——設計如今可以生成，既有業者則成為發行通路。

本文從 vibe coder 的角度檢視 Claude Design：它能做什麼、費用多少、沒有設計背景該如何使用，以及哪些實際工作適合交給它。如果你在沒有內部設計師的情況下打造產品，這份指南就是為你準備的。

Claude Design 能做什麼：6 種輸出成果#

簡單來說，Claude Design 能建立過去需要設計師花 3–5 天完成的設計。依 Anthropic 的說法，輸出成果分為六類：

介面分成兩個面板。左側是與 Claude 的聊天，右側是即時畫布預覽。流程分成五個步驟：設定專案、描述需求、檢視、反覆調整、匯出。提示不夠明確時，Claude 會追問，因此整個流程更像與人合作，而不是使用生成器。

可接受的輸入：

1. 文字提示（主要使用方式）。
2. 螢幕截圖、圖片和現有素材。
3. 文件：DOCX、PPTX、XLSX。
4. 程式碼庫——透過儲存庫連結或匯入本機資料夾提供。
5. 透過 URL 擷取現有網站。

匯出格式：

1. PDF。
2. PPTX（PowerPoint）。
3. 獨立 HTML 檔案——可以立刻上傳為網頁。
4. 傳送至 Canva——會以完全可編輯的專案開啟。
5. Claude Code 套件——包含開發所需的完整設計意圖。
6. 在組織內分享連結。

Claude Design 無法做到的事（建議事先釐清）：

• 它不會編輯程式碼庫或執行指令——這是 Claude Code 的工作。
• 它不會匯入或匯出 .fig 檔案——沒有原生 Figma 整合功能。
• 它不能取代 Figma 或 Canva。
• 它沒有活動記錄或管理員報告，因此不適合有法規遵循要求的大型企業。
• 它沒有內建影片匯出功能——只能將動畫錄製成螢幕影片。

Claude Design 與 Figma、Lovable、v0 和 Canva 有何不同？#

本文介紹的做法會依不同任務使用這五種工具。以下是截至 2026 年 5 月的比較：

Claude Design 勝過其他工具之處：

1. 從程式碼庫建立設計系統。 沒有競爭工具能自動從儲存庫擷取一組元件。v0 可以從 Figma 匯入，但不能從程式碼匯入。
2. 與 Claude Code 形成封閉流程。 設計意圖得以保留。Lovable 和 Bolt 能在同一工具中完成設計與程式碼，但設計只是程式碼的副產品。
3. 從同一個脈絡產生多種輸出。 同一個品牌可以延伸為登陸頁、簡報、電子郵件活動和社群媒體創意素材。其他工具一次只能處理其中一種。
4. 不必學習介面操作。 不必像使用 Figma 一樣學習介面操作。對 Anthropic 官方定位的「沒有設計背景的創辦人和產品經理」而言，這點很重要。

Claude Design 的不足之處：

1. 沒有完整的資料庫與伺服器整合。 Lovable 和 Bolt 可提供具備資料庫、授權及發布功能的可運作應用程式。Claude Design 只提供前端。若要達到相同結果，流程是：Claude Design → Claude Code → Vercel 或其他主機 → 手動串接付款系統。需要三種工具，而不是一種。
2. 沒有 .fig 檔案。 設計師無法直接將輸出帶入 Figma，只能使用螢幕截圖或重新製作。
3. 沒有免費方案。 所有競爭產品都有免費方案。Claude Design 必須使用 Pro 或更高方案。
4. 精修品質。 Figma 在達到最終上線品質方面仍占優勢。Claude Design 適合做初稿。
5. 快速製作簡單原型。 若只需要基本原型，Bolt 速度更快，幾秒內就能在瀏覽器中啟動。

Claude Design 是用來完成不同任務的工具：先在沒有設計師協助下製作初稿，再交到其他人手上。

Claude Design 的費用與存取方式#

方案和存取權：

首次點數只會發放一次，是一組 20 次一般提示的額度，有效期限至 2026 年 7 月 17 日。這足以建立 2–3 個完整專案，並判斷 Claude Design 是否適合你。

介面按鈕只有英文。

如何從程式碼庫連接設計系統#

對已經打造出某些成果的人來說，Claude Design 的主要競爭優勢就在於此。其他工具都不能自動從儲存庫擷取設計系統。這類似 Second Brain 的做法：你不必向 Claude 解釋品牌，而是提供來源連結，讓它自行分析。

設定的 5 個步驟：

1. 前往 claude.ai/design 開啟 Claude Design，並建立新專案。
2. 在初始設定時選擇設計系統來源。 可選來源包括品牌指南、前端程式碼庫、舊簡報與樣式指南、線上網站 URL、Figma 檔案。
3. 若選擇儲存庫——提供 GitHub 連結。Claude 會下載前端資料夾，並分析主題設定、樣式變數、現有元件和字體排印。
4. 若選擇線上網站——提供 URL。Claude 會擷取頁面結構，並提取色彩、字型、按鈕和卡片樣式。
5. 確認擷取出的元件集合。 Claude 會顯示擷取出的色彩配置、字型和基本元件，你可以在儲存前編輯。

此後，Claude Design 中的每個新專案都會自動沿用你的設計系統。也就是說，你今天生成的登陸頁看起來會與目前的網站一致。

重新檢查設計系統的提示：

顯示此專案中啟用的設計系統：色彩配置、字體排印、
基本元件、間距模式和圓角。將它與我的線上
網站 [URL] 比較，並標出任何差異。

本文介紹的做法會在專案中每反覆調整 3–4 次後重做這項檢查。Anthropic 在公告中坦承，反覆調整幾次後，Claude 可能會忘記設計系統並恢復預設樣式。解決方法是定期用提示讓它回到你的元件集合。這本質上與 Claude Code 中的上下文工程相同：明確管理上下文，而不是讓它默默處理。

情境 1：產品上市登陸頁#

依照本文描述的經驗，在 Claude Design 中展開新嘗試時，第一個成果就是登陸頁。過去要花一天向設計師說明需求，之後再花一週反覆調整。現在只需一個提示、一小時修改，就能完成 HTML。

提示範本：

為 [產品名稱，一句話描述] 建立登陸頁。
視覺方向：[參考品牌 1] 結合 [參考品牌 2]，
營造 [形容詞] 且 [形容詞] 的調性。結構：包含一項
價值主張的主視覺區、三個優點區塊、搶先體驗註冊表單、
5 題常見問題、頁尾。使用我的設計系統。

你會得到： 內嵌樣式的獨立 HTML 檔案。你可以上傳到自己的網站作為網頁，或上傳至任意主機作為獨立專案。

Claude 完成後，人們通常會檢查和修改的內容：

• 主視覺區的具體文案——Claude 擅長安排結構，但不擅長理解產品的意義。
• 圖片——Claude 會放入佔位圖。我會換成自己的圖片，或用其他工具生成。
• 指標和數字——我一律使用真實數據。絕不捏造「80% 的客戶……」之類的數字。

節省時間： 一般產品上市登陸頁可省下 6–8 小時的設計師工時，以及一天的前端開發時間。Claude Design 花 40–60 分鐘完成初稿，再花一小時進行反覆調整。

情境 2：面向投資人或合作夥伴的簡報#

簡報是第二個主要情境：製作投資人資料、加速器申請資料，或與合作夥伴開會的簡報。

提示範本：

為 [公司] 建立一份 10 張投影片的 Series A 簡報，
該公司為 [對象] 打造 [產品或服務]，並達成 [關鍵指標]。受眾：
早期 B2B SaaS 投資人。調性：自信、親切、不浮誇。投影片
依序為：標題、問題、解決方案、業績（醒目呈現指標）、
產品示範、市場規模、商業模式、競爭對手、團隊、募資需求。

你會得到： 一份 PPTX 檔案並可轉送至 Canva。在 Canva 中，檔案會以可完全編輯、可協作的專案開啟。

時間： 相較於手動製作，可省下 6–10 小時。採用大標題、簡潔視覺，並套用設計系統的字體排印型投影片，節省時間最多。

注意事項： Claude Design 產生的是靜態投影片。若需要動畫，可以傳到 Canva 加上動畫，或改用 Figma。

情境 3：可點擊的行動應用程式原型#

一個實際情境：在付費請開發者之前，先測試行動應用程式的假設。

提示範本：

為 [產品] 行動應用程式建立互動式新手引導原型，
包含三種情境：空白狀態、使用者的第一個操作，以及
產生洞見的時刻。讓元素可以點擊，供透過 Maze 或 Useberry
進行無主持人使用者測試。

你會得到： 原型連結。你可以直接傳送到 Maze，對 5–10 位使用者進行測試。

檢查項目：

• 螢幕尺寸——確認 Claude 使用 iOS/Android 正確的長寬比。
• 情境深度——Claude 有時會把複雜分支合併到一個畫面。提示「將每個分支顯示為獨立畫面」即可修正。
• 狀態——空白、錯誤、載入。若沒有要求，它不會建立這些狀態。

節省時間： 相較於用 Figma + ProtoPie 手動製作，可省下 1–2 個衝刺週期。

情境 4：使用 5 個單頁網站進行行銷活動#

這個情境適合經營付費流量的人：使用相同表單與一致的衡量方法，比較 5 種價值主張。

提示範本：

產生 5 個符合品牌風格的單頁網站，以測試不同的價值主張：
[選項 1、選項 2、選項 3、選項 4、選項 5]。
每個網站都需要主視覺區、獨特標題、視覺圖片，以及連到
[同一個真實表單 URL] 的行動呼籲按鈕。每個版本匯出為獨立 HTML。
另匯出 PDF 預覽與 Canva 資料夾供設計審查。
五個頁面必須使用一致的 CTA 目的地與衡量事件。

你會得到： 5 個 HTML 頁面草稿、5 個 PDF 預覽與一個 Canva 專案資料夾。預覽用於核准設計，不能證明登陸頁或轉換追蹤已可正常運作。

導入流量之前：

1. 將各個 HTML 頁面發布到所選主機的獨立 URL，或交給 Claude Code 在現有網站實作。
2. 替換佔位內容，逐一檢查 CTA。透過共用表單提交無害的測試資料，確認資料送達預定位置。
3. 為各頁指定不同活動或版本標記。分別記錄頁面造訪、CTA 點擊與成功提交，確保跨版本比較的是同一種訪客行為。
4. 用桌機與手機開啟發布網址，驗證測試事件確實記錄，再開始原定流量實驗。

用途： 付費流量、電子郵件活動與社群媒體測試。以每次造訪的 CTA 點擊數比較點閱率，以每次造訪的成功提交數比較轉換率。只檢查 PDF 或 Canva 是設計審查，並非實際流量測試。

注意事項： Claude Design 會自動從素材中挑選圖片。如果你需要特定照片，請事先上傳。

情境 5：Resend、Mailchimp 或 Sendsay 電子郵件活動#

每個大量寄送的電子郵件活動都需要內嵌樣式的 HTML 範本。對沒有前端開發人員的行銷人員來說，這是件技術上的麻煩事。

提示範本：

為 [行銷活動主題] 建立 HTML 電子郵件範本。設計：深色主題、
品牌主要強調色、品牌字體。結構：副標題、
標題、3 個段落、行動呼籲按鈕、署名。匯出為
內嵌樣式且不依賴外部資源的獨立 HTML 檔案。

你會得到： 可直接貼入 Resend、Mailchimp、Sendsay 或 Unisender 的 HTML 檔案。

通常會檢查和修改的內容：

• 寬度——電子郵件用戶端通常偏好固定寬度 600px。
• 圖片——我會將連結換成託管在線上的自有素材連結。
• 純文字版本——Claude Design 不會產生，我會自行撰寫。

節省時間： 每個範本可省下 2–3 小時的版面編排工作。

交接給 Claude Code：封閉流程#

依照本文介紹的做法，即使你已經使用 Figma，這項功能也足以成為選擇 Claude Design 的理由。其他設計工具交接的是圖片或 Figma 檔案，接著開發者看著它，再依自己的理解轉譯。這個過程會遺失 30–40% 的設計意圖。

Claude Design 提供的套件不只有視覺內容，還包括：

• 元件結構（元件在邏輯上如何關聯）。
• 設計決策背後的邏輯（為什麼使用這種間距、這些圓角和這個層次結構）。
• 響應式錨點——不同尺寸下區塊固定在畫面上的位置。
• 有名稱的樣式值，而非神奇數字。

Claude Code 會直接開啟這個套件，並撰寫能保留設計意圖的程式碼。它不只是在版面中重現圖片，而是實作設計邏輯。這會與專案的 CLAUDE.md 搭配運作：CLAUDE.md 中的規則越明確，Claude Code 就越不會偏離原始意圖。

工作流程：

1. 在 Claude Design 中完成設計 → 點選「Export to Claude Code」。
2. 在 Claude Code 中開啟專案 → 貼上套件 ID → 提示：「在 src/components/ 中實作這個設計。」
3. Claude Code讀取套件、理解其中的模式，並依你目前使用的技術堆疊撰寫元件（Next.js + Tailwind、Vue、Svelte——都可以）。
4. 接著，你可以透過 Claude Code 修改程式碼，或在 Claude Design 中進行新一輪設計調整，再次交接。

重點：這不是「AI 撰寫前端」，而是「設計和程式碼變成同一份文件」。如果我在 Claude Design 中調整區塊間距，Claude Code 就會在下一輪理解那是一種新模式，而不是一次性的修正。

競爭工具缺少的功能：

• Lovable / Bolt——設計是程式碼的副產品。若要變更設計系統，就得重寫整個提示。
• v0——會提供 React 元件，但沒有包含設計意圖的套件。之後你處理的是程式碼，而非設計。
• Figma + Cursor——雖然有外掛，但只會傳遞視覺，不會傳遞決策背後的邏輯。

這項獨家整合讓 Claude Design 融入 Anthropic 的「代理程式加畫布」策略。

不好用的地方：架構上的弱點#

Anthropic 坦言，這是預覽版，有些功能仍會故障。

架構上的弱點：

• 沒有活動記錄——對有法規遵循要求的大型企業而言是個問題。
• 沒有資料保留要求——不能用於受監管資料。
• 實驗性設計（語音、影片、3D）會標示為實驗性，也可能故障。
• 沒有內建影片匯出功能——只能將動畫錄製成螢幕影片。

Claude 的行為特性（所有工具都可能出現，不限於 Design）：

• 反覆調整幾次後會忘記需求，並恢復預設模式。
• 擅長結構明確的工作（重複模式），不擅長開放式工作（想出新方向）。
• 有時會「固守」慣用做法，而非遵循明確說明的目標。

解決方法是每反覆調整 3–4 次，就用提醒提示讓它回到設計系統。這不至於造成阻礙，但需要養成習慣。

什麼時候該繼續使用 Figma、Lovable 或 Canva#

依照本文介紹的做法，五種工具各有不同用途。以下說明何時該使用每一種工具：

適合使用 Claude Design 的情況：

• 你是沒有設計背景的創辦人、產品經理或行銷人員。
• 你需要在一小時內完成簡報、登陸頁或模型圖的初稿，而非花上一整天。
• 你已有 Claude 可使用的程式碼庫或品牌指南。
• 你打算將成果交給設計師或開發者進一步精修。
• 你使用 Claude Code 撰寫程式碼，並想建立「設計 → 開發」的封閉流程。

適合使用 Figma 的情況：

• 你是負責最後精修的設計師。
• 你需要團隊合作，並重視交接給開發者的流程。
• 你需要外掛、開發者模式或完整的版本管理功能。
• 你需要可投入正式環境的最終設計。

適合使用 Lovable 或 Bolt 的情況：

• 你需要透過一個提示，建立具備資料庫、授權和發布功能的可運作產品。
• 你願意犧牲設計精緻度來換取速度。
• 免費方案對你很重要。

適合使用 Canva 的情況：

• 你需要用現成範本製作行銷素材。
• 設計工作是從素材庫組合內容，而非創意生成。
• 你需要在同一個產品中處理印刷品、社群媒體和影片。

適合使用 v0 的情況：

• 你在開發前端，需要能複製貼上的現成元件。
• 你已經使用 Next.js / Vercel 生態系。
• 你想直接從 Figma 匯入。

本文介紹的典型流程是：Claude Design 製作登陸頁初稿 → Claude Code 將它移至 src/app/ → 在程式碼中修改 → 若要精修字體排印，就改用 Figma → 若要製作社群媒體動畫，就改用 Canva。

Claude Design 並未宣稱自己無所不能。它的目標是成為第一步，讓你之後了解該怎麼做。

前往 Ailoot。