測評：海外設計大神分享，最強UI/UX界面設計skill

作者：婉寧交互設計
日期：2026年5月25日 上午8:05
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

測評海外設計大神7步UI/UX Skill，對比Claude Design：前期需求梳理最值得借鑒

整理版摘要

呢篇文章係由德國交互設計留學5年嘅陳婉寧寫嘅，佢係一位UI/UX設計師同教學者，旨在測評一個海外大神分享嘅Design Skill，並同Claude Design比較，幫讀者瞭解呢類工具嘅實際價值。

呢個Skill將UI/UX設計流程拆成7個階段，由追問梳理、設計Brief、信息架構，一路到設計Tokens、任務拆解、前端設計同設計審查。作者用「低代碼平台」呢個項目做測試，發現大神Skill喺前期需求梳理方面做得非常仔細，會產出詳細嘅用戶羣、核心交互等表格，但最終生成嘅界面效果就唔及Claude Design咁精緻。Claude Design出嘅登錄頁有動效，編輯器頁可以互動，整體更貼合產品定位。

整體嚟講，Claude Design最終交付質素較高，但大神Skill嘅前期流程拆解同文檔化思維好值得學習。作者建議組合使用：前期業務梳理用大神Skill頭兩個階段，信息架構用圖表AI工具，最後先由Claude Design出圖，咁就可以取長補短。

  • 結論：Claude Design最終視覺效果同交互優於大神Skill，但大神Skill嘅需求梳理部分極具參考價值。
  • 方法：大神Skill將UI/UX設計流程拆成7個階段，包括追問梳理、設計Brief、信息架構、設計Tokens、任務拆解、前端設計同設計審查。
  • 差異：大神Skill側重結構化文檔輸出，Claude Design更擅長直接生成高品質可交互界面。
  • 啟發：純文字表達信息架構唔夠圖表清晰，建議結合其他AI工具提升可視性。
  • 可行動點：前期業務梳理用大神Skill階段一、二，信息架構用圖表AI工具，最後用Claude Design出圖。
值得記低
Skill github.com

7-step UI/UX Designer Skill

海外設計大神拆解的UI/UX設計工作流Skill，包含7個階段，從需求梳理到設計審查。

開啟
整理重點

大神Skill嘅7階段概覽

呢篇文測評一個海外大神分享嘅UI/UX設計Skill，呢個Skill將UI/UX設計流程拆成咗

7個階段

，每個階段都有對應嘅Skill指令，用/design-flow就可以觸發成個流程。

  1. 1 階段一：追問梳理——深入需求背景，搞清楚用戶羣、核心交互等問題。
  2. 2 階段二：設計Brief——瞭解視覺風格、設備尺寸等，產出組件庫、操作路徑等。
  3. 3 階段三：信息架構——自動生成關鍵頁面信息、用戶流程同UX文案。
  4. 4 階段四：設計Tokens——直接生成設計Token。
  5. 5 階段五：任務拆解——按階段拆分開發任務，優先驗證複雜部分。
  6. 6 階段六：前端設計——揀選模板頁，生成可配置嘅編輯器頁面。
  7. 7 階段七：設計審查——用Playwright插件自動截圖審查產品頁面。
整理重點

需求梳理與信息架構

第一階段係追問梳理，總共四輪問題，最後得出一個核心信息表格，涵蓋

產品嘅用戶羣、核心交互、定位、商業模式、關鍵場景、核心功能

等關鍵信息，幫手釐清產品本質。

第二階段設計Brief瞭解視覺風格同設備尺寸，產出包括

視覺風格、組件庫、核心區域組件、用戶操作路徑

，資訊量已經好豐富。

第三階段信息架構唔使點回答問題，會自動生成

關鍵頁面信息、用戶流程、UX文案

，連點解用某個文案都有解釋，結構好完整。

整理重點

設計執行與對比Claude Design

第四階段設計Tokens直接生成，第五階段任務拆解偏項目管理，例如呢個項目建議

先做編輯器，因為最複雜，優先驗證可行性

。第六階段前端設計揀選編輯器頁，左側配置模板，中間手機屏幕呈現遊戲界面。第七階段設計審查需要安裝Playwright插件自動截圖審查。

作者用相同嘅初始提示詞「低代碼平台」測試Claude Design，發現佢會進一步追問，然後生成有

