← 所有文章

Claude Code /design技能:研究預覽版能做什麼

出自指南: Claude Code Comprehensive Guide

Claude Code的/design技能是Anthropic在第34週週報(2026年8月17日至21日)中宣布的研究預覽功能:給它一段需求描述,它就會以artifact的形式發布一張由可編輯UI畫板組成的畫布;您從中挑選一塊畫板,稍作調整,再讓Claude動手實作。它可在CLI與Claude Code Desktop中執行,需要v2.1.233或更新版本,並提供給Pro、Max、Team與Enterprise方案。1由於它發布到artifacts,因此同樣受artifacts前置條件的約束:工作階段必須以claude.ai帳號登入,並使用Anthropic API。5發布之初的公開紀錄只有三頁簡短內容(週報、技能本身的描述,以及週報所連結的artifacts可用性頁面),所以這篇初探也保持精簡:Anthropic說這個技能能做什麼、您會得到什麼、它需要什麼,以及已記載的範圍止於何處。 {.answer-block}

重點摘要

  • 一道指令,一張畫布。/design <brief>會讓Claude草擬一份多畫板設計,並以artifact的形式發布;完成後Claude會印出連結。1
  • 結果分為兩個層級。若您的帳號允許儲存,就能取得視覺化編輯器,並透過Save為所有人發布新版本;其他人則只能取得可檢視並匯出(PNG/PDF)的預覽。2
  • 版本下限是v2.1.233(2026年8月14日),適用於Pro、Max、Team或Enterprise方案,可在CLI或Claude Code Desktop中使用,另外還需符合artifacts的前置條件:以claude.ai登入並使用Anthropic API,且組織未啟用CMEK、HIPAA與零資料保留。135
  • 預覽版止步於畫布。週報與描述都沒有列出任何旗標或畫板數量限制;描述允許重新初始化(re-seeding)畫布卻未加以定義,並指明既有畫布應在其已發布的Artifact中編輯。24

/design技能能做什麼?

Anthropic的第34週週報用一段話描述它:這個技能「brings Claude Design’s artboard workflow into the CLI and Claude Code Desktop, built on artifacts. Run it with a brief and Claude publishes a canvas of editable artboards for your UI. Pick one, tweak it, then have Claude implement it.」(將Claude Design的畫板工作流程帶進CLI與Claude Code Desktop,建構於artifacts之上;給它一段需求描述,Claude就會為您的UI發布一張可編輯畫板的畫布;挑一塊、調整一下,再讓Claude實作。)1官方範例是一段產品需求描述,而不是規格文件:

> /design redesign the composer based on what people actually use it for

Claude會印出已發布畫布的連結,週報中的卡片還嵌入了一段示範影片。1您開啟畫布,挑選一塊畫板,然後告訴Claude要實作哪個方案。1這個技能只負責第一步,它自己的描述在最後一句也說得很清楚:「Only for CREATING or re-seeding a canvas; an existing one is edited in its published Artifact.」(僅用於建立或重新初始化畫布;既有畫布在其已發布的Artifact中編輯。)2第二步發生在artifact裡,第三步則是Claude Code針對您的程式碼庫所做的日常工作。

技能的產品內描述補充了具體機制。它把輸出稱為「a multi-artboard visual design published as an Artifact that runs Claude Design’s canvas editor (an early preview of Claude Design inside Claude Code)」(以Artifact形式發布的多畫板視覺設計,該Artifact執行Claude Design的畫布編輯器,也就是Claude Design在Claude Code中的早期預覽),草擬方式是「as .dc.html artboards laid out on one pan/zoom canvas」(以.dc.html畫板的形式排列在一張可平移/縮放的畫布上)。2一次執行會把所有畫板放進同一張畫布,每塊畫板都是一個.dc.html檔案。

描述中的觸發條件也意味著您不必親自輸入這道斜線指令。它告訴Claude,「when someone wants a design, mockup, wireframe, UI or screen design, landing page, poster, flyer, brochure, banner, card, one-pager, or any visual layout they would rather tweak by hand than in code」(當有人想要設計、視覺稿、線框圖、UI或畫面設計、到達網頁、海報、傳單、手冊、橫幅、卡片、單頁文件,或任何他們寧可手動調整而非用程式碼調整的視覺版面時)就使用這個技能,因此一句想要視覺稿的白話請求就足以自行觸發/design2

您會得到什麼?

描述依帳號區分結果。若您的帳號允許儲存,「they refine every element visually (click-to-select, a properties panel, inline text editing, undo/redo) and Save publishes a new version for everyone.」(他們能以視覺化方式修改每一個元素:點選選取、屬性面板、行內文字編輯、復原/重做,而Save會為所有人發布新版本。)否則「they get a view-and-export (PNG/PDF) preview of your draft.」(他們得到的是您草稿的預覽,可檢視並匯出為PNG/PDF。)2

