Claude Design 怎麼用？從一句話做出互動網頁的完整教學

AI TOOLS · 2026

▲ Claude Design 官方主視覺（圖片來源：Anthropic）

CHAPTER 01 · WHAT IS IT

Claude 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 往返，現在壓進一次對話。

當探索的成本趨近於零，整條網頁設計的流程都會被重新排列。提案可以帶三個能點的方向進會議室，而過去你只帶得動三張靜態圖。易用性測試不用排隊等工程師。客戶那句「我想看看別的感覺」，從災難變成五分鐘的事。

CHAPTER 03 · HOW IT WORKS

三個核心機制

把 Claude Design 跟「請 AI 隨手寫個網頁」區分開的，有三個機制。

第一，它會讀你的設計系統。初次設定時，你可以把 GitHub repo、設計檔或整包品牌資產餵給它，Claude 會從裡面整理出一套設計系統：色彩、字型、元件。之後每一個新專案，它都自動套用這套系統，產出看起來像你家的產品，而非某個範本網站。上個月那波更新把這件事又往前推了一步：產出前 Claude 會先拿自己的結果對照你的設計系統做檢查與修正；團隊可以維護多套系統，管理員還能核定一套標準版並鎖定編輯權限。

第二，修改有四種管道，而且都是視覺的。

對話負責大方向，留言負責定位問題，直接編輯負責文字，滑桿負責那些你想微調又懶得用文字描述的東西。四個管道疊起來，你會發現自己幾乎沒有在「寫 prompt」，比較像在跟一個手很快的設計師隔著螢幕指指點點。

第三，web capture。你可以直接從自己現有的網站抓取元素，讓原型從第一秒就長得像你的產品。做改版提案的時候，這個功能是作弊等級的存在：抓現況、描述改法、拿到新版，前後十分鐘。

▲ Claude Design 的工作介面：一邊對話、一邊看設計即時成形（圖片來源：Anthropic）

CHAPTER 04 · GETTING STARTED

從零做出第一個網頁

入口是 claude.ai/design，Pro、Max、Team、Enterprise 方案都內含，用的是你訂閱本身的額度。Enterprise 預設關閉，要請管理員在組織設定打開。實際做一個網頁，流程長這樣：

第一步可以跳過，但跳過的代價是產出會長得像「還不錯的範本」。品牌感的來源在脈絡，而脈絡是你餵的。

第二步的描述越具體越好。給你一段我會這樣下的 prompt，做課程 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）

輸出的目的地遠不只這些。整張地圖攤開來看：

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 押在設計系統上的路線，是目前把這題做得最認真的一家。對設計師來說，這反而是好消息：工具把「做出來」的門檻踩平之後，剩下的恰好是最難被自動化的部分——知道哪個方向值得做。探索變便宜的世界裡，品味的匯率一直在漲。

SUBSCRIPTION

AI 覺醒設計應用攻略

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：能。全程用自然語言加視覺控制項操作：留言、改字、拉滑桿、拖曳對齊，程式碼在背後自動生成，你從頭到尾都碰不到它。這也是它對創辦人、行銷與產品經理友善的原因。