impeccable

impeccable skill 概覽

impeccable 適合用來做什麼

impeccable skill 是一套用於 UI 設計與前端實作的能力，目標是打造有辨識度、可投入正式環境的介面，而不是看起來像一般 AI 批次產生的制式畫面。它特別適合拿來製作 web components、頁面、app 畫面、海報，或各種功能流程；在這些情境裡，視覺品質、互動細節與系統一致性，和可執行的程式碼一樣重要。

誰適合安裝 impeccable

如果你本來就有在交付前端程式碼，並希望把更成熟的設計判斷直接帶進生成流程，那就很適合安裝 impeccable。它特別適合會寫程式的產品設計師、前端工程師，以及需要 impeccable for UI Design，而不只是快速搭骨架的 agent 使用者。反過來說，如果你只是想先做一個很快的占位版型，這個 skill 可能會比實際需求更重。

這個 skill 有什麼不同

impeccable 最大的差異在於它的結構化流程。它不只是籠統地說「把畫面做漂亮」，而是把工作分成三種模式：craft 用於先定形再實作，teach 用於補齊設計脈絡，extract 用於把重複出現的 UI 模式整理成可重用的 components 與 tokens。這個 repo 也提供了針對色彩、間距、字體、動態、互動、響應式行為與 UX writing 的專門設計參考，比起單一長 prompt 更容易直接落地執行。

使用者在採用前最在意什麼

使用 impeccable 真正解決的核心問題，是降低摸索成本：先設計什麼、該載入哪些參考、何時停止過度抽象化，以及怎麼避開常見的低品質 AI UI 習慣。相對的取捨是，impeccable 最適合用在你能提供專案脈絡、既有模式與明確功能目標的情況下。它不是品牌方向或產品決策的魔法替代品。

如何使用 impeccable skill

安裝情境與首次執行檢查

常見的安裝方式如下：
npx skills add pbakaus/impeccable --skill impeccable

安裝後，先打開 .claude/skills/impeccable/SKILL.md。這個 repo 在更新後還有一個一次性的維護步驟：
node .claude/skills/impeccable/scripts/cleanup-deprecated.mjs

如果你想快速掌握整體結構，建議依照以下順序閱讀：

1. SKILL.md
2. reference/craft.md
3. reference/extract.md
4. reference/spatial-design.md
5. reference/typography.md

至於 reference/color-and-contrast.md、reference/interaction-design.md、reference/motion-design.md、reference/responsive-design.md 與 reference/ux-writing.md，則在任務真的需要時再補讀即可。

選對模式：craft、teach 或 extract

當你需要建立一個功能或頁面時，使用 impeccable craft。對新的 UI 工作來說，這通常是最穩妥的預設選擇，因為它會強制你走一個有效順序：先定義設計形狀、載入相關參考，再處理結構、版面、字體、色彩與最後修飾。

當團隊或 agent 在實作前需要先建立設計脈絡時，使用 impeccable teach。如果你的 repo 裡已經出現重複的 components、硬編碼數值，或彼此不一致的 variants，並且你想把它們整併成 design system，則使用 impeccable extract。

提供 impeccable 真正需要的輸入資訊

如果你的 prompt 包含以下資訊，impeccable 的使用效果通常會明顯提升：

• 功能目標
• 目標使用者
• 截圖或現有 component 路徑
• 品牌限制
• framework 與 styling stack
• 響應式需求
• 無障礙要求
• 你要的是全新 UI，還是要做 system extraction

弱的 prompt：
「Make a dashboard look modern.」

