實測Claude Design：小白也能做出專業(yè)級設(shè)計｜附最全玩法+官方實用技巧

所有你能想到關(guān)于設(shè)計的工作，Claude Design 現(xiàn)在都能做。

無論是驚艷復(fù)雜的動效模擬，用簡單的一句提示詞，就能創(chuàng)建一個能互動的著色器壁紙庫。

▲提示詞：想象一下，你正在為一款未來操作系統(tǒng)設(shè)計壁紙。我們希望它具有互動性，讓人忍不住想擺弄一番。請創(chuàng)建五款不同的交互式著色器壁紙，它們能夠?qū)κ髽?biāo)位置甚至點擊做出反應(yīng)。

還是能套在應(yīng)用開發(fā)過程中的打字機效果，以及文字爆炸。

用一句提示詞，Claude Design 就能給我們設(shè)計打字機、單詞漸隱、單詞滑入、字符模糊、點轉(zhuǎn)文字、打亂、交錯下落、上升進入、字符彈出、加粗進入、傾斜進入共 11 種文本流格式。

▲在一個響應(yīng)式網(wǎng)格中，為聊天應(yīng)用制作 10 種不同的文本流動畫；在 300×300 的單元格中分別展示每種動畫；顯示用戶提問并在下方顯示回復(fù)。循環(huán)播放。單色顯示。

Claude Design 實現(xiàn)的文本粒子特效，包括對 火 Fire、煙 Smoke、金屬 Metal、風(fēng) Wind、雪 Snow 等單詞添加了對應(yīng)的視覺特效。

▲提示詞：創(chuàng)建一個非常大的可編輯文本框，預(yù)先填充示例文本。對于某些詞語，例如「火」、「煙」、「金屬」、「風(fēng)」，渲染與這些詞語相匹配的視覺效果和粒子效果。

甚至可以說，Claude Design 一發(fā)布就導(dǎo)致 Figma 股價大跌的原因，是因為現(xiàn)在用它做原型設(shè)計，不僅審美高，而且完全不需要手工干預(yù)。

想要給共享單車應(yīng)用創(chuàng)建一個簡單的 iOS 注冊流程，過去用 Figma 要先找到 iOS 對應(yīng)的應(yīng)用套件，然后自己想合適的配色邏輯，添加對應(yīng)的布局，現(xiàn)在用 Claude Design 直出可交付的方案。

▲提示詞：為一款共享單車應(yīng)用創(chuàng)建一個簡單的 iOS 注冊流程。在畫布上展示界面。采用藍橙相間的現(xiàn)代配色方案。

我們從網(wǎng)上找到了 Claude Design 最全的玩法，以及上手使用 Claude Design 的保姆級教程。可以說 Claude 這次的更新，讓過去一年那些做 PPT、做精美網(wǎng)頁設(shè)計的工具，瞬間黯然失色了。

Claude Design 體驗地址：https://claude.ai/design

玩法一：真正的 Vibe Coding 上線

讓 AI 做一個網(wǎng)頁似乎是檢查模型代碼能力，最重要的一項測試。一些 Agent 產(chǎn)品也利用現(xiàn)有的模型，進行優(yōu)化組合，來控制模型的輸出，以得到更精確、更遵循提示詞指令的網(wǎng)頁。

但現(xiàn)在當(dāng) Claude 自己下場來做設(shè)計類 Agent，基本上就沒有給別的產(chǎn)品留任何空間了。

有網(wǎng)友用一句話就做出了一個高品質(zhì)的公司官網(wǎng)，生成的網(wǎng)頁內(nèi)容 UI 精美、色彩搭配高級，配有符合場景特征的動效，和其他產(chǎn)品的漸變紫完全不在一個等級。

▲來源：https://x.com/0x0funky/status/2045392224096280905

并且，Claude Design 生成的網(wǎng)頁，可以無縫銜接到 Claude Code 進行項目的優(yōu)化和迭代。

除了落地頁，還有網(wǎng)友生成了一個個人儀表盤，把每天的日程、健康信息、以及待辦事項等信息放在一個頁面，并且能自動切換夜間和白天模式。

▲來源：https://x.com/jerrod_lew/status/2045493141709464047

功能性的網(wǎng)頁，Claude Design 能自動編排好信息，并且以高品質(zhì)的 UI 設(shè)計呈現(xiàn)。對于一些單純是用來「炫技」的網(wǎng)頁設(shè)計，Claude Design 的表現(xiàn)也比其他工具要好。

像這個地球加載系統(tǒng)，也是只用一句提示詞，就能得到可用的結(jié)果。

▲提示詞：設(shè)計一個加載指示器原型，顯示一個旋轉(zhuǎn)的地球儀，帶有真實的地區(qū)輪廓，全單色，無文字，尺寸為 200×200，居中顯示在米白色背景上，為其添加旋轉(zhuǎn)效果。

玩法二：不只是設(shè)計，辦公人的 PPT 也可以做

