體驗完 Claude Design，我決定把之前用的設計工具都換掉
整理版優先睇
Claude Design 用 HTML 發揮極致，解決產品經理繪製原型嘅三大痛點：導入項目、修改原型、共享協同，令佢決定全面取代現有設計工具。
呢篇文章係一位產品經理嘅親身評測，佢一直用大模型畫原型，但遇到好多問題：模型承接唔到現有設計風格、修改時容易破壞樣式、同團隊共享 HTML 好麻煩。Claude Design 第一版就完美解決呢啲痛點。
佢介紹咗成個流程：先建立設計系統，可以從 GitHub、上傳代碼或 Figma 文件自定義風格；跟住選擇項目類型（精細化原型、低保真原型或者 PPT）；用 Opus 4.7 生成後，每個 HTML 元素都可以精細修改，而且唔會破壞原有樣式；最後可以導出 PDF、PPT、HTML，甚至直接連接 Claude Code 輸出代碼。作者實測咗 App 界面、GitHub 風格原型同文章 PPT，效果都好滿意。
作者認為呢個工具唔止提升產品經理效率，仲可以打通設計同開發之間嘅協作，令 Claude 生態更加完整。最終結論係：Claude Design 係佢用過最流暢嘅 AI 原型工具，呼籲其他廠商快啲出平替。
- Claude Design 可以自定義設計系統（從 GitHub、代碼或 Figma 導入），令模型承接現有產品風格。
- 支援精細化原型、低保真原型同 PPT 三種項目類型，生成後嘅 HTML 元素可以個別修改而唔破壞整體樣式。
- Opus 4.7 嘅審美比前代高好多，但 token 消耗係 1.3 倍，不過成個流程比用 Claude Code 自己畫仲慳 token。
- 產品經理可以用手繪草圖功能畫原型，Claude 會跟住草圖生成設計。
- 導出格式包括 PDF、PPT、HTML，仲可以連接 Claude Code 直接輸出代碼，解決咗團隊共享 HTML 嘅難題。
Claude Design 嘅整體流程同功能
Claude Design 係 claude.ai/design 上面嘅新產品，界面左側係新建項目，右側係歷史項目。支援創建產品原型、PPT、從模板創建，原型可以揀高精度或低保真。整個使用流程好清晰：創建項目 → 選擇設計系統 → 選擇項目類型 → 文字描述內容 → Claude Opus 4.7 製作 → 修改項目（組件選中修改或對話修改） → 導出為代碼、PDF、PPTX，或者導入 Claude Code 開發。
承接原有設計風格——解決老大難問題
自定義設計系統係呢個產品嘅核心功能。你可以通過多種方式導入現有項目：連接 GitHub、上傳代碼、上傳 Figma 設計文件。用呢啲素材打造自己嘅設計風格，之後創建文件就可以直接引用。
作者強烈建議產品或設計師如果攞到開發嘅前端代碼，直接丟入去生成設計系統，後面產出原型、PPT 或者其他嘢都會快好多。呢個功能解決咗一直以嚟嘅老大難問題——點樣令模型喺現有產品上面做修改同優化。
- 導入方式多樣：GitHub、上傳代碼、Figma 文件
- 建立後嘅設計系統可以喺後續項目重複使用
- 大幅減少模型「唔認得現有風格」嘅問題
實測效果同精細化修改
作者實測咗三個場景：做一個 App 界面、根據 GitHub 界面生成 Figma 風格原型、根據文章生成 Claude 風格 PPT。揀嘅係精細化設計，效果比截圖同 Skill 製作原型方便好多。另外佢好鍾意手繪草圖功能：對話過程中可以用 Sketch 草圖看板畫嘢，Claude 就會跟住草圖生成設計。
最令作者驚喜嘅係精細化修改。所有 HTML 元素都可以精細修改，而且唔會破壞原有樣式，做到「絲滑流暢」。佢之前用過 Genspark、Skywork 呢類產品，修改嗰陣文字風格唔啱或者元素超出界面，但 Claude Design 做到 100% 可靠。導出格式支援 PDF、PPT、HTML，仲可以連接Claude Code 直接輸出代碼，解決咗佢同團隊共享 HTML 文件嘅痛點。
其他驚喜同作者反思
默認模型係 Opus 4.7，審美比 Opus 4.6 高好多，但token 消耗係 1.3 倍。不過成個工程設計流程嘅銜接，比喺 Claude Code 裏面畫原型仲要慳 token。對話過程中，Claude 會做完整嘅流程規劃，生成完之後仲會自己做一次校驗，而且將校驗過程演示畀你睇，好似真係操作緊一台電腦咁。
目前呢個產品對 Pro 同 Max 用戶都開放。作者話佢之後嘅設計都會用佢嚟做，因為解決咗導入項目、修改原型、共享協同三大難題。佢認為產品經理對上承接設計、對下承接開發，如果呢個流程打順咗，上游設計同下遊開發都可以融入 Claude 生態。
今朝早起身，第一件事就係試下 claude design。
雖然係第一版產品，但係設計得好完善，可以話將HTML嘅能力發揮到極致。
身為產品經理，我之前用模型畫原型嗰啲痛點，都喺呢個產品入面解決曬。
界面好簡單，啱啱入到 claude.ai/design，見到嘅就係下面呢個界面。
左邊係新建項目，右邊係歷史項目。
支援創建產品原型、PPT、從模板創建，原型可以揀高精度或者低保真。
成個使用流程好清晰完善：
1 創建項目，揀設計系統（可以由 GitHub 或者本地代碼自定義設計風格）
2 揀項目類型(精細化原型 / 低保真原型 / PPT)
3 用文字描述你想設計嘅內容
4 Claude opus4.7 開始製作
5 修改項目：支援組件揀中修改、對話修改
7 導出做代碼、PDF、PPTX，或者導入去 claude code 開發
自定義設計系統就係通過導入項目嘅方式，可以用多種方法承接原有項目，
喺上一張圖右邊 design system 頁簽下面，新建設計系統，就可以入到下面嘅彈窗
項目導入嘅方式有好多種：連接你嘅 GitHub、上傳代碼、上傳 Figma 嘅設計文件都得。
用呢啲嚟打造你自己嘅一套設計風格，等之後創建文件嘅時候就可以直接引用。
呢個就解決咗一路以嚟嘅老大難問題，點樣俾模型喺現有嘅產品上面做修改同優化。
如果產品或者設計師可以拎到開發嘅前端代碼，我強烈建議直接將代碼掉入嚟生成自己嘅設計系統，後面出原型、PPT 或者其他嘢都會快好多。
創建項目分幾種：
創建原型界面 創建 PPT（根據你嘅模板嚟創建）
創建完成之後就入咗同 Claude 嘅對話界面，左邊係對話，右邊係預覽，預覽係多窗口嘅，可以打開你上傳嘅文件睇，亦都可以睇輸出嘅 HTML。
第一個，我叫佢做咗一個 App 嘅界面
第二個，我根據我 GitHub 嘅界面生成咗一個 figma 風格原型
第三個，根據一篇文章生成 claude風格嘅PPT
我呢幾次揀嘅都係精細化設計，呢個比起截圖同 Skill 整原型方便好多，佢仲可以揀低保真嘅原型。
仲有一個我幾鍾意嘅地方：
喺同 Claude 對話嘅過程中，你可以用手繪草圖嚟整原型，佢提供咗一個 Sketch 草圖看板，你喺上面畫，佢就跟住草圖幫你畫出嚟。
畫完之後，所有 HTML 元素都可以精細化修改。
樣式本身已經好靚，"可以修改"呢一點仲做到極致完美。
修改呢一點，佢唔會破壞原有嘅樣式，絲滑流暢。
我之前都用過 Genspark、Skywork 呢類產品，佢哋整嘅 HTML 修改起嚟唔係文字風格唔啱，就係元素超出界面，總之都唔係幾好。
但係 Claude Design 呢一點做到 100% 可靠。
導出格式都好多：PDF、PPT、HTML 都支援，仲可以連接 Claude Code 叫佢直接輸出代碼。
呢個就解決咗我同團隊共享 HTML 文件嘅痛點。之前我用大模型畫嘅 HTML 文件，都係用截圖嘅形式貼落文檔或者白板度俾開發睇，因為自己再將呢個 html 部署嘅話就太花時間啦。
而且佢俾協同都預留咗方向。我呢個代碼俾人，人哋仲可以修改，然後拎到我嘅原型設計，直接連接 cloudcode 嚟輸出代碼。
默認揀咗 Opus 4.7。4.7 嘅審美確係高咗唔少，但 token 消耗係 opus 4.6 嘅 1.3 倍。
雖然 opus 4.7 嘅 token 消耗係升咗，但係成個工程設計流程嘅銜接，比起自己喺 claude code 入面畫原型係慳 token 嘅。
我仲發現喺同 Opus 對話嘅時候，可以揀多種參考文件，如下，可以抓取網頁元素都幾實用。
對話過程中，佢會做完整嘅流程規劃，
Claude 喺生成完之後，最後會自己做一次校驗，仲會將校驗嘅過程演示俾你睇，
好似 Claude 真係喺度操作一部電腦咁，幾驚喜㗎。
目前呢個產品對 Pro 同 Max 用戶都開放咗。
我之後嘅設計都會用佢嚟做，佢比起我用 Skill 嚟畫更加流暢。
解決咗我導入項目同修改原型、共享協同嘅三個大難題。
佢肯定可以俾產品經理、設計師帶嚟巨大嘅效率提升。
產品經理呢個崗位，對上可以承接設計，對落可以承接開發。
如果將呢個流程打通順咗，唔止產品經理可以用得嚟，產品上游嘅設計同下遊嘅開發，都可以融入到 claude 生態入面去用佢哋嘅產品。
claude 嘅野心已經去到將模型應用喺千千萬萬嘅職業崗位用嘅垂類產品上面喇。
而家 claude 已經有咗 claude 對話、claude cowork、claude code、claude design。
將來，唔知仲有咩新創意，但係只怕有一日用唔到 claude，希望其他廠快啲出平替產品。
今天早上醒過來，第一件事就是測試 claude design。
雖然是第一版產品，但設計得非常完善，可以說把 HTML 的能力發揮到了極致。
作為產品經理，我的很多之前用模型繪製原型的痛點，都在這個產品裏面被解決了。
界面很簡單，剛進來 claude.ai/design，看到的就是下面這個界面。
左側是新建項目，右側是歷史項目。
支持創建產品原型、PPT、從模板創建，原型可以選擇高精度或低保真。
整個使用流程很清晰完善：
1 創建項目，選擇設計系統（可以從 github 或本地代碼自定義設計風格）
2 選擇項目類型(精細化原型 / 低保真原型 / PPT)
3 文字描述你要設計的內容
4 Claude opus4.7 開始製作
5 修改項目：支持組件選中修改、對話修改
7 導出為代碼、PDF、PPTX，或導入到 claude code 開發
自定義設計系統就是通過導入項目的方式，能多種方式承接原有項目，
在上一張圖片右側 design system 頁簽下，新建設計系統，就能進入下面彈窗
項目導入方式有好多種：連接你的 GitHub、上傳代碼、上傳 Figma 的設計文件都可以。
用這些來打造你自己的一套設計風格，等到後面創建文件的時候就可以直接引用。
這就解決了一直以來的老大難問題，怎麼讓模型在已有的產品上面做修改和優化。
如果產品或設計師能拿到開發的前端代碼，我強烈建議直接把代碼丟進來去生成自己的設計系統，後面產出原型、PPT 或者其他東西都會快得多。
創建項目分好幾種：
創建原型界面 創建 PPT（根據你的模板來創建)
創建完成後就進入和 Claude 的對話界面，左側是對話，右側是預覽，預覽是多窗口的，可以打開你上傳的文件查看，也可以查看輸出的 HTML。
第一個，我讓它做了一個 App 的界面
第二個，我根據我 GitHub 的界面生成了一個figma 風格原型
第三個，根據一個文章生成 claude風格的PPT
我這幾次選的都是精細化設計，這比截圖和 Skill 製作原型要方便多了，它還可以選低保真的原型。
還有一個我挺喜歡的點：
在和 Claude 對話的過程中，你可以用手繪草圖來製作原型，它提供了一個 Sketch 草圖看板，你在上面畫，它就照着草圖給你畫出來。
畫完之後，所有 HTML 元素都可以精細化修改。
樣式本身就很漂亮，"可以修改"這一點還做得極致完美。
修改這一點，它不會破壞原有的樣式，絲滑流暢。
我之前也用過 Genspark、Skywork 這類產品，他們做的 HTML 修改起來不是文字風格不對，就是元素超出界面，總之都不盡如人意。
但 Claude Design 這一點做到了 100% 可靠。
導出格式也很多：PDF、PPT、HTML 都支持，還能連接 Claude Code 讓它直接輸出代碼。
這就解決了我跟團隊共享HTML文件的痛點。之前我用大模型畫的HTML文件，都是通過截圖的形式貼到文檔或白板裏面給開發看，因為自己再去把這個 html 去部署的話就太耗時了。
而且他給協同也預留了方向。我這個代碼給到別人，別人還可以去修改，然後拿到我的原型設計，直接連接cloudcode來輸出代碼。。
默認選的是 Opus 4.7。 4.7 的審美的確高了不少，但 token 消耗是 opus 4.6 的 1.3 倍。
雖然 opus 4.7的消耗token是上升了，但是整個工程設計流程的銜接，比自己在 claude code 裏畫原型是省 toekn 的。
我還發現在和Opus對話的時候，可以選擇多種參考文件，如下，能抓取網頁元素還是挺實用的。
對話過程中，它會做完整的流程規劃，
Claude 在生成完事後，最後會自己做一遍校驗，而且會把校驗的過程演示給你看，
好像 Claude 真的在操作一台電腦一樣，挺驚喜的。
目前這個產品對 Pro 和 Max 用戶都開放了。
我接下來的設計都會用它來做，它相比我用 Skill 來繪製更加流暢。
解決了我導入項目和修改原型、共享協同的三個大難題。
它指定能給產品經理、設計師帶來巨大的效率提升。
產品經理這個崗位，對上可以承接設計，對下可以承接開發。
如果把這個流程打順了，不只是產品經理可以用得起來，產品上游的設計和下游的開發，都可以融入到 claude 生態裏面去使用他們的產品。
claude 的野心已經到了把模型應用到千千萬萬的職業崗位用的垂類產品上了。
現在 claude 已經擁有了 claude 對話、claude cowork、claude code、claude design。
未來，不知道還有啥新的創意，但只怕有一天用不上claude了， 希望其他廠趕緊出平替的產品。