frontend-design 的設計框架與美學準則
frontend-design 出自 Anthropic 官方開源倉庫 anthropics/skills，該倉庫累積了 144k 顆星、17k 個 fork，是 Agent Skills 的官方示範庫。Skill 是一個資料夾，裝著指令、腳本與資源，Claude 在遇到對應任務時動態載入，在特定領域依準則執行。frontend-design 屬於「創意與設計」分類。
技能目標：生成有辨識度、可上線、避開「AI slop（AI 通用劣質感）」的前端介面。觸發情境包含建 web component、頁面、artifact、海報、應用程式，或美化任何 web UI。
技能本體僅有兩個檔案：一份 SKILL.md 和一份 LICENSE.txt，無腳本、無相依套件。行為來自 SKILL.md 中的 prompt 工程：要求模型在動手前先確認脈絡與調性，再依五條具體美學準則執行，並明令不得收斂到通用選擇。
Purpose 目的
Tone 調性
Constraints 約束
Differentiation 記憶點
精準實作
「Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.」極繁與極簡都行得通，關鍵是刻意選定，而非視覺濃度。
將資料夾複製至技能目錄，技能即自動載入。
因為技能本體就是一個資料夾,安裝方式很單純:從官方倉庫取出 frontend-design 這個資料夾,放進你的 Claude 技能目錄即可。在 Claude Code 中,個人技能放在 ~/.claude/skills/<name>/。
# 1. 淺層 clone 官方 skills 倉庫到暫存目錄
git clone --depth 1 https://github.com/anthropics/skills.git /tmp/anthropic-skills
# 2. 把 frontend-design 資料夾複製進個人技能目錄
mkdir -p ~/.claude/skills
cp -r /tmp/anthropic-skills/skills/frontend-design ~/.claude/skills/frontend-design怎麼確認它真的會被觸發
技能不需要手動呼叫。它的 description 欄位已列出觸發情境，只要需求落在「建 web component、頁面、artifact、海報、應用程式，或美化任何 web UI」，Claude 就會自動載入。不必記憶斜線指令，直接用自然語言描述介面需求即可。
SKILL.md 的四個設計提問與五大美學支柱
SKILL.md 把設計拆成兩段：動手前的四個設計思考提問，以及落地時的五大美學支柱。前者確立方向，後者規範細節。以下九張卡片是這份技能的完整骨架，對應 Claude 在執行設計任務時須遵守的準則。
Think · 01
Purpose / 目的
這介面為誰而做
先問:它解決什麼問題、誰會用。脈絡不清楚,後面的美學選擇都是空轉。
Think · 02
Tone / 調性
挑一個極端
極簡、極繁、復古未來、自然有機、奢華、玩具感、雜誌編輯、粗獷、Art Deco、柔和粉彩、工業實用……刻意選一個並貫徹到底。
Think · 03
Constraints / 約束
技術邊界
框架、效能、可及性等硬性要求要先講明,實作才不會脫離現實。
Think · 04
Differentiation
那個記憶點
什麼東西讓人看過就忘不掉?找出那唯一一件會被記住的事。
Craft · 05
Typography / 字體
有個性的字
避開 Arial、Inter 這類通用字體;用有特色的展示字搭配精煉的內文字。
Craft · 06
Color & Theme
主色加銳利點綴
用 CSS 變數維持一致性。主導色搭配尖銳點綴色，避免平均分配的調色盤。
Craft · 07
Motion / 動態
一次到位的進場
HTML 優先純 CSS，React 用 Motion 函式庫。將動態效果集中在一次完整的 page load 交錯進場（animation-delay），而非分散於多個微互動。
Craft · 08
Spatial / 空間
打破網格
非預期排版、非對稱、重疊、斜向流動、破格元素;大量留白「或」刻意的高密度。
Craft · 09
Backgrounds
用氛圍取代純色
漸層網格、雜訊紋理、幾何圖樣、層疊透明、戲劇陰影、裝飾邊框、自訂游標、顆粒疊層，用以營造深度與氛圍。
該避開什麼 vs 該追求什麼
技能裡用大寫 NEVER 明文禁止一串「AI 味」的預設選擇。這張表把禁區與對應的正解並排,是它最常被引用的部分。
| NEVER · 該避開 | DO · 該追求 |
|---|---|
| Inter、Roboto、Arial、系統字體 | 有特色的展示字 + 精煉內文字配對 |
| 老套配色,尤其白底紫漸層 | 主導色 + 尖銳點綴,用 CSS 變數鎖定 |
| 可預期的排版與元件樣式 | 非對稱、重疊、破格、斜向流動 |
| 缺乏脈絡個性的 cookie-cutter 設計 | 為這個情境量身設計、獨一無二 |
| 每次都收斂到同一選擇(如 Space Grotesk) | 在明暗主題、字體、美學間刻意變化 |
發揮技能效果的八條操作建議
以下八條均源自技能本身的明文準則。將它們作為下 prompt 時的檢查清單，可系統性地運用 frontend-design 的設計框架。
在 prompt 中指定調性極端
SKILL.md 的核心要求是「挑一個極端並貫徹」。指定「粗獷工業風」或「奢華極簡風」，比籠統說「漂亮一點」更能讓所有細節決策收斂一致。
來源 · SKILL.md「Tone」
字體配對：展示字 + 內文字
在 prompt 中明確指定「配一個有特色的展示字搭配一個精煉的內文字」，並排除 Inter / Arial。Typography 是與通用 AI 輸出拉開差距最直接的手段。
來源 · SKILL.md「Typography」
將動態效果集中在 page load 進場
SKILL.md 建議用 animation-delay 做一次完整的交錯進場，而非分散在多個微互動。一個 staggered reveal 的載入動畫通常比十個 hover 效果更有整體感。
來源 · SKILL.md「Motion」
用 CSS 變數定義色彩系統
要求將調色盤定義為 CSS 變數，採「主導色 + 尖銳點綴色」結構而非平均分配。色彩有主從關係，後續調整只需改變數。
來源 · SKILL.md「Color & Theme」
背景使用紋理或漸層，避免純色
在 prompt 中指定加入漸層網格、雜訊紋理、顆粒疊層或戲劇陰影。背景處理方式對視覺質感影響顯著。
來源 · SKILL.md「Backgrounds & Visual Details」
明確排除「白底紫漸層」等通用樣式
SKILL.md 點名白底紫漸層、置中卡片、全圓角為典型 AI slop 樣式。初稿出現這類選擇時，回覆「換掉，需要有觀點的方向」可觸發重新設計。
來源 · SKILL.md「NEVER」
連續產出時要求切換美學
SKILL.md 明令不得每次都收斂到同一選擇（如 Space Grotesk）。連續產出多個頁面時，主動要求在明暗主題、字體、風格間切換，確保輸出多樣化。
來源 · SKILL.md「Interpret creatively」
在 prompt 中說明預期的複雜度
極繁設計需要大量動畫與 CSS；極簡設計要求精確的間距與字體控制。提前說明方向，技能才能配對適當的實作複雜度。
來源 · SKILL.md「Match implementation complexity」
從模糊需求到有主張成品的完整流程
以下為示意對話（用於說明流程，非實測逐字稿）：使用者僅提供一句模糊需求，frontend-design 先確認脈絡與調性，選定一個極端方向，再將五大支柱逐一落地。
$ You ›
幫我做一個咖啡烘豆工作室的 landing page,要好看一點。
claude: Claude(frontend-design)›
在動手前，我先把方向定下來。「好看」太模糊，
我會挑一個極端調性並貫徹，而非給你安全但無觀點的版型。
hl: Purpose · 賣的是手沖等級的單品豆,客群是講究的咖啡愛好者
hl: Tone · 鎖定「工業實用 × 雜誌編輯」，裸露金屬感 + 大標題排版
hl: Constraints · 純 HTML/CSS、零依賴、行動優先
hl: 記憶點 · 一次烘焙曲線的 staggered 進場動畫
[拒絕的預設選擇 — avoid AI slop]
✗ 白底紫漸層 / 置中卡片 / Inter 字體
✗ 平均分配的柔和調色盤
[落地五大支柱]
· 字體:Fraunces 展示標 + Manrope 內文
· 色彩:深炭底 + 燒橙點綴(CSS 變數)
· 動態:首屏烘焙曲線交錯進場(animation-delay)
· 空間:非對稱大標,product 卡破格疊到 hero
· 背景:細顆粒疊層 + 雜訊紋理,不用純色
ok: DONE — 一份可上線、有觀點、行動自適應的 landing page。
ok: 下一步可說「換成奢華極簡風再來一版」做 A/B 比較。
「好看」太模糊，技能會先確立一個極端調性，而非直接給出安全版型。
流程說明
使用者只說「好看一點」，技能先回應脈絡、調性、約束、記憶點，這是因為 SKILL.md 在系統 prompt 中明確要求「動手前先 commit 一個 BOLD 方向」。沒有這段指令，Claude 的預設選擇會收斂到通用樣式（如白底紫漸層）。
技能結尾附有一句說明：*「Don't hold back, show what can truly be created.」*這反映了 frontend-design 與通用程式生成的差異：前者以最終視覺品質為目標，後者以功能可運行為目標。
frontend-design 的適用範圍與邊界
自訂 SKILL.md 以符合品牌需求
整個技能僅為一份純 Markdown 檔案，無腳本、無相依套件。可直接編輯 SKILL.md，將其調整為符合品牌規範與設計偏好的版本，不需撰寫任何程式碼。
進階操作路徑
**1. 將品牌規範寫入 SKILL.md。**打開 ~/.claude/skills/frontend-design/SKILL.md，在「NEVER」清單加入禁用的字體或配色，在「Color & Theme」段落寫入品牌色票。後續輸出將依此規範執行。
**2. 固定預設調性。**如果專案長期需要特定風格（如瑞士國際主義），將其寫入「Tone」段落作為預設，減少每次 prompt 重複說明的成本。
3. 搭配同倉庫的其他技能。anthropics/skills 包含開發、企業溝通、文件處理等分類。設計交由 frontend-design 執行，文件輸出交由 docx/pptx 技能處理，可組成完整工作流。
**4. 參考規格自行撰寫技能。**倉庫的 spec/ 為 Agent Skills 規格，template/ 為技能模板。了解 frontend-design 如何以 Markdown prompt 改變模型行為後，可按相同結構封裝自己的領域知識。
參考連結
① frontend-design / SKILL.md，本文所有準則的原始來源，建議逐行閱讀。 ② github.com/anthropics/skills，官方技能總庫，可查閱其他分類的可用技能。 ③ spec/ · Agent Skills 規格，自行撰寫技能時的參考規格文件。
Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.