Impeccable＋Emil：讓 Claude 做的網站像專業設計師做的

這是什麼

這是一套讓 Claude 做網站時「照設計師的規矩來」的設定，由三個 skill（給 Claude 看的做事規則）組成。

第一個是 Impeccable，作者是 Paul Bakaus，管字體、間距、版面、配色、動畫，還附一張AI 老套設計清單：標題上面一排英文小字、一排大數字配小字、一排長得一樣的卡片、漸層字、用表情符號當圖示，這些一看就是 AI 做的樣子，通通列為不准用。它在 GitHub 有 6.9 萬顆星，Apache-2.0 授權（2026-09-18 查證）。

第二個是 Emil Kowalski 整理的設計規則，管元件怎麼做、動畫怎麼動才順、按鈕和細節怎麼調才有質感。它在 GitHub 有 3.9 萬顆星，MIT 授權（2026-09-18 查證）。

第三個是我們自己做的 site-check：用你電腦上的 Chrome 或 Edge，把網站在手機、平板、筆電、電腦四種寬度各截一次，抓字有沒有超出畫面、中文有沒有斷錯、照片主角有沒有進畫面，有問題就改，再截一次。

我們照這套做了三個示範網站（手沖咖啡店、室內設計、兒童才藝教室），第一版就有九成，後面修的多半是中文斷行、手機版和字體載入這些細節，不是回頭救設計。

誰需要

• 想自己做店家或個人網站，但不會設計的人
• 叫 AI 做過網站，結果一看就知道是 AI 做的人
• 網站做好了，手機版卻常常跑掉，要一直自己截圖檢查的人

要不要錢

設計規則本身免費開源；要讓 Claude 自己開瀏覽器截圖檢查、手機版自己修，要用 Claude 付費方案（Pro 以上），價格以 claude.com/pricing 為準。

免費版（claude.ai 網頁版）也能上傳兩個設計規則來用，差別是 Claude 不能自己截圖，手機版要你自己截圖貼回對話請它修；免費版的用量每 5 小時重置一次，做網站比一般聊天更吃用量，多改幾輪就可能碰到上限。

怎麼開始

1. 準備好 Claude：付費版用 Claude 桌面版的 Code 分頁（Pro 以上），另外電腦要有 Chrome 或 Edge；免費版用 claude.ai 網頁版就好。
2. 裝設計規則：付費版把工具包裡的安裝指令貼給 Claude，它會自己把三個 skill 裝好；免費版到 claude.ai 的 Skills 頁面，上傳 Impeccable 和 Emil 兩個 ZIP。
3. 開一個空資料夾當網站資料夾，用一段話講清楚：店名、做什麼的、客人是誰、想放哪些區塊、想要什麼感覺。
4. Claude 會先問你兩三個問題，接著開始做；付費版做完會自己用 site-check 截圖檢查、修正、再截一次。
5. 打開 index.html 看成果，把標著「待填」或「示意」的內容（營業時間、地址、價格）換成真的，再拿去上線。

小提醒

Impeccable 官方的完整外掛會在背景一直跑一支程式，裝了會拖慢電腦；只拿規則文件來用，設計效果一樣。

想讓它參考你喜歡的網站風格可以，但只參考配色、字體感覺和留白，別人的照片、插畫、Logo 和文字不要拿來用。

Impeccable 和 Emil Kowalski 的設計規則是作者公開分享的開源專案，我們與作者沒有合作或代言關係。

本文資訊查證於 2026-09-18，工具更新後可能有出入。