baseline-ui

baseline-ui 技能概覽

baseline-ui 的用途

baseline-ui 技能可協助你檢視或產生 UI 作品，並對照 Tailwind CSS 專案中帶有明確立場的基準線。它適合用在你希望 AI 輸出不要再偏離到不一致的間距、薄弱的無障礙性，或不必要動畫的情境。若你正在評估是否要安裝 baseline-ui，核心價值不是「更多 UI 點子」，而是讓 UI 決策更收斂、更一致。

適合哪些人使用

baseline-ui 最適合開發者、在程式碼中工作的設計師，以及需要實用元件輸出基準的 AI 輔助建置者。它特別適合 React/Tailwind 技術棧，也很適合用來在 review 之前先讓 baseline-ui 技能抓出問題。如果你的團隊已經有嚴格的 design tokens 與 component primitives，這個技能可以強化它們，而不是取代它們。

最擅長的地方

baseline-ui 指南聚焦在動畫限制、排版紀律、無障礙 primitives，以及避免版面反模式。這讓它在 UI Design 任務上特別強，因為目標是穩定一致的實作，而不只是表面好看。當提示詞很模糊，而你希望模型預設做出更安全的選擇時，這個技能最有用。

如何使用 baseline-ui 技能

安裝並呼叫 baseline-ui

要安裝 baseline-ui，請使用儲存庫的技能安裝流程：npx skills add ibelick/ui-skills --skill baseline-ui。實務上，baseline-ui 技能是透過在對話或檔案中引用 /baseline-ui 或 /baseline-ui <file> 來呼叫。如果你是用 baseline-ui 做 UI Design review，請確保目標檔案或需求中包含實際的 component、route 或 layout 情境。

提供正確的輸入形狀

baseline-ui 在你先明確提供預期的 component、framework 與限制程度時，效果最好。較弱的提示會說「把這張卡片做好一點」。較強的提示會說「請檢視這個 React/Tailwind card 的間距、motion、鍵盤操作，以及 icon-only button 的可近用性，並維持既有 primitives 不變。」第二種提示能幫助 baseline-ui usage，因為它給了模型要檢查的具體失敗模式。

先讀這些檔案

先從 SKILL.md 開始，再檢查任何定義專案技術棧或 component 規則的 repo 檔案。在這個儲存庫裡，沒有額外的 rules/、resources/ 或 scripts/ 資料夾，所以 SKILL.md 是主要的依據。如果周邊專案本身就有 primitives 或 tokens，先讀這些內容，再讓 baseline-ui 去修改輸出。

能提升結果的工作流程

把 baseline-ui 當成審核關卡，而不只是生成捷徑。先請它產出 UI，再請 baseline-ui 依照技能規則檢查，最後只修正被標記的部分。當你想要的是精簡、程式碼層級的修正，而不是大幅重新設計時，這個流程尤其有效。baseline-ui 技能在任務夠具體、能暴露真實違規時最強。

baseline-ui 技能 FAQ

baseline-ui 只適用於 Tailwind CSS 嗎？

不是。Tailwind CSS 是主要適用場景，但這個技能本質上是在強化 UI 的約束，例如間距、motion、primitives 與無障礙性。如果你的技術棧不是 Tailwind，某些 stack 規則可能不那麼相關，不過它的 review 邏輯仍然有幫助。若要取得最佳的 baseline-ui 安裝價值，請在以 Tailwind 為主的專案中使用。

這和一般提示詞有什麼不同？

一般提示詞可能只會要求「乾淨的 UI」，但這太開放了。baseline-ui 提供的是可重複使用的基準，用來檢查 animation、typography、primitives 與 anti-patterns，讓模型比較不會憑空發明不一致的模式。這也讓 baseline-ui 指南比臨時即興的 prompting 更適合團隊工作流程。

baseline-ui 適合初學者嗎？

適合，只要你已經知道要處理哪個檔案或 UI 表面。初學者在提供具體 component，並要求列出違規與修正時，通常能得到最大的價值。如果你還在決定架構，baseline-ui 可能比較像約束檢查器，而不是教學工具。

什麼情況下不該用？

當你想要高度實驗性的 motion、Tailwind 預設以外的自訂設計系統，或完整的視覺重塑時，不要用 baseline-ui。它是用來強化基準的技能，不是自由發揮的品牌設計助手。如果專案刻意打破常見 UI 規範，baseline-ui 可能會給出過度嚴格的回饋。

如何改進 baseline-ui 技能

明確指出 UI 表面

要拿到最好的 baseline-ui 結果，關鍵是直接命名確切的 component、狀態與互動表面。請說明你是在檢視 modal、nav menu、form row，還是 empty state。這能幫助 baseline-ui 技能把注意力放在鍵盤操作、focus 處理、motion 與 component 選擇，而不是猜產品長相。

告訴它哪些內容不能改

如果你的專案已經使用 component primitive 系統，請直接說明。baseline-ui 的設計目標是優先沿用既有 primitives，避免在同一個表面混用多套系統。也要明確指出哪些 Tailwind 預設、動畫函式庫，或既有的 class helper 必須保留，因為這些限制會實質影響建議的修正方式。

要求證據與修正

在 review 任務中，請要求精確的違規片段、簡短原因，以及程式碼層級的修正方式。這種格式符合 baseline-ui 的使用方式，也讓輸出更容易直接套用到 code review 中。如果第一次結果太寬泛，就把提示縮小到單一檔案或單一互動，再用相同基準加上你想修正的特定失敗重新執行 baseline-ui。