強的 prompt：
「Use impeccable craft to design and implement a billing dashboard in React + Tailwind. Match our existing admin shell. Primary tasks: invoice status, failed payment recovery, recent usage. Brand should feel calm and premium, not playful. Mobile and desktop required. Keep keyboard focus visible and avoid card-overload. Reuse patterns from src/components/admin/*.」

這種層級的輸入，能幫助 impeccable 正確挑選參考資料，也比較不會落入預設審美。

讓 impeccable 輸出更好的實務流程

一套可靠的 impeccable 使用流程可以是：

1. 先從 craft 開始，並在寫程式前先確認設計 brief。
2. 只載入和 brief 直接相關的參考文件。
3. 先用語意化方式建立主要狀態。
4. 先處理間距與層級，再做裝飾。
5. 明確設計互動狀態：hover、focus、active、disabled、loading、error、success。
6. 如果重複模式出現超過 3 次，再切換到 extract。

參考文件裡有一個很實用的建議：如果色彩設計很重要，請優先使用 OKLCH，不要下意識就生成 HSL palette。如果響應式行為很重要，請使用由內容驅動的 breakpoints，以及 pointer/hover media queries，而不只是依賴螢幕寬度假設。

impeccable skill 常見問題

impeccable 比一般 UI prompt 更好嗎？

多半是，前提是你在意品質。一般 prompt 也能產出可用的 markup，但 impeccable 多了決策規則，以及以參考文件為基礎的間距、字體、互動狀態、動態效果與 token extraction 標準。這讓它在設計敏感型工作上更可靠，而不只是比較快產生程式碼。

impeccable 適合初學者嗎？

可以，但有條件。初學者可以把 impeccable skill 當成一套有引導性的工作流程，尤其是 craft 與 teach。但它仍假設你有能力檢查自己的 repo、判斷是否適配，以及回答釐清問題。如果你無法提供既有模式或清楚的 brief，結果仍可能看起來很制式。

什麼情況下不該用 impeccable？

如果你只是要做一次性的 mock、極簡 landing page 占位稿，或是任務根本不重視視覺設計品質，那就可以跳過 impeccable。當完全沒有產品方向，卻期待這個 skill 無中生有發明品牌策略時，它也不是合適選擇。

impeccable 能融入既有 design system 嗎？

可以，尤其是透過 extract。事實上，和空白 demo 相比，這個 skill 在真實 repo 裡通常更有價值，因為它能辨識重複元件、硬編碼數值與不一致的 variants。如果目前還沒有 design system，repo 內的指引也建議你先釐清偏好的結構，再決定要建立什麼，而不是直接憑空硬造一套。

如何改善 impeccable skill 的使用效果

先寫更好的 brief，不是更長的 brief

想提升 impeccable 輸出品質，最快的方法不是把需求寫更長，而是把限制條件寫得更清楚。請加入目標受眾、成功標準、語氣、既有 UI 參考，以及哪些部分不能改。「Premium but approachable for finance managers」就比「clean and modern」更有用。好的限制條件能有效減少平淡無味的預設結果。

載入正確的參考，不要一次全塞

常見失敗模式之一，就是一開始把所有文件都丟進流程。對 impeccable usage 來說，應該載入最少但足夠的參考：spatial-design.md 和 typography.md 幾乎總是值得先看，接著再依功能需求補上 color、motion、interaction、responsive 或 UX writing。這樣比較能讓決策保持聚焦。

留意常見的弱輸出模式

如果結果看起來還是普通，可以先檢查這些問題：

• 預設藍／橘 palette 選擇
• 過度依賴 card、但層級薄弱的版面
• 有 hover 狀態，卻沒有 keyboard focus 樣式
• 把 placeholder text 當成 label 使用
• 在模式還沒重複前就太早抽取
• 在觸控裝置上仍用 desktop-first 的版面假設

這些正是 impeccable 參考資料想要修正的典型問題。

第一版之後，用具體回饋迭代 impeccable

不要只說「make it better」。請根據 repo 指引提出具體改善方向，例如：

• 「Increase hierarchy using spacing and weight, not more cards.」
• 「Retune the palette in OKLCH with tinted neutrals.」
• 「Add all interactive states for form controls.」
• 「Extract tokens only where repeated 3+ times.」

這種後續回饋，能讓 impeccable 比一次性生成器更有價值，也是把 UI Design 輸出推進到 production-ready 水準的最佳做法。