如何提升 UI/UX 技能

多年來，精通 UI/UX 設計的最大障礙並非缺乏工具，而是「反饋的速度」。 當你在調整版面配置、微調字體層級或修復尷尬的空間邊距（Padding）時，通常只有兩種選擇：等待數小時（甚至數天）讓資深設計師給予點評，或者依賴自己未受過專業訓練的眼光並祈禱結果順利。 最近，我透過將開放設計工具（例如 Penpot，其原生依賴 CSS Grid、Flexbox 和 SVG 等開放 Web 標準）與大型語言模型（LLM）結合，大幅縮短了 UI/UX 的學習曲線。透過將開放標準作為設計畫布與 LLM 之間的通用語言，我建立了一個即時且自動化的設計審查引擎，能夠找出 UX 缺陷、修正空間問題，並即時教導我設計理論。 以下是這套配置的運作原理、為什麼開放設計格式對 AI 輔助設計至關重要，以及你如何利用它來提升你的 UI/UX 技能。

為什麼開放設計工具改變了 AI 的方程式

如果你嘗試將專有格式的設計檔案輸入給 AI，你會碰到瓶頸：其底層數據結構被鎖在不透明的二進位格式中。 開放設計工具則完全顛覆了這一點。基於開放 Web 標準構建的工具，會使用乾淨的 SVG 路徑、CSS Flexbox 屬性、CSS Grid 規則以及可存取的 DOM 結構來渲染版面配置。由於 LLM 對 HTML、CSS、SVG 和設計系統有著深入的訓練，它們「讀取」開放設計版面的能力，就跟開發者閱讀程式碼一樣輕鬆。

這帶來了三大巨大優勢：

• 機器可讀的版面配置：從開放設計工具導出的 SVG 或組件樹（Component Tree），包含明確的空間座標、CSS Flex 屬性、字型大小和顏色十六進位碼（Hex Code），LLM 可以對其進行定量分析。

• 雙向編輯：你可以用自然語言描述版面配置，要求 LLM 生成或修改 SVG/CSS 程式碼，然後直接將其貼回你的開放設計工具中，成為完全可編輯的向量節點或 Web 版面。

• 確定性的規則引擎：你不需要向 AI 尋求模糊的主觀意見，而是可以要求它審計具體屬性：WCAG 色彩對比度、8pt 空間網格遵循度，以及字型階層的一致性。

我用於快速修正 UI/UX 的 4 步工作流程

為了將這套工具鏈轉化為個人設計導師，每次建立新頁面時，我都遵循一套嚴格的四步迭代循環：

• 步驟 1：在畫布中繪製結構草圖 我首先在開放設計畫布中，使用原生 Web 版面引擎（Flexbox/Grid）拉出核心用戶流程的模型。在這個階段，我純粹專注于視覺層級——用戶的目光首先應該落在哪裡、主要操作按鈕的擺放位置，以及導覽模式。

• 步驟 2：導出上下文以供 LLM 審計 當粗略的線框圖（Wireframe）或高保真框架完成後，我會擷取原始版面結構（透過 SVG 程式碼、CSS 屬性或結構化的 JSON 組件樹），並附上一張簡單的螢幕截圖傳給 LLM。 我會提示模型扮演「資深 UX 策略師與無障礙審計師」，並給予具體的點評指南：

  「分析這個彈出式對話框（Modal Dialog）組件。檢查是否符合 WCAG AA 對比度標準、評估行動裝置的觸控目標大小、檢查垂直空間韻律是否遵循 8px 網格，並指出 UX 文案中是否有任何認知負載過重的問題。」

• 步驟 3：即時點評與基於程式碼的修正 短短數秒內，LLM 就會提供精確的逐項點評，並附帶即時的 CSS/SVG 修正程式碼：

  • 視覺層級：「你的次要按鈕『取消』與主要按鈕『儲存』具有相同的視覺權重。請將次要按鈕的填滿透明度降低至 10%，或將其轉換為外框樣式。」

  • 空間韻律：「標題與內文之間的 Padding 為 19px。請調整為 24px（3x 8px 基準網格），以建立乾淨的空間韻律。」

  • UX 微文案（Micro-Copy）：「按鈕標籤『提交表單』過於模糊。請改為『確認訂閱』，以明確傳達該操作的結果。」

• 步驟 4：直接修補與視覺驗證 與其手動重新計算每個像素偏移量，我直接接納 LLM 提供的更新版 CSS Grid 屬性或 SVG 程式碼片段，並將其應用回設計畫布。版面會即時更新，讓我可以視覺化地比較「修改前」與「修改後」，並深刻理解為什麼修正後的版本感覺更加平衡。