登錄頁有光圈光點動效，編輯器頁可以微調編輯

，整體視覺效果同交互完整度都更勝一籌。

整理重點

組合用法與總結

作者推薦組合用法：

前期業務梳理用大神Skill階段一、二；信息架構用圖表AI工具；最後用Claude Design出圖

，咁就可以取長補短，既有嚴謹需求文檔，又有高質量視覺交付。

呢個skill係海外一位大神分享嘅，佢將UI/UX設計師嘅工作流程拆解成7個步驟，而且每個步驟都製作咗一個skill：
圖片
呢篇文章會對呢個skill做測評，而且會將佢嘅生成結果同claude design做對比。
測評背景係製作一個低代碼AI平台，一開始初始提示詞都係最簡單嘅一句話：低代碼平台。

測試大神skill

一開始直接用咗/design-flow觸發成個流程：
圖片

階段一：追問梳理

呢個階段需要深入瞭解需求背景，搞清楚產品嘅用戶羣、核心交互、定位、商業模式、關鍵場景、核心功能、優先級等關鍵問題，總共四輪問題。
圖片
第一階段完成後，得出一個關於呢個產品核心資訊嘅表格：
圖片

第二階段：設計brief

主要了解視覺風格、設備尺寸等資訊。
圖片
到咗呢一步嘅產出已經包含好多資訊喇，包括大嘅視覺風格、組件庫、核心區域組件、用戶操作路徑等等。
圖片

第三階段：資訊架構

呢個階段基本上唔使回答咩問題，直接會根據前面嘅內容自動生成資訊架構。
包含關鍵頁面嘅主要資訊：
圖片
仲有用戶流程嘅拆解：
圖片
最後甚至仲有UX文案，有些文案點解用，有些點解唔用，仲講咗原因。

第四階段 設計tokens

呢個都係直接生成。
圖片

第五階段：任務拆解

呢一步偏向項目管理，就係將成個產品嘅開發過程做咗分階段嘅任務拆解。
例如喺呢個項目入面拆解嘅任務係先做編輯器，因為編輯器最複雜，優先要驗證佢嘅可行性。
圖片

第六階段：前端設計

前面鋪墊咗咁多，終於可以睇最後結果喇。
圖片

選擇模板頁

圖片
最關鍵嘅編輯器頁，左側可以選擇配置嘅模板，中間手機屏幕上就會呈現配置嘅遊戲界面。
最後第七個階段設計審查，需要安裝一個Playwright嘅插件，插件會自動截圖對產品嘅每個頁面進行審查。

試試claude design

有對比先有傷害，呢個skill最終效果到底點樣，我又用claude design測試咗一下。
初始提示詞都係最簡單嘅一句話：低代碼平台。
圖片
claude design都會進一步深入詢問項目問題。
回答完問題後，過咗一大輪見到咗結果：
圖片
呢個登錄頁屬於額外驚喜，裡面仲有光圈光點嘅動效。
接着模板頁：
圖片
最核心嘅編輯器頁：
圖片
可以對頁面裡面嘅內容進行微調編輯：
圖片
睇到呢度，各位總監們應該都感覺到，從最終頁面交互、產品定位嘅契合度、界面視覺效果同完整度嚟講，claude design都係優勝於大神skill嘅最終結果。
最後睇睇2種方式嘅token消耗：
圖片
對兩種方式優缺點嘅最終總結：
圖片
claude design出嚟之前，大神skill或者確實係唔錯嘅一個skill，但呢套skill嘅製作思路仍然好值得借鑑學習，特別係前面需求梳理部分。
推薦組合用法：
前期業務梳理用大神 Skill（階段一、二）；
資訊架構採用其他圖表類嘅AI工具，因為相比純文字嘅表達，圖表表達更清晰，更能幫助理清思路；
最後可以用 Claude Design 出圖。
取長補短，既有嚴謹嘅需求文檔，又有高質量嘅視覺交付。

大神skill座標

https://github.com/julianoczkowski/designer-skills


chatgpt Image2 UI界面設計稿：100%還原+代碼級交付（可落地）

AI完成App首頁UI界面redesign，UX設計AI工作流全流程拆解（超細緻！）

10分鐘完成一個UI設計作品案例（全程AI）

UI界面審查skill拆解——如何創建高質量skill

用skill做設計規範，迭代設計稿


That's all.

