--- title: "Claude Code Artifacts 開放 Pro／Max 了嗎？設計師該怎麼用完整解析" slug: claude-code-artifacts-pro-max url: https://rar.design/posts/claude-code-artifacts-pro-max published_at: 2026-07-04 modified_at: 2026-07-07 author: "設計師 Riven" category: "AI 設計" tags: ["Anthropic", "設計工作流", "AI 工具", "Claude", "Artifacts", "Claude Code"] access: public_access --- # Claude Code Artifacts 開放 Pro／Max 了嗎？設計師該怎麼用完整解析 > 一段對話變成一頁 live 網頁——從 6/18 Team beta 到 7/2 個人方案，這功能對設計師的真正用途 By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-07-04 AI TOOLS · CLAUDE CODE · 2026▲ 一段 Claude Code session，可以直接長成這樣一頁互動儀表板，發佈到 claude.ai 的私人連結上。QUICK ANSWER是真的。Claude Code 的 Artifacts 從 2026 年 7 月 2 日起開放給 Pro 與 Max 方案——原本這是 6 月 18 日才上線、只給 Team 與 Enterprise 的 beta 功能。它把一段 coding session 的成果變成 claude.ai 上一頁 live、可互動的私人網頁，會隨你的工作即時更新。對設計師最實用的一招，是叫它從你的 component library 一次長出好幾版 UI，攤在同一頁比較。Chapter 01 · What Is It先講清楚：這個 Artifacts 不是你在聊天室看到的那個名字一樣，東西不一樣。你在 claude.ai 聊天室右邊那塊會即時渲染 React、HTML、圖表的 Artifacts，是從「一則對話」長出來的，可以公開發佈、任何人開連結都能看。這次的主角是另一種——Claude Code 的 Artifacts，它從你「整個 coding session」長出來：你的 codebase、你接上的 connectors、你跟 Claude 來回的那串對話，全都是它的材料。具體來說，它是一頁 live、可互動的網頁，Claude Code 把它發佈到 claude.ai 上一個私人網址。你在瀏覽器打開，它會隨著 session 繼續跑而原地更新。終端機裡那些一行行讀起來很累的輸出——一次 PR review、一份 dashboard、一條愈填愈滿的調查時間軸——它把這些變成一頁你用看的、用點的東西。官方自己的定義很精準：這是「工作過程的快照，不是一個應用程式」。這個差別很關鍵，等下講限制的時候會回來咬你一口，先記著。Chapter 02 · Why It Matters重點不是功能，是「誰能用」變了六月剛落地那批，門檻卡在組織方案。你一個人訂 Pro、就算天天用 Claude Code 寫東西，也碰不到。這次的新聞不是功能升級，是把一個原本設計來給團隊「同步進度」的東西，交到一個人手上。對獨立設計師、接案者、跟只有一兩個人的小工作室來說，這個轉變比它聽起來大。你不再需要為了「把畫面攤給人看」去架一頁 demo、開一個 Framer、截一堆圖貼進 Slack。你在跑的那段 session，本身就能吐出一頁能看、能點、能傳的東西。而且它不是靜態截圖——你繼續改，那頁就繼續變。如果你已經在用 Claude Cowork 處理非程式的工作，這次等於是 Claude 的另一條 agentic 產線，也開了同一道門：把過程留成一個可以直接看的成品。▲ Claude Code 是 Anthropic 的終端機編碼工具，Artifacts 是它新長出來的「輸出口」。圖／AnthropicChapter 03 · How It Works從一句話，到一個會自己更新的連結流程短到有點反直覺。你在 session 裡直接開口——「做一個 artifact，把這個 PR 的 diff 逐行標註走一遍」——或者你只說你要一個「用看的比較好懂」的東西，Claude 有時會自己判斷該發一頁。它把頁面寫成一個 .html 或 .md 檔，發佈前問你一次要不要，你按 Yes，它印出網址、瀏覽器自動打開。▲ 從一句話到一頁 live 網頁的四步，以及 6/18 到 7/2 的開放時程。之後每一次它改，都是同一個連結上的新版本。有版本歷史、可以隨時還原，claude.ai 上還有一個 gallery 收著你做過的每一頁。終端機裡按 Ctrl+] 就能重新打開最近那一頁。想在別的 session 改同一頁？把網址丟給它就行——沒有網址，新 session 只會另開一頁新的。▶ 官方示範：Artifacts in Claude Code▲ 官方文件裡真正的 artifact 畫面：分享選單、版本切換、手機 mockup 與數據卡都在同一頁。圖／Anthropic 官方文件最漂亮的地方是「原地更新」。官方最常拿來舉例的是除錯：工程師開會前丟一個事故調查給 Claude Code，它翻完 log，發一頁 artifact——時間軸、可疑的 commit、錯誤率曲線。她從頁面標頭把連結分享出去。等到 standup 開始，Claude 已經隨調查進度重發了兩次，資訊都是最新的。整個團隊看的是同一頁、同一份 context，不用誰再口頭「帶大家走一遍」。Chapter 04 · For Designers設計師的用法：一次生五版，攤開比前面講的除錯、事故時間軸，聽起來都很工程。但官方文件裡藏了一句話，是專門寫給設計師跟前端的——而且它可能是這整個功能對我們最有用的一句：“給我一個 artifact，用我們的 component library，做出這個註冊表單的五個 UX 版本。關鍵字是 component library。它不是憑空給你五張漂亮但不能用的圖，而是從你真實的元件庫長出五個版本——你挑中的那個，是可以直接落地的。這跟一般 AI 生介面最大的差別就在這：它接的是你的真實設計系統，不是它想像中的設計系統。官方文件把設計師常用的幾種 pattern 講得很白。比較方案：「給我設定面板的四種截然不同的排版，變化密度跟分組，排成 grid，每個底下寫一句取捨。」互動微調：「幫這個轉場做一個 artifact，加上 easing 曲線、時長、delay 的滑桿，我拖的時候動畫即時演給我看。」你不是在描述一個動畫，你是在那頁上把它調出來。▲ 設計師最實用的四種玩法：比稿、取捨對照、動效試值、把決策複製成 prompt 送回 session。還有一件事對在意細節的人很重要：Claude 生 artifact 時會套一個內建的設計 skill，自動給頁面一套刻意挑過的配色、字體、排版，不用你多下指令。而且它會先去找你專案裡有沒有現成的設計系統——你只要把 design tokens（顏色、字體、間距）寫在專案的 CLAUDE.md 或 theme 檔裡，它會把你的系統看得比它自己的選擇更優先。這代表你交出去的東西，長得像你的產品，不像 AI 的 demo。如果你還在想「到底哪些工作該交給 AI、哪些該自己留著」，這正好是一個好例子——它適合快速把想法可視化、攤開比較，但最後選哪一版、為什麼選，還是你的判斷。這條界線我在那張「該怎麼用 AI」的判斷地圖裡談過。Chapter 05 · Limits別把它當成能上線的產品回到最前面那句咬人的話：它是快照，不是應用程式。一頁 artifact 就是一頁自我包含的靜態頁，沒有後端。它不能存表單送出的資料、不能在被看的當下打 API、不能有多個路由。整頁被一套很嚴的安全政策包著，連外部的字體、圖片、script 都擋掉，全部 inline 進去，所以它渲染時不對外連任何東西。頁面上限 16 MiB，太大的內嵌圖是最常見的爆量原因。▲ 一張看懂它的邊界：能做什麼、不能做什麼，以及不同方案的分享權限。想要一個有後端、能存資料的內部工具？那不是 artifact 的守備範圍，得自己部署。artifact 的定位很清楚：把「過程」跟「決策」變成看得到、傳得出去的東西，不是拿來出貨你的下一個服務。共同前提：要用 /login 登入 claude.ai（API key、雲端憑證不行）、走 Anthropic API（Bedrock／Vertex／Foundry 不支援）、用 Claude Code CLI 或桌面版 1.13576.0 以上。Chapter 06 · Compared To跟聊天室 Artifacts 到底差在哪同名，但守備範圍不重疊。聊天室的 Artifacts 從一則對話生出來，可以公開發佈成任何人都能開的連結，適合你想快速做一個小工具、一張圖、一個能傳給全世界的 demo。Claude Code 的 Artifacts 從你整個編碼 session 生出來——吃你的 codebase、connectors、對話——組織內私人、預設只有你看得到，不能公開。一句話記法：聊天室 Artifacts 是「做東西給世界看」，Claude Code Artifacts 是「把你正在做的事變成看得到的過程」。前者是產出，後者是快照。兩個都值得你用，只是用在不同的時刻。Chapter 07 · Takeaways它沒有要你變工程師Claude Code 一直被歸類成「工程師的終端機工具」，很多設計師看到黑底終端機就直接跳過。但 Artifacts 這一步，是幫它多開了一個出口——把跑在裡面的過程，變成一頁你看得懂、能點、能傳的東西。對願意碰一點 code 的設計師來說，這等於多了一個免費、即時、從你真實元件長出來的比稿工具。我自己的看法是：不用急著把它想成要取代誰。它更像是把「攤開來比較」這件事的成本壓到接近零。以前你要生五版 UI 攤在一起看，得花半個下午切圖排版；現在你在 session 裡講一句，它從你的設計系統把五版長出來、排成 grid、每版寫一句取捨。你省下的不是設計，是把設計攤給人看的那段功。7 月 2 日這道門開給 Pro／Max 之後，這件事第一次跟「一個人」有關。剩下的，就是你願不願意打開終端機，跟它講第一句話。Related Reads延伸閱讀Claude Cowork 怎麼用？新手入門完整教學與設計師實戰 →Claude 另一條非程式的 agentic 產線，也把「過程變成品」交到個人手上。設計師到底該怎麼用 AI？一張判斷地圖 →決定什麼交給 AI、什麼留給自己——Artifacts 正好落在「快速可視化」那一格。Claude Opus 4.8 是什麼？跑分、誠實升級與設計師的實際用法 →跑 Claude Code 背後的旗艦模型，先搞懂它強在哪。Claude Fable 5 可以做什麼？設計師的完整應用指南 →Anthropic 目前最強的公開模型，設計場景怎麼接。Framer AI 怎麼用？Agents、Workshop 到外部代理一次搞懂 →另一個「AI 幫你長出可上線頁面」的方向，跟 Artifacts 對照著看。AI 會取代 UI/UX 設計師嗎？2026 想轉職的人，問題從來不在這 →工具愈來愈會生介面，設計師的價值該擺哪。Extra · Links官方公告：Claude Code now supports artifacts官方文件：Share session output as artifactsSubscriptionAI 覺醒設計應用攻略AI 工具每週都在更新，我幫你過濾雜訊，只留對設計師真正有用的應用。了解訂閱 →常見問題Q：Claude Code 的 Artifacts 真的開放 Pro 和 Max 了嗎？是。從 2026 年 7 月 2 日起開放給 Pro 與 Max 方案。在這之前（6 月 18 日上線）只開放 Team 與 Enterprise，是一個 beta 功能。Q：它跟聊天室裡的 Artifacts 是同一個東西嗎？名字一樣，機制不同。聊天室 Artifacts 從一則對話生成、可以公開發佈；Claude Code Artifacts 從整個 coding session 生成、預設私人、不能對外公開。Q：設計師沒寫過 code 也能用嗎？能，但你得會用 Claude Code。它跑在終端機或桌面版裡，你用自然語言下指令、它幫你寫頁面。願意碰一點指令列的設計師，就能拿它做多版 UI 比稿、調動效、整理流程。Q：Pro／Max 用戶能把 artifact 分享給客戶嗎？不能直接分享連結。Pro／Max 的 artifact 只對你自己私人可見，組織內分享功能只有 Team 與 Enterprise 才有，而且永遠不能對外公開。要給別人，就請 Claude 把 HTML 檔導出來直接傳。Q：它能拿來做正式上線的網站或工具嗎？不行。它是「工作快照」，一頁靜態網頁、沒有後端，不能存資料、不能在檢視時打 API、不能有多個頁面。要能上線的內部工具，得自己部署。Q：它會照我的設計系統做嗎？會。Claude 生 artifact 時會套內建設計 skill，並且會先找你專案裡的設計系統。把 design tokens（顏色、字體、間距）寫在專案的 CLAUDE.md 或 theme 檔，它會把你的系統看得比自己的預設更優先。Q：要用它有哪些前提條件？要用 /login 登入 claude.ai（API key 或雲端憑證不行）、走 Anthropic API（不支援 Bedrock／Vertex／Foundry）、用 Claude Code CLI 或桌面版 1.13576.0 以上，方案是 Pro／Max／Team／Enterprise。