Communitygithub.com

aialchemylabs/ui-design-exploration

在實作前探索和比較 UI 設計方向,以現有產品為基礎。適用於替代佈局、視覺概念和設計交接;區分探索性工作與生產環境程式碼變更,並進行唯讀的設計評審。

ui-design-exploration 是什麼?

這個技能旨在協助開發者與設計師在實作前,基於現有產品探索並比較不同的 UI 設計方向。它能有效支援替代佈局、視覺概念發想以及設計交接流程,並確保探索性工作與生產環境程式碼變更清楚分離,同時支援唯讀的設計評審。技能會仔細檢查現有畫面、元件、設計代碼、內容密度、互動慣例等,以產生符合產品識別的設計方向(除非明確要求重新設計)。它強調使用真實資料、考慮空狀態/錯誤狀態、響應式佈局等情境,讓每個替代方案的優缺點一目了然。此技能支援多種平台(如 Claude Code、Coder、Codex),並可搭配 Superdesign 整合(讀取 hosted-design.md)或直接產出本機 HTML、設計畫板等可交付成果。透過嚴謹的參考證據引用機制(如 design-reference-research),技能能確保每個設計選擇都有跡可循,並將未解決的問題標記為待驗證事項,而非憑空創造行為。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/aialchemylabs/agents-skills/tree/HEAD/plugins/engineering/skills/ui-design-exploration

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

UI 設計探索

為指定的任務產出可用的設計方向。在產生替代方案之前,檢查現有畫面、元件、代碼、密度、內容和互動慣例。除非要求重新設計,否則保留產品識別。

使用參考證據

當外部參考資訊影響任務時,如果可用,請使用 design-reference-research,或直接檢查相關的預設/提供的來源。掌握其來源涵蓋範圍、擷取 ID、觀察結果和不確定性。不要重做已完成的研究,也不要將未經審查的情緒板當作證據。對於已建立在產品基礎上的小型任務,參考資訊的可用性並不表示必須進行研究。

將有用的原則轉化為使用現有產品識別的原始替代方案。解釋每個重要選擇如何遵循使用者任務和證據。根據平台、任務和限制解決衝突的模式;不要混用不相容的導覽系統或複製其他產品的品牌。將未知的互動狀態作為待驗證的問題記錄下來,而不是憑空發明觀察到的行為。

呈現替代方案

僅說明會顯著改變結果的選擇。識別使用者任務、內容層級、適用狀態、無障礙限制和目標表面。讓替代方案在結構或互動上產生重大差異,而不僅僅是顏色。產生的數量應與請求成比例;不要總是生成三個或要求平行代理。

除非已經要求實作,否則將探索性產出與生產程式碼分開。使用真實資料、長標籤、空狀態/錯誤狀態以及會影響選擇的響應式佈局。展示每個替代方案改進了什麼以及付出了什麼代價。僅憑螢幕截圖無法說明焦點、導覽或持續性。

使用可用的設計能力

使用儲存庫原生的元件以及可用的預覽/設計工具。可用的交付成果可以是本機 HTML、現有的設計畫板或帶註解的視覺稿;它不必依賴託管供應商。如果沒有證據,不要聲稱設計已經渲染或測試過。

對於明確配置了 Superdesign 整合的情況,請閱讀 hosted-design.md。工作流程必須在該服務不可用時仍能運作。請勿下載最新 CLI、建立帳戶或將原始碼上傳作為設計工作的隱含先決條件。

交接設計方向

根據任務和限制比較替代方案。如果使用者要求選擇,則呈現用於該決策的實際替代方案。如果他們授權您選擇,請提出建議並說明理由繼續進行,而不是引入另一個核准關卡。

提供所選的產出物、重複使用的代碼/元件、佈局規則、響應式變更、互動/焦點行為、有意義的狀態、資產和未解決的決策。將驗收標準和故意的偏差與參考證據 ID 關聯起來(如果可用);未被選中的替代方案不是實作需求。將選定的設計與可運作的實作區分開來。如果可用,將已授權的實作路由到 frontend-ui-engineering,將評審路由到 plan-design-review,但無需安裝它們。

閱讀 provenance.md 以了解上游工作流程的來源和注意事項。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能