讓網頁不像 AI 做的

這是什麼

兩個裝在 Claude Code 裡的設計技能（skill）：

• Impeccable：管字型、配色、間距、版面，還附一份「AI 老套設計」的禁止清單，例如每張卡片都長一樣、標題上面多一行小標籤、漸層文字。
• Emil Kowalski 的設計技能：管動畫和細節，例如動畫要多快、按下去要有回饋、不要讓東西從零突然冒出來。

裝了之後，Claude 做出來的網頁比較不會一看就像 AI 做的。

誰需要

• 用 Claude 做網頁、落地頁、作品集的人
• 覺得 AI 做的網頁都長得差不多的人

要不要錢

兩個技能都是免費開源的（Impeccable 是 Apache 2.0，Emil 的是 MIT），裝在 Claude Code 裡就能用。

怎麼開始

1. 把下面這段貼給 Claude Code，它會幫你裝好：

請幫我安裝兩個設計 skill 到我的 skills 資料夾：
1. https://github.com/pbakaus/impeccable 的 impeccable skill
2. https://github.com/emilkowalski/skill 裡的 emil-design-eng
安裝前先讀過內容，Impeccable 附的 hooks 先不要裝。

2. 之後要做網頁時，打 /impeccable，或直接說「用 Impeccable 和 Emil 的技能幫我做」。

我實際怎麼用

你現在看的這個網站，就是用這兩個技能做的。

它沒有直接開始畫，而是先問我很多問題：給誰看、想要什麼感覺、用什麼技術。接著做了五種完全不同風格的首頁讓我比較，我挑了現在這個食譜卡的版本，再換了兩輪配色、兩輪字型才定案。

做完它還會另外派一個審查員檢查。第一輪就抓出 8 個問題，例如「撰寫中」的卡片顏色太淡看不清楚、格線壓到文字、文章頁沒有動畫。全部修到審查員說可以，才上線。

小提醒

• Impeccable 的一鍵安裝會順便裝「hooks」：每次改檔案都自動跑一次檢查。如果你的電腦還有跑其他系統，建議先不要裝 hooks，只在專門做網站的資料夾裡用。
• 它問的問題照實回答。 給誰看、想要什麼感覺講得越清楚，做出來越準。
• 第一次用會下載一個檢查用的小程式，正常的。
• 好看的前提是內容先想清楚。 技能管的是怎麼呈現，寫什麼還是要你決定。