我係陳婉寧，德國交互設計專業留學5年，用戶體驗設計師，深耕設計領域10年+，UIUX設計教學經驗3年+ 。

持續沉澱UIUX設計類文章200+，朋友圈每日持續分享uiux設計領域乾貨知識，希望用自己的設計經驗陪你們一路闖關！

歡迎加我：wanning2755

圖片


這個skill是海外一個大神分享的，他把UI/UX設計師的工作流拆解成了7個步驟，並且每個步驟製作了一個skill：
圖片
這篇文章會對這個skill進行測評，並且把它的生成結果和claude design進行對比。
測評背景是製作一個低代碼AI平台，一開始初始提示詞都是最簡單的一句話：低代碼平台。

測試大神skill

一開始直接使用了/design-flow觸發整個流程：
圖片

階段一：追問梳理

這個階段需要深入瞭解需求背景，搞清楚產品的用戶羣、核心交互、定位、商業模式、關鍵場景、核心功能、優先級等關鍵問題，總共四輪問題。
圖片
第一階段完成後，得出一個關於這個產品核心信息的表格：
圖片

第二階段：設計brief

主要了解視覺風格、設備尺寸等信息。
圖片
到了這一步的產出已經包含很多的信息了，包括大的視覺風格、組件庫、核心區域組件、用戶操作路徑等等。
圖片

第三階段：信息架構

這一階段基本不要回答什麼問題，直接會根據前面的內容自動生成信息架構。
包含關鍵頁面的主要信息：
圖片
還有用戶流程的拆解：
圖片
最後甚至還有UX文案，有些文案為什麼用，有些為什麼不用，還說了原因。

第四階段 設計tokens

這個也是直接生成。
圖片

第五階段：任務拆解

這一步偏項目管理，就是把整個產品的開發過程做了分階段的任務拆解。
比如在這個項目中拆解的任務是先做編輯器，因為編輯器最複雜，優先要驗證其可行性。
圖片

第六階段：前端設計

前面鋪墊了這麼多，終於可以看最後結果了。
圖片

選擇模板頁

圖片
最關鍵的編輯器頁，左側可以選擇配置的模板，中間手機屏幕上就會呈現配置的遊戲界面。
最後第七個階段設計審查，需要安裝一個Playwright的插件，插件會自動截圖對產品的每個頁面進行審查。

試試claude design

有對比才有傷害，這個skill最終效果到底怎麼樣，我又用claude design測試了一下。
初始提示詞也是最簡單的一句話：低代碼平台。
圖片
claude design也會進一步深入詢問項目問題。
回答完問題後，過了一大會看到了結果：
圖片
這個登錄頁屬於額外驚喜，裏面還有光圈光點的動效。
接着模板頁：
圖片
最核心的編輯器頁：
圖片
可以對頁面裏的內容進行微調編輯：
圖片
看到這裏，各位總監們應該也能感覺出，從最終頁面交互、產品定位的契合度、界面視覺效果和完整度上來說，claude design還是優於大神skill的最終結果。
最後看看2種方式的token消耗：
圖片
對兩種方式優缺點的最終總結：
圖片
claude design出來之前，大神skill也許確實是不錯的一個skill，但這套skill的製作思路還是很值得借鑑學習的，特別是前面需求梳理部分。
推薦組合用法：
前期業務梳理用大神 Skill（階段一、二）；
信息架構採用別的圖表類的AI工具，因為相比純文字的表達，圖表表達更清晰，更能幫助理思路；
最後可用 Claude Design 出圖。
取長補短，既有嚴謹的需求文檔，又有高質量的視覺交付。

大神skill座標

https://github.com/julianoczkowski/designer-skills


chatgpt Image2 UI界面設計稿：100%還原+代碼級交付（可落地）

AI完成App首頁UI界面redesign，UX設計AI工作流全流程拆解（超細緻！）

10分鐘完成一個UI設計作品案例（全程AI）

UI界面審查skill拆解——如何創建高質量skill

用skill做設計規範，迭代設計稿


That's all.

我是陳婉寧，德國交互設計專業留學5年，用戶體驗設計師，深耕設計領域10年+，UIUX設計教學經驗3年+ 。

持續沉澱UIUX設計類文章200+，朋友圈每日持續分享uiux設計領域乾貨知識，希望用自己的設計經驗陪你們一路闖關！

歡迎加我：wanning2755

圖片