讓 Claude 不再吐出「AI 罐頭網頁」
Frontend-design 是 Anthropic 官方推出的純指引型 Skill，教 Claude 先想清楚美學方向、再寫出能上線的前端。它強制避開那些一看就知道是 AI 生的設計——千篇一律的 Inter 字體、紫色漸層白底、置中卡片——改成有觀點、有記憶點的介面。
沒有引導時，模型會收斂到同一套安全牌：系統字體、紫漸層、對稱網格。這個 skill 直接把這些列為禁用清單。
動手前先定義四件事：Purpose（誰用、解決什麼）、Tone（極簡或極繁）、Constraints（框架／效能）、Differentiation（記憶點）。
不是 mockup、不是描述，而是能直接跑的 HTML/CSS/JS、React 或 Vue，且細節經得起檢視。
明確要求在不同生成間變換明暗主題、字體與風格，避免所有作品長得像同一個模子刻出來的。
讓 Claude 不再吐出「AI 罐頭網頁」。
先定調、再下筆——把「有觀點」變成預設值。
挑有個性的字體，避開 Inter / Arial；顯示字配內文字成對使用。
用 CSS 變數鎖定一致性；主色 + 銳利點綴，勝過平均分布的怯色。
HTML 優先純 CSS，React 用 Motion；集中火力在一次精彩的載入序列。
不對稱、重疊、對角流向、破格元素；大留白或受控密度。
漸層網格、噪點、戲劇性陰影、grain overlay，營造氛圍與層次。
當你要做網頁、元件、儀表板、海報時，描述比對成功，skill 被「漸進式揭露」載入。
SKILL.md 的設計準則進入上下文，引導模型先定調、再實作。
透過 code execution / artifacts 寫出可運作的前端檔案。
可與 docx、pdf、pptx 等輸出型 skill 接力，先定視覺再轉成交付檔。
它本身不執行任何程式、不發網路請求——只是一段被挑進上下文的 markdown 指引。能不能在對的時機被選中，幾乎完全取決於 description 寫得夠不夠精準。
產品首頁要有記憶點，而不是又一個紫漸層 hero。
資訊密度高，但要層次分明、不雜亂。
要強烈個人風格，讓人記得住。
一次性、大膽、要爆點。
Skill 會不會在對的時機被挑中，九成取決於 description 寫得夠不夠精準——把「做什麼」和「何時用」講清楚，比堆功能更重要。
就 frontend-design 本身而言，這是一個純指引、無腳本、來源官方的低風險 skill，可以安心使用。安裝任何 skill 前固定檢查三件事：① 來源是否官方 ② 有沒有綁可執行腳本 ③ description 與實際行為是否一致。