什麼是 Claude Design？定價、7 種建立方法與提示詞範例完整指南 [2026 最新版]

2026年6月18日，Claude Design 迎來了一次重大更新。

功能增加了，介面也變了。

我自己邊用邊確認過，所以會按照點擊畫面的順序寫下來。

這篇文章是為了「一起邊學邊用」而寫的。

請一邊實際開啟 [claude.ai/design](//claude.ai/design) 一邊閱讀本文。

可以免費使用嗎？

不行，無法免費使用。

Claude Design 僅限付費方案使用。

只要有 Pro 方案（每月 $20 美元）就可以使用。不需要額外付費。

Claude Design 是什麼？

這是一個 AI 工具，只要用日文簡單指示，就能製作投影片、登陸頁面、應用程式原型、企劃書等。

Anthropic 於 2026 年 4 月 17 日發布。這次更新大幅增加了功能。

輸出的成果是「Live HTML」。它不是靜態圖片，而是會產生可點擊、會動的設計。

畫面閱讀方式

開啟 [claude.ai/design](//claude.ai/design) 後，會顯示這個畫面。

上方分頁

「Make something new」區域

在此選擇想建立的類型。共有七張卡片。

下方的「Designs」區域會列出過去製作的設計。

當 Claude 提出追加問題時（所有卡片共通）

選擇卡片並送出提示詞後，如果 Claude 判斷資訊不足，可能會在畫面右側顯示追加問題。

問題的內容會根據提示詞而改變。

有必填項目和選填項目。

回答完問題後，按下「Continue」即可開始生成。

如何製作投影片（簡報資料）

從這裡製作研討會資料、簡報投影片和提案用投影片。

步驟 1. 在首頁點選「Slides」

點選寫著「Presentations & pitch decks」的卡片。

步驟 2. 輸入想製作的投影片內容

點選後會進入這個畫面。

左側側邊欄會顯示「What's the presentation about?」。

可以從三種輸入方式中選擇：

• Upload a doc：從 Word 或 PDF 等現有文件建立投影片。
• Paste your notes：貼上筆記或文字，讓其自動整理結構。
• Existing deck：根據現有投影片簡報重新建構。

如果沒有附加任何檔案，直接在下方文字欄位中用日文輸入內容，然後按下送出即可。

提示詞範例

1請為 AI 諮詢服務製作介紹用投影片。
2對象：不善於使用電腦的個人事業主與自由工作者
3時間：20 分鐘研討會用
4結構：目前的煩惱 → 能用 AI 解決什麼 → 服務內容 → 費用 → 申請方式
5氛圍：親切、不使用專業術語
6外觀：簡單易懂、白底

1請製作自我介紹投影片。
2前身為系統工程師，目前從事 AI 使用教學
3實績：使用 Claude Code 自動化作業，打造月收入 30 萬日圓的系統
4對象：AI 初學者的個人事業主
5頁數：5-7 頁，留白多、易於閱讀

1請製作 Claude Code 使用方法的入門投影片。
2聽眾：從未寫過程式的初學者
3時間：10 分鐘
4內容：什麼是 Claude Code → 安裝步驟 → 第一個指令 → 常見錯誤與解決方法
5語氣：有禮貌、溫柔、不嚇人

投影片選項（選填）

• Optimize for Google Slides：僅使用 Google Fonts（在 Google Slides 中開啟時很方便）。
• Add speaker notes：自動為每張投影片添加講稿備註。

步驟 3. 等待生成

需要數分鐘。可以在左側面板查看進度。

完成後會像這樣。

步驟 4. 使用右上方的按鈕進行調整

生成完成後，右上方會出現按鈕。

「Tweaks」使用頻率最高。只要像聊天一樣輸入「把第一張投影片的標題放大」，它就會幫你修正。

注意事項

先決定好投影片的視覺風格。

如果中途才說「全部換顏色」，一致性容易崩壞。

先決定好大致的框架，再逐一修正細節會比較快。

如何製作產品原型（可動的原型）

可以製作應用程式畫面、服務預約流程、網路服務模型等。

完成後，會變成可以實際點擊操作的狀態。

步驟 1. 在首頁點選「Product prototype」

點選寫著「Interactive app mockups」的卡片。

步驟 2. 輸入想製作的應用程式畫面內容

點選後會進入這個畫面。

和投影片一樣，在文字欄位中用日文輸入內容後按下送出即可。

原型寫得越詳細，精準度越高。 包含以下資訊能提升品質：

• 什麼樣的應用程式：預約系統、任務管理、付款畫面等
• 畫面數量：總共幾個畫面
• 各畫面的內容：顯示什麼資訊
• 操作流程：按下哪裡會移動到下一步
• 裝置尺寸：智慧型手機（390×844px）或電腦
• 顏色/風格：深色主題、明亮色系等

提示詞範例

1請製作美髮沙龍預約應用程式的原型。
2在智慧型手機畫面（390×844px）上。
34 個畫面：
41. 首頁：沙龍名稱、選單列表（剪髮/染髮/護髮）
52. 選擇方案：選擇後繼續
63. 選擇日期/時間：日曆與時段
74. 確認/完成：預約詳細資訊與「預約」按鈕
8風格：白底、粉紅強調色、圓角設計
9點擊「預約」按鈕時，轉場到「預約完成！」畫面。

步驟 3. 等待生成

需要數分鐘。完成後會像這樣。

變成可以實際點擊操作的狀態。按下「預約」按鈕會轉場到下一個畫面。

步驟 4. 使用右上方的按鈕進行調整

生成完成後，右上方會出現按鈕。

「Tweaks」使用頻率最高。只要像聊天一樣輸入「把背景顏色改成白色」或「把字體放大」，它就會幫你修正。

想加入動畫時

Claude Design 預設不會加入動畫。

如果想加入動態效果，請明確指定。

1滑鼠懸停時將按鈕放大至 1.05 倍，過渡時間 200 毫秒。
2頁面載入時，卡片以淡入 + 向上滑入的方式，每隔 150 毫秒依序顯示。

如何製作產品線稿圖（骨架設計）

想先決定「畫面配置」時使用。

只建立版面配置的骨架，不進行詳細設計。

適合用來確認「使用者按照這個順序操作」的流程。

步驟 1. 在首頁點選「Product wireframe」

點選寫著「Lo-fi screens & flows」的卡片。

步驟 2. 輸入想製作的畫面配置

點選後會進入這個畫面。

直接在文字欄位中用日文輸入內容後按下送出即可。如果有想參考的畫面，可以用「Add a screenshot」附加上去，能提升精準度。

提示詞範例

1請製作諮詢服務的申請流程線稿圖。
2步驟：首頁 → 服務說明 → 費用 → 申請表 → 完成
3只要能看出每個畫面要放什麼就行。不需要詳細設計。

1請製作研討會報名登陸頁面的線稿圖。
2區塊：主視覺區 → 講師介紹 → 內容 → 參加費用 → 報名表
3以智慧型手機畫面尺寸呈現。

步驟 3. 等待生成

完成後會像這樣。

畫面骨架會以灰色區塊顯示。用來確認「按鈕在這裡」、「圖片在這裡」的配置。詳細設計則用 Product prototype 或 Document 來製作。

步驟 4. 使用右上方的按鈕進行調整

生成完成後，右上方會出現按鈕。

在「Tweaks」中指示「在第 3 個畫面加入費用顯示」等，即可進行追加修正。

如何製作文件（登陸頁面、企劃書、文件）

從這裡製作登陸頁面、企劃書、報告書、履歷表等。

在七種卡片中，這個最萬用。

步驟 1. 在首頁點選「Document」

點選寫著「Resumes, PDFs, etc.」的卡片。

步驟 2. 輸入想製作的內容

點選後會進入這個畫面。

Document 卡片特有的功能是「Talk it out」。

如果用說話的方式將想法輸入來整理，它會直接依照該結構來解讀。

如果有 PDF 或資料，可以用「Upload a PDF or notes」上傳。

提示詞範例

1請為個人用的 AI 諮詢服務製作登陸頁面。
2目的：增加 LINE 好友註冊數
3結構：
4- 主視覺區：標語 + 註冊按鈕
5- 您有這些煩惱嗎？（3 項）
6- 透過服務能解決什麼（3 項）
7- 費用
8- 常見問題（3 項）
9- 最終行動呼籲：LINE 註冊按鈕
10對象：不善使用電腦的個人事業主、50 多歲女性
11風格：簡約溫暖、白色 + 珊瑚色強調色

1請為企業用諮詢服務製作企劃書。
2結構：現狀課題 → 提案內容 → 預期效果 → 費用 → 導入步驟 → 關於下次會議
3風格：簡約值得信賴、海軍藍 x 白色

1請製作自由工作者用的自我介紹資料（作品集）。
2需包含內容：個人簡介、技能、實績、費用、聯絡方式
3風格：單色 + 1 種強調色、現代簡約

步驟 3. 等待生成

需要數分鐘。完成後會像這樣。

可以滾動查看其餘部分。登陸頁面從費用、常見問題到頁尾都會一併生成。

步驟 4. 使用右上方的按鈕進行調整

生成完成後，右上方會出現按鈕。

只要在「Tweaks」中指示登陸頁面的用字或顏色，它就會當場修正。

如何製作動畫

可以製作動態橫幅和動態圖像。

步驟 1. 在首頁點選「Animation」

點選寫著「Motion graphics & loops」的卡片。

步驟 2. 輸入想製作的動畫內容

點選後會進入這個畫面。

如果有分鏡圖或圖片，可以用「Drop a storyboard or images」上傳。

如果有劇本（文字），也可以用「Paste a script」貼上。

提示詞範例

1請製作服務介紹用的動態橫幅。
2內容：文字「AI x 系統化」淡入 → 服務名稱從下方出現 → 行動呼籲按鈕閃爍
3背景：深色、珊瑚色強調線條
4尺寸：1200×630px
5循環播放

1請製作數字計數動畫。
2顯示「3,000 人已註冊」的文字，並在 2 秒內從 0 數到 3,000。
3頁面顯示時開始播放。

完成後會像這樣。

步驟 3. 使用右上方的按鈕進行調整

生成完成後，右上方會出現按鈕。

與其他卡片不同，沒有「Edit」按鈕。 由於動畫是透過程式碼（CSS/JavaScript）運作，無法直接點擊編輯元素。只能透過在「Tweaks」中指示 AI 來進行修正。

如果將動畫匯出為 PDF，動態效果會消失。如果想保留動態效果，請選擇 HTML 格式。

如何使用 Blank Canvas（從頭開始建立）

沒有範本，也沒有提問。想從完全空白的畫布開始時使用。

適合「不符合任何卡片類別」或「想自己決定一切」的情況。

直接在文字輸入欄中輸入想建立的內容後按下送出即可。

如何使用 Start with a File（從檔案建立）

這張卡片能將現有檔案轉換為設計。只要把 Word、PDF 或 PPTX 檔案交給 Claude，它就會幫你建立設計。

步驟 1. 點選「Start with a file」

點選寫著「Turn it into a design」的卡片。會開啟檔案選擇對話框。

支援的檔案格式為 DOCX、PPTX、XLSX、PDF、JPG 及 PNG。

步驟 2. 上傳檔案並輸入指示

選擇檔案後會進行上傳，並顯示一個大型文字輸入欄。用日文輸入想建立的內容，然後按下「Start project」按鈕。

其他卡片是「Send」按鈕，但這張卡片是「Start project」。

提示詞範例

1請將附加的 Word 企劃書轉換為視覺化的企劃投影片。
2做成 5-7 頁的結構，採用簡潔易懂的設計。

1請將這份手寫筆記中的點子轉換為登陸頁面企劃書。
2對象：AI 初學者的個人事業主
3目標：諮詢申請

完成後會像這樣。

步驟 3. 使用右上方的按鈕進行調整

生成完成後，可以使用右上方的工具列進行調整。按下「+ Tweaks」按鈕會開啟聊天輸入欄，可以下達追加指示進行微調。

如何使用 Design Systems [本次更新新增]

在首頁卡片列表下方有一個「Set up design system」按鈕。

只要事先註冊品牌顏色、字型和標誌，之後的設計就會自動套用。

這解決了「每次顏色都不一致」的問題。

按下按鈕會顯示「Add a design system」對話框。

有兩種註冊方法。

① Create here（適合初學者）

只要在表單中輸入必要資訊即可設定。

可註冊的項目：

• 公司名稱/品牌說明（文字輸入）
• GitHub 儲存庫 URL
• Figma 檔案（上傳 .fig 檔案）
• 字型、標誌及素材檔案

不需要程式碼即可使用。初次嘗試時建議使用這個方法。

② Create using Claude Code（最佳精準度）

這是讓 Claude Code 學習品牌資訊的功能。

一旦註冊，之後製作登陸頁面、首頁或投影片時，就不需要每次都指定「用這個顏色和這個字型」。會自動產出統一品牌的設計。

主要針對企業開發團隊。 這是透過 React 規則從服務程式碼中自動讀取品牌資訊的功能。個人使用的案例幾乎沒有。

使用方法

可以按照以下步驟從頭建立。

步驟 1. 確認 Node.js

步驟 2. 建立資料夾與檔案

1任意資料夾/
2　　└── design-system/
3　　　　　　　├── package.json
4　　　　　　　└── tokens.js

package.json

1{ 
2  "name": "my-design-system", 
3  "version": "1.0.0", 
4  "type": "module" 
5}

tokens.js（將顏色和字型改為你的品牌）

1export const colors = {
2  primary: "#DA7756",      // 主色
3  background: "#F5F4F0",   // 背景色
4  text: "#1C1917",         // 本文
5  white: "#FFFFFF"
6}
7export const fonts = {
8  heading: "YuGothic",
9  body: "Meiryo"
10}

步驟 3. 執行 /design-sync

在 Claude Code 中執行以下指令：

1/design-sync

完成後，品牌就會註冊到「Design systems」分頁中。之後的設計生成會自動使用這個顏色和字型。

匯出方法

完成的設計可以用數種格式匯出。

如果有動畫，匯出為 PDF 時動態效果會消失。

如果想保留動態效果，請選擇 HTML 格式。

調整技巧（Tweaks 面板）

生成完成後，按下「Tweaks」按鈕即可向 AI 下達微調指示。

有效指示的範例：

• 「將標題文字放大」
• 「讓按鈕更突出」
• 「整體簡化」
• 「檢查在智慧型手機上觀看時的版面配置」

與其一次全部修改，不如逐項指示，更容易得到想要的結果。

本次更新改變了什麼

總結 — 依照想建立的內容選擇卡片

Claude Design 可用於 Pro 方案（每月 $20 美元）以上。無法免費使用。

依照想建立的內容選擇卡片

提示詞若能包含「目的、結構、對象、風格」這四點，精準度會提升。

不要一開始就追求完美，先建立大致框架，再逐一修正會比較快。

如果您喜歡這篇文章，希望您能按讚。

▼ 即使不擅長電腦，也能開始使用的 Claude 用法，可以透過 LINE 接收。

註冊後會贈送 Claude Code 安裝指南。

https://utage-system.com/line/open/7AX6UZExr2sX?mtid=k9bP2gwMFMso