所有你能想到關於設計的工作，Claude Design
現在都能做。
現在都能做。無論是驚艷複雜的動效模擬，用簡單的一句提示詞，就能創建一個能互動的著色器壁紙庫。
提示詞：想像一下，你正在為一款未來作業系統設計壁紙。我們希望它具有互動性，讓人忍不住想擺弄一番。請創建五款不同的交互式著色器壁紙，它們能夠對滑鼠位置甚至點擊做出反應。
還是能套在應用開發過程中的打字機效果，以及文字爆炸。
在應用開發過程中的打字機效果，以及文字爆炸。用一句提示詞，Claude Design 就能給我們設計打字機、單詞漸隱、單詞滑入、字符模糊、點轉文字、打亂、交錯下落、上升進入、字符彈出、加粗進入、傾斜進入共 11 種文本流格式。
在一個響應式網格中，為聊天應用製作 10 種不同的文本流動畫；在 300×300 的單元格中分別展示每種動畫；顯示用戶提問並在下方顯示回復。循環播放。單色顯示。
Claude Design 實現的文本粒子特效，包括對 火 Fire、煙 Smoke、金屬 Metal、風 Wind、雪 Snow 等單詞添加了對應的視覺特效。
提示詞：創建一個非常大的可編輯文本框，預先填充示例文本。對於某些詞語，例如「火」、「煙」、「金屬」、「風」，渲染與這些詞語相匹配的視覺效果和粒子效果。
甚至可以說，Claude Design 一發布就導致 Figma 股價大跌的原因，是因為現在用它做原型設計，不僅審美高，而且完全不需要手工干預。
，不僅審美高，而且完全不需要手工干預。想要給共享單車應用創建一個簡單的 iOS 註冊流程，過去用 Figma 要先找到 iOS 對應的應用套件，然後自己想合適的配色邏輯，添加對應的布局，現在用 Claude Design 直出可交付的方案。
提示詞：為一款共享單車應用創建一個簡單的 iOS 註冊流程。在畫布上展示界面。採用藍橙相間的現代配色方案。
我們從網上找到了 Claude Design 最全的玩法，以及上手使用 Claude Design 的保姆級教學。可以說 Claude 這次的更新，讓過去一年那些做 PPT、做精美網頁設計的工具，瞬間黯然失色了。
Claude Design 體驗地址：
https://claude.ai/design
玩法一：真正的 Vibe Coding 上線
讓 AI 做一個網頁似乎是檢查模型代碼能力，最重要的一項測試。一些 Agent 產品也利用現有的模型，進行優化組合，來控制模型的輸出，以得到更精確、更遵循提示詞指令的網頁。
但現在當 Claude 自己下場來做設計類 Agent，基本上就沒有給別的產品留任何空間了。
有網友用一句話就做出了一個高品質的公司官網，生成的網頁內容 UI 精美、色彩搭配高級，配有符合場景特徵的動效，和其他產品的漸變紫完全不在一個等級。
來源：https://x.com/0x0funky/status/2045392224096280905
並且，Claude Design 生成的網頁，可以無縫銜接到 Claude Code 進行項目的優化和疊代。
除了落地頁，還有網友生成了一個個人儀錶盤，把每天的日程、健康資訊、以及待辦事項等資訊放在一個頁面，並且能自動切換夜間和白天模式。
來源：https://x.com/jerrod_lew/status/2045493141709464047
功能性的網頁，Claude Design 能自動編排好資訊，並且以高品質的 UI 設計呈現。對於一些單純是用來「炫技」的網頁設計，Claude Design 的表現也比其他工具要好。
像這個地球加載系統，也是只用一句提示詞，就能得到可用的結果。
提示詞：設計一個加載指示器原型，顯示一個旋轉的地球儀，帶有真實的地區輪廓，全單色，無文字，尺寸為 200×200，居中顯示在米白色背景上，為其添加旋轉效果。
玩法二：不只是設計，辦公人的 PPT 也可以做
有網友分享了自己使用 Claude Design 做 PPT 的經歷，在 Claude Design 工具里，也有專門一項是用來生成 Slide Deck（幻燈片）。
圖片來源：https://x.com/MatthewBerman/status/2045241894930915466/
其他的辦公場景，像是營銷郵件的設計，通過上傳自己的圖片素材和商業廣告資訊給 Claude Design，它會自動編排好所有的內容，在簡單的疊代優化之後，能得到可以直接發給潛在用戶的廣告郵件。
來源：https://x.com/Salmaaboukarr/status/2045211046680334745?s=20
還有網友用 Claude Design 做了一本電子指南，她提到自己僅用一次提示就完成了這本書的設計。
來源：https://x.com/AunySillyMe/status/2045265533390762157
玩法三：產品、UI 設計、畫原型圖
在軟體開發的過程中，前端一般負責實現產品經理+設計的想法，過去的 AI Coding 告訴我們「前端已死」，但設計的「Taste（品味）」無法被替代。
現在的 Claude Design + Claude Code 就是要設計+產品經理+前端，統統承包，並且讓生成的內容有「taste」。
原型圖一般是產品經理在拿到設計的方案後，給出一款產品成型之前的一個簡單的框架，將頁面的排版布局展現出來，每個功能鍵的交互，使產品的初步構思有一個可視化的展示。
社交媒體上大量的網友分享了自己用 Claude Design 完成的 APP 原型設計，其中不乏交互友好、賞心悅目的各種實例。
來源：https://x.com/runthistown5416/status/2045583979185676303，部分提示詞：設計一款名為「Lumi」的 iOS 和 Android 移動應用——一款以靈性健康為主題，專注於日記和顯化功能的應用。期望輸出：每個主螢幕：高解析度淺色和深色模式的模型、交互式原型流程（最少：引導 → 主頁 → 創建新清單 → 撰寫日誌 → 查看見解）、組件庫（按鈕、輸入框、卡片、底部面板、晶片、模態框變體）和設計系統文檔（顏色、排版、間距、立面）。
無論是何種類型的 APP，Claude Design 都能找到最適合對應主題的設計方案。有網友設計了一個簡單的、基於 AI 的遊戲化生活管理應用程序，在生成的原型圖裡，有經典的熱力圖、各種成就等級系統，和課程等詳細內容
來源：https://x.com/Eli5defi/status/2045544042591854804
玩法四：影片動畫也能生成
基於強大的代碼能力，Claude 能組合不同的動效庫，生成各種各樣的動畫。例如在 Claude Design 的官方案例展示里，他們使用一句提示詞，生成了一段宇宙運動的模擬動畫。
創建一個基於精靈的動畫，提供關於天體距離和大小的趣味知識。將使用不同大小圓形作為天體的抽象動畫與文字動畫相結合。採用單色調、Helvetica字體配色方案。
也有網友輸入提示詞「請製作一個基於精靈圖的動畫，介紹任天堂的歷史趣聞。將各種動畫與文字動畫結合起來。使用符合任天堂品牌風格的配色方案和字體。」
的動畫，介紹任天堂的歷史趣聞。將各種動畫與文字動畫結合起來。使用符合任天堂品牌風格的配色方案和字體。」來源：https://x.com/riku720720/status/2045378538422018195
最後生成的動畫不僅詳細介紹了任天堂的歷史趣聞，同時採用了動畫設計來銜接和過渡不同的頁面，整個動畫時長 1 分 02 秒。
也有網友直接給 Claude Design 的部落格文章和一些推文粘貼進去，就生成了這個 30 秒的動畫影片。
來源：https://x.com/petergyang/status/2045181813484884396
所謂的精靈圖 Sprite，又叫拼合圖，是一個電腦圖形學術語，也是目前在 Web 前端開發中常用的圖像拼合技術，是指當一張二維圖像集成進場景中，成為整個顯示圖像的一部分時，這張圖就稱為精靈圖。
我們看到這些由 Claude Design 生成的動畫，都是使用精靈圖來切換顯示不同的圖像、排版、控制紋理尺寸等操作，保證動畫效果的同時提升網頁的渲染性能。
實測上手，和來自官方的 7 個實用小技巧
目前 Claude Design 僅向 Pro、Max、Team 和 Enterprise 訂閱用戶開放，並且有每周額度限制。我們在創建三個 Claude Design 任務之後，基本上都是動效風格比較豐富的項目，占據了 37% 的周額度。
通過 Claude 網頁側邊欄的 Design 一行，或是直接輸入網址 https://claude.ai/design 我們可以訪問 Claude Design 的首頁。
和一般的網頁生成 Agent 工具不同，Claude 並沒有在首頁放一個大大的對話框，而是大多數的傳統設計工具一樣。主頁左邊可以讓我們新建不同的項目，原型、幻燈片、從模板開始或者其他類型，還有一個設計系統的設置。
數的傳統設計工具一樣。主頁左邊可以讓我們新建不同的項目，原型、幻燈片、從模板開始或者其他類型，還有一個設計系統的設置。在原型設計中，又分為線框圖和高保真內容，幻燈片則可以開啟「使用演講者備註」的功能，以及選擇已有的模板，從模板開始設計。
輸入項目名字，點擊創建，來到項目首頁。Claude Design 在左側邊欄為我們提供了對話窗口，而在右邊則可以用先畫草圖的方式，讓 Claude Design 通過草圖來完成設計。
我們輸入了一句簡單的提示詞，「幫我設計一個 Spotify 2026 wrapped 的年度總結動畫」，等 Claude 自動跑完所有的流程，它最後生成了一段 44s 的動畫，包括年度歌手、音樂風格、收聽時長等資訊，並且提供了 Tweak，我們可以直接在右側邊欄進行修改。
在測試 PPT 製作時，我們發送了一句簡單的提示詞，Claude 會生成一份問卷，要求我們回答，最後的 PPT 是什麼形態，例如語言的要求、頁數的要求、演講者備註是否要詳細、聽眾技術背景等等。
最後，Claude Design 生成的 40 頁 PPT，在內容上不僅要比一些動不動深度研究幾十分鐘的工具要全面，並且還直接在下方提供了講稿，還允許我們對主題進行修改，使用深色/午夜藍/暖色調，以及對字體大小的修改等。
提示詞：我要給高中生做演講，主題是大語言模型的發展--從 2026 到 2030，時長是一個小時，幫我設計一份 PPT。
Claude Design 的設計師 Ryan Mather，在 X 上也分享了一些充分利用 Claude Design 的小技巧。
1.
搭建你的設計系統和核心界面。花一個小時進行設置和完善是值得的。
2.
與工程師實時疊代。通常在一次會議中，就能和工程師一起設計出新功能。因為 Claude 在做原型方面非常快，我們可以把討論保持在較高層次，一邊圍繞概念和約束進行頭腦風暴，一邊看著它們逐漸成形。
3.
使用評論工具進行快速、精準的修改。在完成一個粗略的初稿之後，可能會發現有幾十個細節想要調整。用語言去描述所有這些修改會很棘手，所以應該使用評論工具，直接指出並進行修改。
4.
讓 Claude 為我們的想法製作影片演示。Claude Design 幾乎可以做到我們能想到的任何事情，它更像 Claude Code，而不是一個基於畫布的設計工具。
5.
使用連接器（尤其是 docs / slack）。 一旦設置完成，我們可以發送類似這樣的提示：「請閱讀產品交流會的會議記錄，並創建一個演示文稿，探討所有出現問題的不同設計解決方案」。
6.
讓 Claude 即時創建定製工具。通常情況下，不要試圖像使用基於畫布的工具那樣去使用 Claude Design。它是另一種存在，擁有不同的能力。多嘗試，玩出點花樣！你會發現自己的設計方式已經遠遠超出了過去的思路。
7.
知道何時放慢節奏，親手完成。新的圖標、點綴插畫、命名。有些細節始終會產生超出預期的影響。很容易被 Agent 設計的高速節奏捲入其中。知道何時放慢下來，本身也是一門藝術。
就像每個學校、公司都會有自己的品牌使用指引，規範顏色、字體、Logo 等形象，Claude Design 的設計系統，也能讓我們一次性規範這些設計資源。
得益於 Claude 目前強大的生態系統， Claude Design 的能力有機會真正融入到 AI 工作流里，徹底改變過去那些 AI 網頁生成類工具里，輸出過於泛化、忽視現有設計語言，以及很難以在團隊流程中復用等問題。
