quieter

概覽

什麼是 quieter 技能？

quieter 是一款 UI 設計技能，幫助你降低視覺上過於強烈或刺激的介面。它系統性地減少強度，例如過度飽和的色彩、對比度和動畫，同時保留設計的有效性與清晰度。當你的 UI 感覺過於大膽、喧鬧、壓迫或俗氣，想要更精緻且親和的外觀時，請使用 quieter。

誰適合使用 quieter？

• 希望讓繁雜或刺眼介面更平靜的 UI 設計師
• 使用設計系統的前端開發者
• 追求更專業且不分心使用體驗的團隊

它解決了哪些問題

• 過度飽和的色彩與高對比元素
• 競爭激烈的大膽視覺與過多動畫
• 缺乏視覺層次與精緻感
• 讓人感到壓迫或不夠細膩的設計

使用方式

安裝步驟

1. 將 quieter 技能加入你的專案：

   npx skills add https://github.com/pbakaus/impeccable --skill quieter
   

2. 從主要文件開始：
   • 開啟 SKILL.md，了解詳細工作流程與準備步驟。
   • 如有提供，檢視相關檔案如 README.md、AGENTS.md 和 metadata.json 以獲得更多背景資訊。

工作流程概述

1. 必要準備：
   • 執行 /frontend-design 以收集設計背景與原則。
   • 若無設計背景，請先執行 /teach-impeccable。
2. 評估現況：
   • 辨識視覺強度來源（色彩、對比、動畫、複雜度、比例）。
   • 理解設計的目的、目標受眾與核心訊息。
   • 若背景不明確，使用 AskUserQuestion 工具釐清需求。
3. 規劃與精煉：
   • 制定降低強度的計畫，同時保留關鍵訊息與可用性。
   • 依 quieter 建議調整色彩、對比、比例與動畫。
   • 反覆調整並檢視變更，確保平衡與清晰。

最佳實踐

• 變更前務必收集並釐清設計背景。
• 著重保留有效元素，只減少造成過度刺激的部分。
• 將 quieter 作為整體設計系統精煉流程的一環。

常見問題

什麼時候該使用 quieter 技能？

當你的 UI 被形容為過於大膽、喧鬧、激烈或壓迫，或利益相關者希望介面更平靜、精緻時，使用 quieter。

quieter 適用於所有前端框架嗎？

quieter 不依賴特定工作流程，可適用於任何前端技術棧或設計系統。它提供設計指導，而非特定程式碼修正。

我應該先檢視哪些檔案？

請先閱讀 SKILL.md，了解主要工作流程。也可查看 Files 標籤中的輔助腳本與參考資料。

quieter 適合所有專案嗎？

quieter 最適合視覺過度刺激需調整的專案。對於需要高能量或吸睛視覺（如行銷活動）的介面，建議選擇性使用 quieter。

我在哪裡可以找到更多指引？

請瀏覽儲存庫的 Files 標籤，查看完整檔案結構，包括巢狀參考與輔助腳本，協助你的設計精煉流程。