Day 110GitHub 10 萬星的 repo 有個做網頁畫面的 skill 叫 impeccable

這是什麼

impeccable 是 GitHub 上 pbakaus/impeccable 這個 repo 裡的 skill。
這個 repo 有 10 萬以上的星數，授權是 Apache-2.0。
它幫 Claude 做網頁畫面和介面設計。
這一篇不介紹成品。這一篇拆開它的 SKILL.md，看它怎麼對 Claude 下指令。

怎麼裝

1. 輸入 /plugin marketplace add pbakaus/impeccable
2. 輸入 /plugin，選 Impeccable 安裝

規則一：先分頁面用途

SKILL.md 把頁面分成四種：

• 說服：訪客要做決定。例如官網和價格頁。
• 操作：訪客要完成一件事。例如後台和設定頁。
• 閱讀：訪客要看懂內容。例如說明文件和教學。
• 體驗：作品本身是主角。例如作品集。

力道依用途而變。說服和體驗要放膽做。操作和閱讀要求精準。
用途看「這一頁」，不看產品。產品的官網仍是說服頁。時尚品牌的說明文件仍是閱讀頁。

規則二：照你說的做

• 你指定的風格、字體和色彩，SKILL.md 規定 Claude 照做。把你的需求導向它自己的品味，原文稱為失敗。
• 小修：保留原本的樣子。要改事實性文字，先問你。
• 大改：整套換新。不准在舊樣子上小修。
• 看成品：照實際大小看畫面。先看完，再一起改。
• 做完：交完整成品。只有你要自己提供的素材除外。

規則三：怎麼接你的話

• 只叫名字：先列選單給你挑。不自己開工。
• 兩個指令都像：只問你一次。
• 叫它檢查：它有 critique（設計評分）和 audit（無障礙、效能、手機版面）。
• 叫它調整：它有 bolder（太平淡就加強）和 quieter（太吵就收斂）。
• 做設計時看到舊設定過期：只回報，不順手修。

出處

• pbakaus/impeccable 的 SKILL.md：https://github.com/pbakaus/impeccable