--- title: "Claude Design 怎麼用？從一句話做出互動網頁的完整教學" slug: claude-design-web-guide url: https://rar.design/posts/claude-design-web-guide published_at: 2026-07-26 modified_at: 2026-07-27 author: "設計師 Riven" category: "AI 設計" tags: ["網頁設計", "Anthropic", "AI 工具", "Claude Design"] access: public_access --- # Claude Design 怎麼用？從一句話做出互動網頁的完整教學 > Anthropic Labs 的 AI 設計工具實戰：設計系統匯入、四種修改管道、一路接到 Claude Code By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-07-26 AI TOOLS · 2026▲ Claude Design 官方主視覺（圖片來源：Anthropic）QUICK ANSWERClaude Design 是 Anthropic Labs 在 2026 年 4 月推出的 AI 設計工具：你用一段文字描述想要的網頁，它直接生成可以點、可以捲動的互動版本，背後是真實的 HTML 程式碼。Pro 以上方案內含，入口在 claude.ai/design。設計網頁的流程四步：匯入品牌脈絡、一段話描述需求、用四種管道修改、輸出成 HTML 或交給 Claude Code 接手開發。CHAPTER 01 · WHAT IS ITClaude Design 是什麼四月十七日，Anthropic 旗下的實驗性產品部門 Anthropic Labs 發布了 Claude Design。定位一句話講完：你描述想要的東西，Claude 蓋出第一版，然後你們一來一往，改到它變成你的。範圍不只網頁。原型、線框圖、簡報、一頁式文件、行銷素材都在射程內，但這篇我只聚焦一件事：怎麼用它設計網頁。因為在所有產出類型裡，網頁恰好是 Claude Design 跟其他 AI 設計工具拉開差距最明顯的地方。差距來自一個底層決定：Claude Design 的產出是真的網頁。你拿到的東西可以點、可以捲動、可以在瀏覽器打開，背後是完整的 HTML、CSS 與 JavaScript，還能匯出成獨立檔案。它跳過了「畫一張很像網頁的圖」這個階段，直接給你網頁本人。發布時它由 Claude Opus 4.7 驅動，當時 Anthropic 最強的視覺模型，而這條模型線後來又推進到了 Opus 5。目前是 beta，包含在 Claude Pro、Max、Team 與 Enterprise 訂閱裡，打開 claude.ai/design 就能用，桌面版 App 的側邊欄也直接找得到入口。需求端的熱度很直白：官方公布的數字，上線第一週使用人數就突破了一百萬。如果你還在觀望 Claude 這一整套生態能幫設計師做什麼，我之前整理過官方九十個應用場景的解讀，可以搭配這篇一起看。先看官方的發布影片，一分多鐘就能抓到它的操作感：CHAPTER 02 · WHY IT MATTERS為什麼設計網頁的人該在意設計師的日常裡有一種隱形的配給制。時間只夠你把一兩個方向做完整，於是剩下十個方向死在腦子裡，你甚至來不及知道它們好不好。這件事我們習慣到忘了它是個問題，Anthropic 在發布文裡把它點破了：即使是有經驗的設計師，也得對「探索」實施配給。Claude Design 改變的正是這件事的經濟學。以前多探索一個方向的成本是一個下午，現在是幾句話的時間。兩個早期團隊的說法值得放在這裡。線上教育平台 Brilliant 的資深產品設計師說，他們互動最複雜的頁面，在其他工具要二十多個 prompt 才能重建，在 Claude Design 只要兩個。Datadog 的產品經理則描述了另一種場景：會議還沒散，粗略的想法已經變成能動的原型；過去要一週的 brief、mockup、review 往返，現在壓進一次對話。100 萬＋上線第一週使用人數2Brilliant 重建最複雜頁面的 prompt 數9＋可直接匯出的外部工具連接器“探索一旦變便宜，品味就成了唯一的稀缺品。當探索的成本趨近於零，整條網頁設計的流程都會被重新排列。提案可以帶三個能點的方向進會議室，而過去你只帶得動三張靜態圖。易用性測試不用排隊等工程師。客戶那句「我想看看別的感覺」，從災難變成五分鐘的事。CHAPTER 03 · HOW IT WORKS三個核心機制把 Claude Design 跟「請 AI 隨手寫個網頁」區分開的，有三個機制。第一，它會讀你的設計系統。初次設定時，你可以把 GitHub repo、設計檔或整包品牌資產餵給它，Claude 會從裡面整理出一套設計系統：色彩、字型、元件。之後每一個新專案，它都自動套用這套系統，產出看起來像你家的產品，而非某個範本網站。上個月那波更新把這件事又往前推了一步：產出前 Claude 會先拿自己的結果對照你的設計系統做檢查與修正；團隊可以維護多套系統，管理員還能核定一套標準版並鎖定編輯權限。第二，修改有四種管道，而且都是視覺的。FOUR WAYS TO REFINE · 四種修改管道01 · CHAT對話修改一句話描述要改什麼，負責整體方向的大調整。02 · COMMENT元素上留言直接點在某個區塊上留言，負責「就是這一塊要改」。03 · EDIT直接改文字標題文案不順？點進去打字就好，不用繞一圈描述。04 · SLIDERS滑桿與拖拉Claude 依你的設計即時生成調整滑桿，微調間距與顏色；更新後還能直接拖拉、縮放、對齊元素。對話負責大方向，留言負責定位問題，直接編輯負責文字，滑桿負責那些你想微調又懶得用文字描述的東西。四個管道疊起來，你會發現自己幾乎沒有在「寫 prompt」，比較像在跟一個手很快的設計師隔著螢幕指指點點。第三，web capture。你可以直接從自己現有的網站抓取元素，讓原型從第一秒就長得像你的產品。做改版提案的時候，這個功能是作弊等級的存在：抓現況、描述改法、拿到新版，前後十分鐘。▲ Claude Design 的工作介面：一邊對話、一邊看設計即時成形（圖片來源：Anthropic）CHAPTER 04 · GETTING STARTED從零做出第一個網頁入口是 claude.ai/design，Pro、Max、Team、Enterprise 方案都內含，用的是你訂閱本身的額度。Enterprise 預設關閉，要請管理員在組織設定打開。實際做一個網頁，流程長這樣：WORKFLOW · 從零到網頁的四步1餵脈絡用 web capture 抓現有網站的元素、上傳 logo 與風格參考圖、或連 GitHub 讓它讀 codebase。文件檔（DOCX、PPTX、XLSX）也吃。2一段話描述講清楚頁面結構與氛圍，Claude 生出第一版。3四管道迭代對話改方向、留言改區塊、直接改文字、滑桿改細節，改到像你的東西為止。4輸出分享組織內連結、匯出獨立 HTML，或打包給 Claude Code 蓋成正式版。第一步可以跳過，但跳過的代價是產出會長得像「還不錯的範本」。品牌感的來源在脈絡，而脈絡是你餵的。第二步的描述越具體越好。給你一段我會這樣下的 prompt，做課程 landing page 的場景：PROMPT EXAMPLE幫我做一個線上課程的 landing page：深色背景，第一屏是課程名稱、一句賣點、一顆報名按鈕；往下依序是三個學員痛點、六章課程大綱、講師介紹、常見問題，最後再放一次報名區塊。整體風格延續我剛剛抓進來的網站。第三步請調整心態。官方對第一版的定位講得很誠實：那是拿來讓你「反應」的草稿。第一版的意義在於給你一個可以罵的對象，設計從第二版才真正開始。留足迭代的迴圈，別期待一次到位。CHAPTER 05 · IN PRACTICE三條值得建立的網頁工作流提案探索流。同一份 brief，請它一次出三個方向：一個保守、一個大膽、一個混血。三個都是能點的網頁，開會時直接投影讓客戶自己滑，方向確定再深化選中的那版。這條流程最大的紅利在心理層面：客戶對著會動的東西給的意見，品質遠高於對著靜態圖的想像。這一招有官方認證——六月更新文的收尾，Anthropic 給新手的建議就一句：沒靈感的話，請它為你的下一個 landing page 出三個方向，挑一個值得深化的。Morning Brew 共同創辦人 Alex Lieberman 也說，替新創 Tenex 的網站找設計方向時，Claude Design 是他的第一站。原型測試流。把 Figma 裡的靜態設計稿匯出丟給它，轉成可互動的原型，用組織內分享連結發給受測者，易用性測試當天就能跑。權限有三檔：完全私人、有連結可看、開放編輯。最後一檔可以讓同事直接進來，跟 Claude 在同一個群組對話裡一起改稿。不用開 PR、不用等 code review，這是官方特別強調的點。上線交棒流。設計定稿後，Claude Design 會把整個專案連同設計意圖打包成 handoff bundle，交給 Claude Code 一句指令接手實作。如果你已經在用 Claude Code，反方向也通：在 Claude Design 裡用 /design-sync 拉進 Claude Code 那邊的設計系統，或乾脆在 Claude Code 裡下 /design，不離開終端機就能建立、編輯、同步設計專案——把設計匯進 codebase，或反過來把現有的 code 變成能給人點的 live prototype。官方對交棒的描述我很喜歡：Claude Code 從你既有的工作接續下去，而非對著一張截圖從零重蓋。兩個產品共用同一套額度，來回切換沒有帳務摩擦。Claude Code 對設計師的價值我在另一篇寫過，這裡不展開。▲ 一張圖看懂六月更新：左側是細粒度編輯器，右側是 /design-sync 串接的 Claude Code，中間正是一個 landing page（圖片來源：Anthropic）輸出的目的地遠不只這些。整張地圖攤開來看：EXPORT MAP · 做完之後可以去哪檔案格式獨立 HTMLPDFPPTX設計與協作工具CanvaAdobe ExpressGammaMiro開發與部署Claude CodeLovableReplitVercelWixBase44另有組織內分享連結與資料夾儲存；連接器清單持續增加中。CHAPTER 06 · LIMITS限制與現實先講清楚它還在 beta，功能幾乎每週在改——光六月那一波就疊了數百個穩定性修復——這篇寫的是 2026 年 7 月的狀態。額度是第一個要注意的事。Claude Design 跟聊天、Cowork、Claude Code 共用同一池訂閱額度，重度生成會吃到你其他工作的量。上個月的更新有特別優化 token 效率，官方的說法是平均每輪用更少的 token 做到同樣的結果，錯誤率也大幅下降；但如果你打算拿它跑大量探索，Max 方案或開啟 extra usage 會實際一點。第二是最後一哩。它給你的是九十分初稿的速度，最後十分還是你的事：字距的呼吸、留白的層級、資訊的先後，這些判斷目前沒有任何工具能代勞。差別在於，你把時間花在這十分上，而過去你的時間有八成耗在前面的九十分。第三是正式站的分界。雖然它能輸出獨立 HTML、也能透過連接器推到 Vercel 或 Wix 部署，我自己的分法是：上線之前的所有階段——探索、提案、原型、測試——交給 Claude Design；要長期營運的正式網站，還是交給有 CMS、hosting 與 SEO 底子的建站工具。我的行銷頁主力至今仍是 Framer，之前寫過完整的 CMS 教學。兩者是接力關係：前者管想清楚，後者管跑得久。CHAPTER 07 · COMPARED TO跟 Figma Make 和 Lovable 怎麼選發布當天，媒體幾乎一面倒把它寫成 Figma 挑戰者。看了三個月，我認為這個框架抓錯了重點：它們搶的根本是流程裡的不同段。Figma 的主場是精修與多人協作，Claude Design 的主場是「想法變成可以點的東西」這段路，而這段路過去在 Figma 裡也很痛。真正同一格的對手是 Figma Make 跟 Lovable 這類 prompt 生成工具。粗略的分法：Figma Make 長在 Figma 生態裡，畫布、元件、團隊 library 一脈相承，已經活在 Figma 的團隊用它最順。Lovable 直接奔著能上線的全端應用去，資料庫、登入、部署一條龍。Claude Design 卡在中間偏設計的位置，它賭的是兩件事：設計系統的理解深度（讀你的 codebase，而其他多數工具讀的是你的描述），以及跟 Claude Code 之間的雙向通道。有趣的是這幾家彼此其實在結盟。Lovable 就是 Claude Design 的官方匯出目的地之一，你可以在這裡做完設計、去那裡變成產品。競爭的敘事好看，接力的現實更常見。選擇的判斷點在你的下一步。下一步是進 Figma 精修，選 Figma Make；下一步是直接上線一個應用，選 Lovable；下一步是探索多個方向、對齊品牌、再交給工程或 Claude Code，選 Claude Design。CHAPTER 08 · TAKEAWAYS重點與一個觀點濃縮成三句。Claude Design 把網頁設計的探索成本壓到接近零，而且產出是真實可互動的網頁；設計系統匯入讓產出像你家的產品，這是它跟其他 prompt 工具拉開的關鍵一步；從 web capture 進、從 Claude Code 出，它把自己嵌進了設計到開發的完整鏈路。再給一個觀點。這半年 AI 設計工具的競爭主軸換了題目，從「生不生得出來」換成「像不像你家的東西」。生成能力人人都有，品牌一致性才是分水嶺，而 Claude Design 押在設計系統上的路線，是目前把這題做得最認真的一家。對設計師來說，這反而是好消息：工具把「做出來」的門檻踩平之後，剩下的恰好是最難被自動化的部分——知道哪個方向值得做。探索變便宜的世界裡，品味的匯率一直在漲。RELATED READS · 延伸閱讀Claude 能拿來做什麼？官方 90 個 Use Cases 一次看懂九十個官方應用場景，設計師優先看這五個。→Claude Fable 5 可以做什麼？設計師的完整應用指南新旗艦模型的能力邊界與設計應用。→Claude Opus 5 是什麼？跑分、Effort 旋鈕與實際用法Claude Design 背後那條模型線的最新一站。→Claude Desktop 是什麼？跟網頁版差在哪三個分頁的桌面版，設計師值不值得裝。→Claude Code Artifacts 開放 Pro／Max 了嗎？設計定稿之後，接手實作的那一棒。→Claude Cowork 的 Record a skill 是什麼？錄一次操作，就能教 AI 幫你重複做。→Framer CMS 怎麼用？Collection 到 SEO 的完整教學原型定案之後，正式官網的落腳處。→EXTRA · LINKS · 官方資源 Claude Design 入口：claude.ai/design 官方發布文：Introducing Claude Design by Anthropic Labs 六月更新說明：Claude Design now stays on brand for daily work 產品頁與常見問題：claude.com/product/design 我的建站主力 Framer（推薦連結）：framer.comSUBSCRIPTIONAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 →常見問題Q：Claude Design 要付費嗎？哪些方案能用？A：它包含在 Claude Pro、Max、Team、Enterprise 訂閱裡，不另外收費，但用的是訂閱本身的額度，目前免費方案沒有開放。Enterprise 預設關閉，需要管理員在組織設定啟用。Q：做出來的網頁可以直接上線嗎？A：技術上可以。它能匯出獨立 HTML 檔，也能透過連接器送到 Vercel、Wix 等平台部署。但長期營運的正式網站牽涉 CMS、SEO 與維護，建議把 Claude Design 定位在上線前的設計與原型階段，正式站交給專門的建站工具。Q：Claude Design 跟 Figma Make 差在哪？A：兩者都是用文字描述生成設計，差在生態位置。Figma Make 內建在 Figma，適合後續要進 Figma 精修協作的團隊；Claude Design 的強項是讀取 codebase 建立設計系統，以及跟 Claude Code 的雙向交棒，適合要一路接到開發的流程。Q：可以讓它照我的品牌風格產出嗎？A：可以，這正是它的主打。你可以從 GitHub、設計檔或上傳資產匯入設計系統，Claude 會整理出色彩、字型與元件並自動套用到每個專案，產出前還會對照設計系統自我檢查修正。團隊可以維護多套系統，管理員能核定並鎖定標準版。Q：用 Claude Design 會消耗我的 Claude 額度嗎？A：會。它與聊天、Claude Cowork、Claude Code 共用同一套訂閱額度，用完可以啟用 extra usage 繼續。打算大量生成的話，建議評估 Max 方案。Q：完全不會寫程式也能用嗎？A：能。全程用自然語言加視覺控制項操作：留言、改字、拉滑桿、拖曳對齊，程式碼在背後自動生成，你從頭到尾都碰不到它。這也是它對創辦人、行銷與產品經理友善的原因。