有網(wǎng)友分享了自己使用 Claude Design 做 PPT 的經(jīng)歷，在 Claude Design 工具里，也有專門一項是用來生成 Slide Deck（幻燈片）。

▲圖片來源：https://x.com/MatthewBerman/status/2045241894930915466/

其他的辦公場景，像是營銷郵件的設(shè)計，通過上傳自己的圖片素材和商業(yè)廣告信息給 Claude Design，它會自動編排好所有的內(nèi)容，再簡單的迭代優(yōu)化之后，能得到可以直接發(fā)給潛在用戶的廣告郵件。

▲ 來源：https://x.com/Salmaaboukarr/status/2045211046680334745?s=20

還有網(wǎng)友用 Claude Design 做了一本電子指南，她提到自己僅用一次提示就完成了這本書的設(shè)計。

▲來源：https://x.com/AunySillyMe/status/2045265533390762157

玩法三：產(chǎn)品、UI 設(shè)計、畫原型圖

在軟件開發(fā)的過程中，前端一般負責(zé)實現(xiàn)產(chǎn)品經(jīng)理+設(shè)計的想法，過去的 AI Coding 告訴我們「前端已死」，但設(shè)計的「Taste（品味）」無法被替代。

現(xiàn)在的 Claude Design + Claude Code 就是要設(shè)計+產(chǎn)品經(jīng)理+前端，統(tǒng)統(tǒng)承包，并且讓生成的內(nèi)容有「taste」。

原型圖一般是產(chǎn)品經(jīng)理在拿到設(shè)計的方案后，給出一款產(chǎn)品成型之前的一個簡單的框架，將頁面的排版布局展現(xiàn)出來，每個功能鍵的交互，使產(chǎn)品的初步構(gòu)思有一個可視化的展示。

社交媒體上大量的網(wǎng)友分享了自己用 Claude Design 完成的 APP 原型設(shè)計，其中不乏交互友好、賞心悅目的各種實例。

▲來源：https://x.com/runthistown5416/status/2045583979185676303，部分提示詞：設(shè)計一款名為「Lumi」的 iOS 和 Android 移動應(yīng)用——一款以靈性健康為主題，專注于日記和顯化功能的應(yīng)用。期望輸出：每個主屏幕：高分辨率淺色和深色模式的模型、交互式原型流程（最少：引導(dǎo) → 主頁 → 創(chuàng)建新清單 → 撰寫日志 → 查看見解）、組件庫（按鈕、輸入框、卡片、底部面板、芯片、模態(tài)框變體）和設(shè)計系統(tǒng)文檔（顏色、排版、間距、立面）。

無論是何種類型的 APP，Claude Design 都能找到最適合對應(yīng)主題的設(shè)計方案。有網(wǎng)友設(shè)計了一個簡單的、基于 AI 的游戲化生活管理應(yīng)用程序，在生成的原型圖里，有經(jīng)典的熱力圖、各種成就等級系統(tǒng)，和課程等詳細內(nèi)容

▲來源：https://x.com/Eli5defi/status/2045544042591854804

玩法四：視頻動畫也能生成

基于強大的代碼能力，Claude 能組合不同的動效庫，生成各種各樣的動畫。例如在 Claude Design 的官方案例展示里，他們使用一句提示詞，生成了一段宇宙運動的模擬動畫。

▲創(chuàng)建一個基于精靈的動畫，提供關(guān)于天體距離和大小的趣味知識。將使用不同大小圓形作為天體的抽象動畫與文字動畫相結(jié)合。采用單色調(diào)、Helvetica字體配色方案。

也有網(wǎng)友輸入提示詞「請制作一個基于精靈圖的動畫，介紹任天堂的歷史趣聞。將各種動畫與文字動畫結(jié)合起來。使用符合任天堂品牌風(fēng)格的配色方案和字體。」

▲來源：https://x.com/riku720720/status/2045378538422018195

最后生成的動畫不僅詳細介紹了任天堂的歷史趣聞，同時采用了動畫設(shè)計來銜接和過渡不同的頁面，整個動畫時長 1 分 02 秒。

也有網(wǎng)友直接給 Claude Design 的博客文章和一些推文粘貼進去，就生成了這個 30 秒的動畫視頻。

▲來源：https://x.com/petergyang/status/2045181813484884396

所謂的精靈圖 Sprite，又叫拼合圖，是一個計算機圖形學(xué)術(shù)語，也是目前在 Web 前端開發(fā)中常用的圖像拼合技術(shù)，是指當(dāng)一張二維圖像集成進場景中，成為整個顯示圖像的一部分時，這張圖就稱為精靈圖。

我們看到這些由 Claude Design 生成的動畫，都是使用精靈圖來切換顯示不同的圖像、排版、控制紋理尺寸等工作，保證動畫效果的同時提升網(wǎng)頁的渲染性能。

實測上手，和來自官方的 7 個實用小技巧