描述的範圍也超出了應用程式UI。它列出「UI mockups and screen flows, landing pages, marketing and social graphics, and print pieces」(UI視覺稿與畫面流程、到達網頁、行銷與社群圖片,以及印刷品),並附上「posters, flyers, brochures as single-page artboards; memos and reports as one flowing artboard」(海報、傳單、手冊作為單頁畫板;備忘錄與報告作為一塊連續的畫板)。2週報中的範例是UI;這份更寬的清單仍然是Anthropic自己給出的適用範圍聲明。

它需要什麼?

項目 已記載內容 來源
最低版本 v2.1.233(2026年8月14日)或更新 週報、發行說明13
方案 Pro、Max、Team、Enterprise 週報1
使用介面 CLI與Claude Code Desktop 週報1
輸出 執行Claude Design畫布編輯器的Artifact 技能描述2
畫板格式 .dc.html,一張可平移/縮放的畫布 技能描述2
完整編輯 僅限您的帳號允許儲存時 技能描述2
替代方案 檢視並匯出PNG/PDF 技能描述2
Artifacts:方案 Pro、Max、Team或Enterprise;Team方案預設開啟artifacts,Enterprise方案則需由擁有者(Owner)在claude.ai管理設定中啟用 Artifacts可用性5
Artifacts:驗證 由claude.ai帳號支援的工作階段,透過CLI或桌面應用程式中的/login登入;使用API金鑰、閘道權杖或雲端供應商憑證的工作階段無法發布 Artifacts可用性5
Artifacts:模型供應商 Anthropic API;不適用於Amazon Bedrock、Google Cloud的Agent Platform或Microsoft Foundry Artifacts可用性5
Artifacts:組織政策 組織未啟用客戶自管加密金鑰(CMEK)、HIPAA與零資料保留 Artifacts可用性5
Artifacts:使用介面 Claude Code CLI 2.1.183或更新版本,或Claude桌面應用程式1.13576.0或更新版本(CLI的版本下限低於/design的下限;週報未另外列出桌面應用程式的版本);在Agent SDK、GitHub Action與MCP伺服器環境中,以及設定了CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC時預設關閉 Artifacts可用性5
狀態 研究預覽版 週報1

claude --version檢查您的版本;週報涵蓋的是v2.1.234到v2.1.239這個區間,但把要求訂在早一個版本。1快速入門說明了安裝與首次工作階段的設定。

Artifacts這幾列之所以重要,是因為週報稱這個技能「built on artifacts」(建構於artifacts之上),並在其/design卡片中以「Where artifacts are available」(artifacts的可用範圍)為題連結到可用性頁面。1Anthropic在那裡的措辭相當嚴格:「Artifacts require every condition below. When one is not met, Claude writes a local HTML file or says it cannot publish instead.」(Artifacts要求符合以下每一項條件;任一條件不符時,Claude會改為寫入本機HTML檔案,或說明無法發布。)5使用API金鑰的工作階段,或執行在Amazon Bedrock、Google Cloud的Agent Platform或Microsoft Foundry上的工作階段,即使符合版本下限,仍然無法發布畫布。5同一頁面還描述了另一個內建的design技能,負責為Claude建構的每個artifact設定樣式(v2.1.182或更新版本),那並不是/design5

預覽版止步於何處?

這三頁內容就是關於該技能本身的全部公開紀錄;Claude Design自己的產品頁面描述的是編輯器,而非這個技能。我寧可列出它們遺漏的內容,也不願妄加猜測。4

  • 沒有旗標或選項。週報展示的是/design後面接一段文字。週報與描述都沒有列出用於畫板數量、畫布尺寸、裝置外框或輸出層級的開關。
  • 沒有說明畫板數量。週報的「a canvas of editable artboards」(一張可編輯畫板的畫布)與描述的「multi-artboard」(多畫板)是僅有的數量描述。
  • 重新初始化,未加定義。描述允許「re-seeding a canvas」(重新初始化畫布),卻沒有說明重新初始化需要什麼,並指明既有畫布的路徑是「in its published Artifact」(在其已發布的Artifact中)編輯。2
  • 沒有解釋儲存權限的門檻。描述提到「where saving is enabled for the user’s account」(使用者帳號啟用了儲存功能時),卻沒有指明是哪些帳號,也沒有說明除了實際執行之外要如何確認。2Artifacts頁面列出了誰能發布;同樣的條件是否也決定編輯層級,則未說明。5
  • 沒有交代實作過程。週報說您告訴Claude要實作哪個方案;之後Claude是讀取.dc.html畫板,還是依據您的描述來做,並未說明。1

週報將該技能標示為研究預覽版,因此以上各項都可能在不另行通知的情況下改變。1

第34週還推出了什麼?

週報中還有另外兩項重點功能。Concise是新的內建輸出風格(v2.1.237):Claude會先給出結果並省略開場白,同時工作深度與Default風格一致,而錯誤回報、安全警告與破壞性操作確認仍保持完整;在~/.claude/settings.json中設定"outputStyle": "Concise",或在/config中選取,然後執行/clear或開啟新的工作階段。Remote Control也結束了研究預覽階段:任何執行claude remote-control的機器都會以裝置卡片的形式出現在Claude行動應用程式的Code分頁中,點一下即可在那裡開始工作階段。1

