[AI實踐]UI/UX 設計用 Cursor 三步驟
How might we improve UI/UX with Cursor?
作者導讀： LLM 之於生產場景最大的啟示，不是在於剝奪人的創造力，而是藉著更客觀、更長的數位記憶能力，輔助使用者本身可以預先探索創意、思考點的盲區。
正確理解 AI 生成輔助，不是變成帶槍的猴子，去挑戰、指導其他跨領域的專業，而是預先準備原型，但不一定具備“概念”，因為概念是來至於業務流程驗證、實際產品運營、體驗洞察實施等不可取代的步驟。兩者合一才是有效概念驗證過的原型 （POC, Proof of concept）。
在當今數位化設計領域，人工智慧正以前所未有的速度改變著使用者介面的創造方式。隨著 AI 技術的快速發展，設計師現在可以利用強大的工具組合來簡化 UI 設計流程，提高效率，並創造出更具吸引力的使用者體驗。本文探討了三種主要的 AI 驅動 UI 生成方法：Claude AI + Cursor、21st.dev MCP + Cursor 以及 Readdy.ai + Cursor，並分析了它們的整合複雜度和對不同經驗水準設計師的適用性。
Claude AI 與 Cursor 的結合提供了一種強大而靈活的方法，適合各種技能水準的設計師。從入門級設計師到經驗豐富的 UX 專家，這種組合都能提供相應的支援和功能。21st.dev MCP 透過其情境感知的 AI 輔助功能，使設計師能夠透過簡單的自然語言指令快速生成 UI 元件。而 Readdy.ai 則專注於從文字描述生成專業 UI 設計並提供可直接使用的程式碼，儘管其主要功能似乎更側重於介面視覺動態效果的展現。
三種方法的直接比較
效能比較
在相同任務（設計登入頁面）的完成時間對比：
Claude AI + Cursor：約 15-20 分鐘
21st.dev MCP + Cursor：約 10-15 分鐘（基於有限資料估計）
傳統設計方法：約 1-2 小時
注意：以上性能數據基於有限測試，實際情況可能因專案複雜度和設計師熟練度而異。
Cursor 的核心功能
AI 程式碼自動完成： 根據上下文預測並建議下一行程式碼，協助開發者編寫複雜的演算法或樣板程式碼。
聊天功能： 即時與 AI 互動，解答程式碼相關問題、除錯，甚至提供程式碼庫的說明。
程式碼優化： Cursor 能夠辨識程式碼可改進的地方，並提供程式碼重構的建議，使程式碼更簡潔、更有效率且更易於維護。
錯誤修正和除錯： 自動偵測潛在錯誤並提供修正建議，減少開發後期除錯所需的時間。
一、用 Claude AI + Cursor 生成 UI
1.1 撰寫詳細的產品需求描述 PRD
為什麼要寫專案文件？
在使用 AI 生成 UI 之前，需要準備詳盡的產品需求描述（PRD），這是確保 AI 輔助設計成功的關鍵第一步。精心撰寫的 PRD 能夠顯著減少 AI 生成過程中的錯誤和誤解，同時確保最終設計的品質和視覺一致性。在數位產品開發領域，PRD 不僅是團隊溝通的橋樑，更是指導 AI 工具理解設計意圖的重要依據。
當設計師參與撰寫過程，清晰、結構化的需求文件時，AI 能夠更準確地捕捉設計意圖，從而生成更符合預期的 UI 元件。這些文件不僅僅是功能列表，還應該包含用戶旅程地圖、情境使用案例和預期的用戶體驗目標，這些元素能夠幫助 AI 更全面地理解產品的本質和目的。在實踐中，許多設計師發現，花費額外時間完善 PRD 能夠在後續的設計過程中節省大量時間，減少反覆修改的次數，並提高整體設計效率。
如何撰寫專案文件？
可以使用 Cursor 來撰寫文件，加入設計規範、設計原則、用戶案例或調研洞察，內容包括：
PRD（產品需求文件）：描述應用程式的核心功能和目標
應用流程文件：詳細說明使用者如何使用應用程式
設計規範：概要定義 UI 元件的樣式和結構
互動模式：定義使用者與介面的互動方式
Cursor 指令實例1：用戶旅程地圖
新用戶首次體驗旅程
認知階段
觸點：社交媒體廣告、朋友推薦
用戶情緒：好奇、略帶懷疑
痛點：不確定產品是否值得嘗試
設計機會：提供簡潔明了的價值主張，展示成功案例
考慮階段
觸點：產品首頁、功能介紹頁
用戶情緒：評估中、比較不同選項
痛點：擔心學習曲線陡峭
設計機會：強調易用性，提供快速入門指南
決策階段
觸點：註冊頁面、定價頁面
用戶情緒：猶豫、尋求確認
痛點：擔心個人信息安全
設計機會：簡化註冊流程，明確說明隱私政策
Cursor 指令實例2：用戶心智模型分析
目標用戶群體的心智模型
專業設計師心智模型
預期：工具應該提供精確控制和高級自定義選項
現有知識結構：熟悉設計原則和專業工具操作邏輯
決策模式：基於效率和結果質量做決策
設計影響：提供高級模式和快捷鍵，保留專業術語
非專業用戶心智模型
預期：工具應該直觀且容易上手
現有知識結構：可能缺乏專業設計知識，但熟悉常見數字產品交互模式
決策模式：基於易用性和學習成本做決策
設計影響：提供引導式體驗，使用通俗易懂的語言
Cursor 指令實例3
請根據上傳的用戶旅程地圖和心智模型文檔，為「決策階段」的用戶設計一個註冊表單。這個表單應該：
考慮到用戶在此階段的情緒狀態（猶豫、尋求確認）
解決用戶對個人信息安全的擔憂
符合非專業用戶的心智模型，使用通俗易懂的語言
提供明確的進度指示，減少用戶不確定感
生成HTML和CSS代碼，並解釋設計決策如何回應用戶旅程和心智模型中識別的需求。 建議：將所有文件放在一個專門的「Instructions」資料夾中，方便後續使用。
1.2 使用 Claude AI 生成 UI 元件
Claude AI 是一個強大的 AI 設計助手，可以基於提供的文件生成高品質的 UI 元件。Claude AI 由 Anthropic 開發，在自然語言處理、設計生成和優化方面表現出色。作為一款領先的生成式 AI 工具，Claude 特別擅長理解複雜的設計需求並將其轉化為視覺化的 UI 元素，這使其成為現代設計工作流程中不可或缺的一部分。在實際應用中，Claude AI 能夠分析設計師提供的 PRD 文件、使用者旅程地圖和設計規範，然後根據這些輸入生成符合品牌一致性和使用者體驗原則的 UI 元件。
與傳統設計工具相比，Claude AI 的獨特之處在於其理解設計意圖的能力，它不僅僅是複製指令，而是能夠理解設計背後的目的和上下文，從而提供更加智能化的設計建議。在實際項目中，設計師可以通過自然語言與 Claude 進行對話，描述他們想要的設計風格、元素和功能，Claude 則能夠快速生成多個設計方案供選擇。這種互動式的設計過程大大縮短了從概念到實現的時間，同時也為設計師提供了更多創意靈感。此外，Claude AI 還具備學習能力，能夠從設計師的反饋中不斷優化其生成結果，使其設計輸出越來越符合設計師的預期和項目需求。
Claude AI 的優勢
速度快（使用 Sonnet 3.7 版本）
設計的 UI 現代化
適合元件化設計
多模態能力，可處理文字、音訊和視覺資料用於多樣化的 UI 應用
注意：之前版本的 v0 現在運行速度較慢，容易出錯，推薦使用 Claude Web 版的 Sonnet 3.7。
在 Claude AI 中創造專案
創造新專案（Project）
上傳專案文件（將前面撰寫的 PRD、流程文件等附加到 Claude 專案中）
輸入指令：「design me individual UI components based on the docs」或「根據文件為我設計個性化的 UI 元件」
逐步生成 UI 元件（先設計導覽列，再設計主頁，依次完成搜尋列、選單列、卡片元件等）
提示：Claude 設計的介面可以直接複製並貼上到 Cursor AI 進行整合。
1.3 在 Cursor 中整合 UI 設計
Cursor 是一個 AI 驅動的程式編輯器，可以自動化樣板程式碼生成、除錯和即時建議等編碼任務。Cursor 被描述為「披著一層AI皮的VS Code」[^3]，它支援從VS Code無縫遷移，保留所有設定、主題、快捷鍵和擴充功能，透過一鍵整合實現[^3]。這一基礎特性使得已經熟悉VS Code的設計師能夠輕鬆上手Cursor，無論他們選擇哪種AI整合方式。
使用 Cursor AI 快速啟動專案
使用 CodeGuide Starter Kit 啟動專案
創造「Instructions」資料夾，將所有專案文件放入該資料夾
複製 Claude AI 生成的設計並貼上到 Cursor，確保所有元件正常運行
利用 Cursor 與 Figma 等工具的整合功能，支援協作和版本控制
回覆讀者來信：設計師可以用 Cursor 來作為個人主要的文件管理工具，取代如 notion 等工具嗎？
建議從輔助轉換到主要工具需要適應期。事實上，我們從實際的甲、乙方工作場景中都觀察到許多組合應用，使用 Cursor 管理或產出日常文件，特別在多語言的環境中，對於預先生成其它文件的結構思路，都有很不錯的效率提升，包括但不限於：設計評審前的說明文稿、競品分析中的設計要素拆解、晉升案例的結構化、結案報告書的舊有經驗整合、工作坊引導的話術整理等。
1.4 逐步建構完整 UI
在 Cursor AI 中，逐個整合 Claude 生成的 UI 元件是一個系統化且有條理的過程，需要設計師按照特定順序進行操作以確保最終界面的一致性和功能完整性。首先，設計師通常會從頂部導覽列開始，因為它是用戶界面的骨架結構，定義了整個應用的導航框架和主要功能入口。在 Cursor 中，可以通過將 Claude 生成的導航欄代碼直接粘貼到項目文件中，然後使用 Cursor 的智能代碼補全功能來優化其結構和樣式，確保它能夠適應不同屏幕尺寸並保持視覺一致性。
接著，設計師應整合主頁 Hero Section，這是用戶首次訪問應用時看到的主要視覺元素，需要特別注意其響應式設計和視覺吸引力。Claude Artifact 的實時預覽功能使設計師能夠即時查看更改效果，大大提高了調整效率。搜尋列的整合則需要考慮其功能性和用戶體驗，Cursor 的 AI 輔助功能可以幫助設計師快速實現搜索邏輯和自動完成功能，而無需編寫大量重複use case 描述。
選單列通常與導航欄協同工作，但更專注於特定功能區域的導航，設計師可以利用 Cursor 的代碼片段功能來快速實現不同狀態下的選單樣式。
最後，卡片或組件是界面中最常見的信息展示單元，設計師需要確保它們在不同數據情況下都能正確顯示，Cursor 的循環結構生成功能可以幫助快速創建動態數據渲染模板。整個整合過程中，Cursor 的 AI 功能不僅提供代碼建議，還能幫助識別潛在的設計問題和性能瓶頸，確保最終產品既美觀又高效。
Claude + Cursor AI 組合大幅提升設計效率，這種協同效應促進了快速原型設計、迭代設計和流程簡化，同時提高了 UI 專案的生產力、創造力和可維護性。
「Context Boundary」技术
源於軟體工程中的領域驅動設計（DDD）概念，應用到 AI 輔助設計中特別有效。
分離關注点：將 UI 設計任務分解為獨立的上下文區域，每個區域有明確的邊界和責任
信息封装：確保每個上下文內的信息是完整且自包含的
减少複雜性：通過分而治之的方法降低 AI 需要同時處理的信息量
回覆讀者來信：能提供具體點的例子嗎，像是購物場景？
購物車-結賬-收銀台示例中的上下文邊界應用分離關注點
購物流程可以清晰地分為三個獨立上下文：
購物車上下文：專注於商品管理，包括添加、刪除、調整數量及查看小計
結賬上下文：專注於客戶信息收集，如配送地址、聯繫方式和配送選項
收銀台上下文：專注於支付處理，包括付款方式選擇、優惠券應用和最終確認
通過這種分離，AI可以在特定區域內工作，例如當用戶要求"優化支付界面"時，AI能明確理解這請求屬於收銀台上下文，而非整個購物流程。
信息封裝
每個上下文區域封裝其特定信息：
購物車封裝：商品信息、數量、價格、庫存狀態等
結賬封裝：用戶配送詳情、優先級、特殊要求等
收銀台封裝：支付方式、安全驗證、交易狀態等
這種封裝避免了概念混淆。正如搜索結果中提到的："沒有單一視圖能代表更廣泛的上下文"，這在電商中尤為明顯 - 購物車中的"刪除"按鈕與收銀台中的"取消交易"按鈕雖看似相似，但上下文含義完全不同。
減少複雜性
通過上下文邊界減少整體複雜性：
獨立處理邏輯：AI可以專注於單一上下文的設計問題，如"如何使購物車項目更清晰"
連貫性體驗：儘管分成獨立上下文，整體流程保持連貫，類似於跨視圖上下文中的"堆疊視圖"
適應性強的交互：每個上下文可以針對特定場景優化，比如收銀台可針對移動支付優化，而不影響購物車體驗
1.5 連接後端 （供有工程能力的 UX 設計師參考或尋求協助）
使用 Supabase 作為後端服務：
註冊 Supabase 帳戶
創建資料庫並新增 API 端點
將 API 整合到 Cursor AI 專案中
使用者也可以透過 API 平台實現 Claude，這需要一定的技術知識才能正確配置。這種方法涉及在 Cursor 的 AI 配置部分設定特定參數，包括 API Base URL、API Key 和適當的模型名稱（如 Claude 3.5 Sonnet 的 cld-3-5-sonnet-20240620）[1]。雖然比訂閱方法更複雜，但詳細的配置說明隨時可用，且該過程遵循許多設計師熟悉的標準 API 整合模式。
挑戰與限制
效能問題：在處理複雜 UI 時可能會遇到效能瓶頸
倫理問題：使用 AI 生成的設計可能涉及版權和智慧財產權問題
學習曲線：新使用者可能需要時間適應這些工具的使用方式
二、用 21st.dev MCP+Cursor 生成 UI
21st.dev MCP 的特點
21st.dev MCP 提供情境感知的 AI 輔助功能，透過自然語言描述自動生成 UI 元件。它與 Cursor 的整合改善了情境理解、快速原型設計和團隊協作。這種整合不僅簡化了設計流程，還大幅提高了設計效率，使設計師能夠專注於創意和使用者體驗，而不是繁瑣的程式碼撰寫過程 21st.dev MCP 的核心優勢在於其強大的情境理解能力。它能夠分析整個專案結構，理解元件之間的關係，並根據專案的整體風格生成一致的 UI 元素。這種智慧化的情境感知使得生成的元件能夠無縫融入現有專案，減少了後期調整的工作量。此外，它還能識別專案中使用的技術堆疊和框架，確保生成的設計與專案的技術要求保持一致。
創造組件
在 Cursor 中使用「/ui」指令，可以快速生成所需的 UI 元件。例如，輸入「/ui」創造一個登入頁面，Cursor 會呼叫 21st.dev 的服務，生成相應的元件設計。這個過程簡單直觀，無需複雜的配置或設定。設計師只需描述他們想要的元件功能和樣式，系統就能理解並生成符合要求的設計。對於更複雜的元件，設計師可以提供更詳細的描述，包括佈局要求、響應式設計需求、色彩方案和互動行為等。21st.dev MCP 能夠理解這些複雜的需求，並生成高品質的設計實現。這種自然語言驅動的設計方式極大地降低了介面設計的門檻，使得即使是設計經驗有限的設計師也能創建專業級別的 UI 元件。
組件客製化
生成的元件可以根據專案需求進行進一步的客製化和美化。21st.dev 提供了多種元件樣式和功能，設計師可以選擇最適合的元件進行修改。這些元件不僅在視覺上具有吸引力，而且在功能上也非常完善，包括表單驗證、動畫效果和狀態管理等進階特性。客製化過程中，設計師可以透過簡單的命令調整元件的各個方面，如顏色、字型、間距和陰影等。系統會即時更新設計，並提供預覽，使設計師能夠直觀地看到修改的效果。此外，21st.dev MCP 還提供了豐富的預設主題和樣式庫，設計師可以快速應用這些預設，然後根據需要進行微調，進一步提高設計效率。
即時預覽
使用熱載入功能，設計師可以即時查看 UI 變化，無需頻繁切換到其他工具。這種即時回饋機制有助於快速迭代和優化設計。即時預覽功能不僅顯示靜態的視覺效果，還能展示互動行為和動畫效果，使設計師能夠全面評估元件的使用者體驗。即時預覽還支援多裝置視圖，設計師可以同時查看元件在桌面、平板和行動裝置上的顯示效果，確保響應式設計的正確實現。這種全面的預覽能力大大減少了跨裝置相容性問題，提高了設計效率和產品品質。
社群支援
21st.dev 還鼓勵設計師分享和發布自己的元件，形成一個活躍的設計師社群。這不僅可以獲取靈感，還能促進知識的共享和合作。社群中的元件庫不斷擴充，涵蓋了各種常見的 UI 模式和創新設計，為設計師提供了豐富的參考資源。
社群成員可以對元件進行評分和評論，幫助其他設計師找到高品質的元件。此外，社群還定期舉辦設計挑戰和競賽，鼓勵創新和技術交流。這種活躍的社群生態系統不僅提供了技術支援，還創造了學習和成長的機會，使設計師能夠不斷提升自己的技能和知識。
總結
結合 21st.dev 和 Cursor，設計師可以高效地創建和客製化現代 UI 元件。透過自然語言指令生成元件、即時預覽和社群支援，這種組合為介面設計提供了強大的工具和資源，幫助設計師更快地實現創意和功能。這種 AI 驅動的設計方式不僅提高了生產效率，還促進了創新，使設計師能夠專注於解決業務問題和提升使用者體驗，而不是陷入繁瑣的技術細節中。
隨著 AI 技術的不斷進步，我們可以預見 21st.dev MCP 和 Cursor 的整合將變得更加智慧和強大，進一步簡化 UI 設計流程，並為設計師提供更多創新的可能性。這種趨勢將繼續推動介面設計領域的變革，使 UI 設計和實現變得更加高效、靈活和創新。
三、用 Readdy.ai +Cursor 生成 UI
Readdy.ai 的核心功能
Readdy.ai 能夠從文字描述生成專業的 UI 設計，並生成可直接使用的程式碼，實現無縫實施。Cursor 透過提供智慧設計建議、即時調整和與設計工具的整合來補充 Readdy.ai 的功能。
對話式設計體驗
無需專業設計技能，只需透過自然語言描述你的願景，Readdy.ai 就能理解並創建相應的設計。這種互動方式極大降低了設計門檻，使產品經理、創辦人等非設計專業人士也能輕鬆參與設計過程。
從創意到現實的快速轉化
Readdy.ai 能在幾分鐘內將產品需求轉化為專業級設計，大幅縮短了傳統設計流程所需的時間。對於新創企業和小型團隊而言，這意味著更快的迭代和更低的成本。
即用型設計輸出
或許最令人印象深刻的是，Readdy 不僅生成設計，還提供與設計完美匹配的前端程式碼（支援 HTML 和 React）。這消除了設計師與開發者之間的溝通障礙，加速了從設計到部署的過程。
Readdy.ai + Cursor 整合的複雜度與適用性
根據現有資料，Readdy.ai 似乎與預期的功能有所不同。它並非專為 Cursor 編輯器設計的 UI 生成系統，而是更多與 Readymag 平台中的自訂游標視覺效果實現相關[2]。
根據可用資訊，實現過程涉及使用 CSS 透過程式碼小工具創建自訂游標效果。該過程需要將特定的 CSS 程式碼插入到程式碼小工具中，使用圖片 URL 或瀏覽器內圖示來定義游標樣式[2]。還可以應用額外的自訂設定，使游標在懸停在特定頁面元素上時發生變化，方法是定位 data-id 屬性[2]。
這些實現從簡單（使用單行 CSS 的瀏覽器內圖示）到複雜（實現允許使用光效繪圖的互動式游標，這需要「更多的編碼」[2]）不等。
結論與建議
對不同經驗水準UX設計師的適用性
由於可用資訊的性質，Readdy.ai 似乎更專注於游標視覺效果而非全面的 UI 生成。基於這種理解，適用性分析轉向考慮哪些設計師會從自訂游標實現中受益：
初級 UX 設計師可能會發現更簡單的游標自訂是可存取的，因為它們只需要基本的 CSS 知識，為視覺互動增強提供了入口點。 中級 UX 設計師可能會從使用標準游標自訂選項和實現更獨特的游標行為中受益，這些行為可以增強整體使用者體驗。 資深 UX 設計師和專注於微互動的設計師可能會探索更複雜的實現，例如需要更廣泛編碼的互動式繪圖游標[2]。
基於本文的分析，我們提供以下選擇指南：
適合使用 Claude AI + Cursor 的場景
全面的 UI/UX 設計專案
需要從概念到程式碼實現的完整流程
各種經驗水準的設計師都適用
預算充足的專案（考慮到訂閱費用）
適合使用 21st.dev MCP + Cursor 的場景
專注於元件化設計系統的專案
有中級以上技術背景的設計師
需要高度情境感知的 UI 生成
適合使用 Readdy.ai 的場景
主要關注游標視覺效果和微互動
作為其他設計工具的補充
未來展望
AI 輔助設計工具正在快速發展，我們預計未來將出現一系列革命性的變革。首先，AI 將實現更深度的設計理解，不僅能夠識別視覺元素，還能理解潛在的設計原則、品牌一致性和使用者體驗目標。這種理解將使 AI 能夠提供更符合上下文的建議，甚至預測使用者行為並據此優化設計。同時，跨平台設計生成能力將顯著增強，AI 將能夠同時為網頁、行動應用、可穿戴裝置和物聯網介面生成一致且適應性強的設計，確保品牌體驗在所有接觸點保持一致。協作功能也將迎來質的飛躍，支援設計團隊、開發人員和產品經理在同一平台上即時協作，AI 將充當「設計協調員」，自動調和不同團隊成員的輸入並提出整合方案。
設計系統自動化方面，AI 將能夠根據初始設計決策自動生成和維護完整的設計系統，包括元件庫、樣式指南和互動模式，並隨著產品演進自動更新這些資源。此外，與無程式碼/低程式碼平台的深度整合將進一步降低技術門檻，使非技術背景的創意人員能夠將概念直接轉化為功能性產品。
值得注意的是，AI 還將在可訪問性設計方面取得突破，自動識別並解決可能影響不同能力使用者的設計問題，提供替代方案建議。隨著這些工具的成熟，設計師的角色將發生根本性轉變，從執行者轉向策略家和創意引導者。他們將更加專注於創意思考、使用者研究、情感設計和策略決策，而將更多重複性和技術性工作交給 AI 輔助工具完成。這種轉變不僅提高了效率，還將釋放設計師的創造力，使他們能夠探索更具創新性和實驗性的設計方向，最終創造出更符合人類需求和期望的數位體驗。
[1]: APIyi. (2023). Cursor + Claude 性能指南 [Cursor + Claude Performance Guide].
[2]: Readymag. (2023). 創建自定義游標 [Creating a Custom Cursor].
[3]: CodeFarmer. (2023). Cursor AI 編輯器：開發者的智能助手 [Cursor AI Editor: Developer's Intelligent Assistant].
[4]: Cursor. (2023, 5月15日). Cursor - 基於AI的代碼編輯器介紹 [Cursor - Introduction to AI-based Code Editor] [視頻]. YouTube.
[5]: KyoMind. (2023). Cursor：AI驅動的程式碼編輯器 [Cursor: AI-Driven Code Editor].
[6]: TechWorld. (2023, 8月3日). Cursor編輯器與AI編程助手實戰演示 [Cursor Editor and AI Programming Assistant Demonstration] [視頻]. YouTube.
[7]: 量子位. (2024, 10月). Cursor推出全新AI設計功能 [Cursor Launches New AI Design Features].
[8]: DevTech. (2024, 2月10日). Cursor與Claude整合：提升開發效率 [Cursor and Claude Integration: Improving Development Efficiency] [視頻]. YouTube.
[9]: UXDesign. (2024, 4月22日). 使用Cursor進行UI/UX設計的最佳實踐 [Best Practices for UI/UX Design Using Cursor] [視頻]. YouTube.
[10]: AITools. (2024, 6月5日). Readdy.ai與Cursor的協同工作流程 [Readdy.ai and Cursor Collaborative Workflow] [視頻]. YouTube.
[11]: 新浪財經. (2024, 12月15日). AI設計工具Readdy獲得新一輪融資 [AI Design Tool Readdy Secures New Round of Funding].
[12]: 33 Labs. (2024). AI驅動的設計工具比較 [Comparison of AI-Driven Design Tools].
[13]: Intel社區. (2023). HD4000滑鼠游標在滑鼠指針變化時跳動 [HD4000 Mouse Cursor Jumping When Mouse Pointer is Changing].
[14]: Sweigart, A. (2023). 自動化無聊的工作：Python實用編程 [Automate the Boring Stuff with Python].
[15]: 開源中國. (2024). Cursor編輯器新增AI設計功能 [Cursor Editor Adds AI Design Features].
copyright © PrivacyUX consulting ltd. All right reserved.
關於本刊作者
Gainshin Hsiao 是 Agentic UX（代理式使用者體驗）的先驅，在人工智能與使用者體驗設計領域擁有超過 15 年的開創性實踐。他率先提出將用戶隱私保護視為 AI 產品設計的核心理念，於 2022 年創立 Privacyux Consulting Ltd. 並擔任首席顧問，積極推動隱私導向的醫療 AI 產品革新。此前，他亦擔任社交 AI 首席策略官（2022-2024），專注於設計注重隱私的情感識別系統及用戶數據自主權管理機制。
Agentic UX 理論建構與實踐
AI 隱私保護設計準則
負責任 AI 體驗設計
在 Cyphant Group 設計研究院負責人任內（2021-2023），他探索了 AI 系統隱私保護準則，為行業標準做出貢獻。更早於 2015 至 2018 年，帶領阿里巴巴集團數位營銷平台體驗設計團隊（杭州、北京、上海、廣州）、淘寶用戶研究中心並創立設計大學，從零開始負責大學的運營與發展，不僅規劃了全面的課程體系，更確立了創新設計教育理念，旨在為阿里巴巴集團培育具備前瞻視野與實戰能力的設計人才。其課程體系涵蓋使用者中心設計、使用者體驗研究、數據驅動設計、生成設計等多個面向應用。
活躍於國際設計社群，在全球分享 Agentic UX 和 AI 隱私保護的創新理念。他的工作為建立更負責任的 AI 生態系統提供了重要的理論基礎和實踐指導。
學術背景
Mcgill - Infomation study/HCI -Agentic UX, Canada
Aalto Executive MBA-策略品牌與服務設計, Singapore
台灣科技大學：資訊設計碩士- HCI, Taiwan
中原大學：商業設計學士- Media and marketing design, Taiwan