目前 Claude Design 僅向 Pro、Max、Team 和 Enterprise 訂閱用戶開放，并且有每周額度限制。我們在創(chuàng)建三個 Claude Design 任務(wù)之后，基本上都是動效風(fēng)格比較豐富的項目，占據(jù)了 37% 的周額度。

通過 Claude 網(wǎng)頁側(cè)邊欄的 Design 一行，或是直接輸入網(wǎng)址 https://claude.ai/design 我們可以訪問 Claude Design 的首頁。

和一般的網(wǎng)頁生成 Agent 工具不同，Claude 并沒有在首頁放一個大大的對話框，而是大多數(shù)的傳統(tǒng)設(shè)計工具一樣。主頁左邊可以讓我們新建不同的項目，原型、幻燈片、從模板開始或者其他類型，還有一個設(shè)計系統(tǒng)的設(shè)置。

在原型設(shè)計中，又分為線框圖和高保真內(nèi)容，幻燈片則可以開啟「使用演講者備注」的功能，以及選擇已有的模板，從模板開始設(shè)計。

輸入項目名字，點擊創(chuàng)建，來到項目首頁。Claude Design 在左側(cè)邊欄為我們提供了對話窗口，而在右邊則可以用先畫草圖的方式，讓 Claude Design 通過草圖來完成設(shè)計。

我們輸入了一句簡單的提示詞，「幫我設(shè)計一個 Spotify 2026 wrapped 的年度總結(jié)動畫」，等 Claude 自動跑完所有的流程，它最后生成了一段 44s 的動畫，包括年度歌手、音樂風(fēng)格、收聽時長等信息，并且提供了 Tweak，我們可以直接在右側(cè)邊欄進行修改。

在測試 PPT 制作時，我們發(fā)送了一句簡單的提示詞，Claude 會生成一份問卷，要求我們回答，最后的 PPT 是什么形態(tài)，例如語言的要求、頁數(shù)的要求、演講者備注是否要詳細、聽眾技術(shù)背景等等。

最后，Claude Design 生成的 40 頁 PPT，在內(nèi)容上不僅要比一些動不動深度研究幾十分鐘的工具要全面，并且還直接在下方提供了講稿，還允許我們對主題進行修改，使用深色/午夜藍/暖色調(diào)，以及對字體大小的修改等。

▲提示詞：我要給高中生做演講，主題是大語言模型的發(fā)展--從 2026 到 2030，時長是一個小時，幫我設(shè)計一份 PPT。

Claude Design 的設(shè)計師 Ryan Mather，在 X 上也分享了一些充分利用 Claude Design 的小技巧。

1. 搭建你的設(shè)計系統(tǒng)和核心界面。花一個小時進行設(shè)置和完善是值得的。
2. 與工程師實時迭代。通常在一次會議中，就能和工程師一起設(shè)計出新功能。因為 Claude 在做原型方面非常快，我們可以把討論保持在較高層次，一邊圍繞概念和約束進行頭腦風(fēng)暴，一邊看著它們逐漸成形。
3. 使用評論工具進行快速、精準(zhǔn)的修改。在完成一個粗略的初稿之后，可能會發(fā)現(xiàn)有幾十個細節(jié)想要調(diào)整。用語言去描述所有這些修改會很棘手，所以應(yīng)該使用評論工具，直接指出并進行修改。
4. 讓 Claude 為我們的想法制作視頻演示。Claude Design 幾乎可以做到我們能想到的任何事情，它更像 Claude Code，而不是一個基于畫布的設(shè)計工具。
5. 使用連接器（尤其是 docs / slack）。 一旦設(shè)置完成，我們可以發(fā)送類似這樣的提示：「請閱讀產(chǎn)品交流會的會議記錄，并創(chuàng)建一個演示文稿，探討所有出現(xiàn)問題的不同設(shè)計解決方案」。
6. 讓 Claude 即時創(chuàng)建定制工具。通常情況下，不要試圖像使用基于畫布的工具那樣去使用 Claude Design。它是另一種存在，擁有不同的能力。多嘗試，玩出點花樣！你會發(fā)現(xiàn)自己的設(shè)計方式已經(jīng)遠遠超出了過去的思路。
7. 知道何時放慢節(jié)奏，親手完成。新的圖標(biāo)、點綴插畫、命名。有些細節(jié)始終會產(chǎn)生超出預(yù)期的影響。很容易被 Agent 設(shè)計的高速節(jié)奏卷入其中。知道何時放慢下來，本身也是一門藝術(shù)。

▲就像每個學(xué)校、公司都會有自己的品牌使用指引，規(guī)范顏色、字體、Logo 等形象，Claude Design 的設(shè)計系統(tǒng)，也能讓我們一次性規(guī)范這些設(shè)計資源。

得益于 Claude 目前強大的生態(tài)系統(tǒng)， Claude Design 的能力有機會真正融入到 AI 工作流里，徹底改變過去那些 AI 網(wǎng)頁生成類工具里，輸出過于泛化、忽視現(xiàn)有設(shè)計語言，以及很難以在團隊流程中復(fù)用等問題。