常見問題

Claude Code中的/design技能是什麼?

一項研究預覽版技能:接收一段需求描述,草擬一份多畫板設計,並以執行Claude Design畫布編輯器的artifact形式發布。您挑選一塊畫板,然後請Claude實作。12

/design需要哪個版本的Claude Code?

v2.1.233或更新版本,於2026年8月14日發布。執行claude --version即可確認。13

哪些方案可以使用/design?

Pro、Max、Team與Enterprise,可在CLI與Claude Code Desktop中使用。1

我可以編輯/design產生的畫板嗎?

僅限您的帳號允許儲存時:屆時您會取得點選選取、屬性面板、行內文字編輯、復原/重做,以及可為所有人發布新版本的Save。否則您得到的是可檢視並匯出(PNG/PDF)的預覽。2

/design能搭配API金鑰使用,或在Bedrock、Google Cloud或Foundry上使用嗎?

就文件所載,不能。該技能發布到artifacts,而Anthropic的artifacts頁面指出,使用API金鑰、閘道權杖或雲端供應商憑證的工作階段無法發布,且artifacts不適用於Amazon Bedrock、Google Cloud的Agent Platform或Microsoft Foundry。您需要以claude.ai登入並使用Anthropic API。Artifacts頁面稱Claude屆時會寫入本機HTML檔案或說明無法發布;至於/design會怎麼做,兩處來源都沒有說明。5

/design只適用於應用程式UI嗎?

不是。描述還列出了到達網頁、行銷與社群圖片、海報、傳單與手冊等印刷品,以及作為一塊連續畫板的備忘錄與報告。2

重點整理

給產品工程師: - 針對真實的畫面,用白話提出視覺稿需求;描述中的觸發條件讓Claude能依這句請求自行呼叫該技能,不必輸入斜線指令。2 - 像Anthropic的範例那樣,用自然語言寫需求描述;已記載的範例就是自然語言,週報與描述都沒有列出任何旗標。1 - 自行記下您選了哪塊畫板;週報從未說明您選擇之後Claude會讀取什麼。1

給設計師: - 在安排審閱回合之前,先確認您的帳號是否允許儲存;沒有它,畫布就只能檢視與匯出。2 - 一頁傳單或一張社群圖片與UI流程一樣值得一試;兩者都在聲明的適用範圍之內。2

給團隊主管: - 確認全團隊都使用v2.1.233或更新版本,並符合artifacts的前置條件(claude.ai登入、Anthropic API、未啟用CMEK、HIPAA或零資料保留),同時要預期這個技能在掛著研究預覽版標籤期間仍會變動。135 - 僅圍繞已記載的三個步驟建立流程;旗標、限制與重新初始化仍未見於文件。4

畫板一旦存在,為AI代理程式介面設計說明了它仍須滿足的互動原則。



  1. Anthropic,“What’s new in Claude Code: Week 34, August 17 to 21, 2026”/design研究預覽版(畫板工作流程、CLI與Claude Code Desktop、方案、v2.1.233版本要求、範例提示詞、畫布連結)、Concise輸出風格(v2.1.237)以及Remote Control裝置卡片。查核日期:2026年8月25日。 

  2. Anthropic,隨CLI一同提供的Claude Code design技能描述(產品內技能中繼資料;無公開URL)。逐字引用了artifact與畫布編輯器輸出、.dc.html畫板、啟用儲存的編輯層級與可檢視並匯出(PNG/PDF)層級的對比,以及所支援設計類型的清單。查核日期:2026年8月25日。 

  3. Anthropic,Claude Code v2.1.233發行說明,2026年8月14日:僅用於引證最低版本的發布日期。查核日期:2026年8月25日。 

  4. 作者截至2026年8月25日對來源1、2與5的解讀;所列空白是這些文件中的缺漏,而非對該技能實際行為的斷言。 

  5. Anthropic,“Artifacts”的Availability(可用性)一節:用於引證五列要求表(方案、驗證、模型供應商、組織政策、使用介面)、「every condition below」(以下每一項條件)的措辭,以及對API金鑰、閘道權杖、雲端供應商憑證、Bedrock、Google Cloud Agent Platform與Microsoft Foundry的排除。查核日期:2026年8月25日。 

相關文章

Anthropic Python SDK 1.0遷移:手動處理或交給Claude Code

將anthropic 0.x遷移到1.0:httpx2、非同步原始回應、Bedrock區域。可依MIGRATION.md手動遷移,或使用Claude Code的/claude-api upgrade python。

2 分鐘閱讀

Install and Update Claude Code CLI: Mac, Linux, Windows

Every way to install, update, pin, and uninstall the Claude Code CLI -- native installer, Homebrew, winget, or npm -- on…

7 分鐘閱讀

Ralph 迴圈:我如何在夜間運行自主 AI 代理

我建構了一套自主代理系統,搭配停止鉤子、生成預算與檔案系統記憶體。以下是失敗經驗與真正能交付程式碼的方法。

3 分鐘閱讀