實戰手冊 · Field Manual 2026 初夏號

github.com/anthropics/skills · 144k ★

官方技能 · Anthropic Agent Skills / 前端設計

Anthropic 官方
前端設計技能
frontend-design

frontend-design 是 Anthropic 官方 anthropics/skills 倉庫的前端設計技能。一份純 Markdown 的 SKILL.md，引導 Claude 在動手前先確立設計方向，依五大美學支柱生成有觀點、可上線的介面。本手冊涵蓋設計思考框架、安裝方式、實戰用法與注意事項。

144k

倉庫 GitHub Stars

美學支柱

11+

調性方向

Apache

2.0 開源授權

技能說明

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 工程：要求模型在動手前先確認脈絡與調性，再依五條具體美學準則執行，並明令不得收斂到通用選擇。

Design Thinking · 動手前的四個提問

Purpose 目的→ Tone 調性→ Constraints 約束→ Differentiation 記憶點→ 精準實作

「Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.」極繁與極簡都行得通，關鍵是刻意選定，而非視覺濃度。

— frontend-design · SKILL.md「Design Thinking」段落

安裝與啟用

將資料夾複製至技能目錄，
技能即自動載入。

因為技能本體就是一個資料夾,安裝方式很單純:從官方倉庫取出 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 就會自動載入。不必記憶斜線指令，直接用自然語言描述介面需求即可。

授權與來源請看清楚。frontend-design 資料夾內附有 LICENSE.txt,倉庫多數技能採 Apache 2.0;但同倉庫的文件處理技能(docx、pdf、pptx、xlsx)是 source-available、並非開源,使用前請各自確認該資料夾的授權檔。官方也聲明:這些技能供示範與教育用途,實際 Claude 產品內的實作可能不同。

框架說明 · 4 提問 + 5 支柱

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)	在明暗主題、字體、美學間刻意變化

實戰用法 · 源自 SKILL.md

發揮技能效果的
八條操作建議

以下八條均源自技能本身的明文準則。將它們作為下 prompt 時的檢查清單，可系統性地運用 frontend-design 的設計框架。

TIP 01

在 prompt 中指定調性極端

SKILL.md 的核心要求是「挑一個極端並貫徹」。指定「粗獷工業風」或「奢華極簡風」，比籠統說「漂亮一點」更能讓所有細節決策收斂一致。

來源 · SKILL.md「Tone」

TIP 02

字體配對：展示字 + 內文字

在 prompt 中明確指定「配一個有特色的展示字搭配一個精煉的內文字」，並排除 Inter / Arial。Typography 是與通用 AI 輸出拉開差距最直接的手段。

來源 · SKILL.md「Typography」

TIP 03

將動態效果集中在 page load 進場

SKILL.md 建議用 animation-delay 做一次完整的交錯進場，而非分散在多個微互動。一個 staggered reveal 的載入動畫通常比十個 hover 效果更有整體感。

來源 · SKILL.md「Motion」

TIP 04

用 CSS 變數定義色彩系統

要求將調色盤定義為 CSS 變數，採「主導色 + 尖銳點綴色」結構而非平均分配。色彩有主從關係，後續調整只需改變數。

來源 · SKILL.md「Color & Theme」

TIP 05

背景使用紋理或漸層，避免純色

在 prompt 中指定加入漸層網格、雜訊紋理、顆粒疊層或戲劇陰影。背景處理方式對視覺質感影響顯著。

來源 · SKILL.md「Backgrounds & Visual Details」

TIP 06

明確排除「白底紫漸層」等通用樣式

SKILL.md 點名白底紫漸層、置中卡片、全圓角為典型 AI slop 樣式。初稿出現這類選擇時，回覆「換掉，需要有觀點的方向」可觸發重新設計。

來源 · SKILL.md「NEVER」

TIP 07

連續產出時要求切換美學

SKILL.md 明令不得每次都收斂到同一選擇（如 Space Grotesk）。連續產出多個頁面時，主動要求在明暗主題、字體、風格間切換，確保輸出多樣化。

來源 · SKILL.md「Interpret creatively」

TIP 08

在 prompt 中說明預期的複雜度

極繁設計需要大量動畫與 CSS；極簡設計要求精確的間距與字體控制。提前說明方向，技能才能配對適當的實作複雜度。

來源 · SKILL.md「Match implementation complexity」

實戰示例 · 情境演示

從模糊需求到
有主張成品的完整流程

以下為示意對話（用於說明流程，非實測逐字稿）：使用者僅提供一句模糊需求，frontend-design 先確認脈絡與調性，選定一個極端方向，再將五大支柱逐一落地。

~/projects/landing · claude code · frontend-design

You › 幫我做一個咖啡烘豆工作室的 landing page,要好看一點。

[loaded ~/.claude/skills/frontend-design/SKILL.md] [entered Design Thinking · commit to a BOLD direction]

Claude(frontend-design)› 在動手前，我先把方向定下來。「好看」太模糊，我會挑一個極端調性並貫徹，而非給你安全但無觀點的版型。

Purpose · 賣的是手沖等級的單品豆,客群是講究的咖啡愛好者 Tone · 鎖定「工業實用 × 雜誌編輯」，裸露金屬感 + 大標題排版 Constraints · 純 HTML/CSS、零依賴、行動優先記憶點 · 一次烘焙曲線的 staggered 進場動畫

[拒絕的預設選擇 — avoid AI slop] ✗ 白底紫漸層 / 置中卡片 / Inter 字體 ✗ 平均分配的柔和調色盤

[落地五大支柱] · 字體:Fraunces 展示標 + Manrope 內文 · 色彩:深炭底 + 燒橙點綴(CSS 變數) · 動態:首屏烘焙曲線交錯進場(animation-delay) · 空間:非對稱大標,product 卡破格疊到 hero · 背景:細顆粒疊層 + 雜訊紋理,不用純色

[implementing... single-file index.html · 零外部 JS]

DONE — 一份可上線、有觀點、行動自適應的 landing page。下一步可說「換成奢華極簡風再來一版」做 A/B 比較。

「好看」太模糊，技能會先確立一個極端調性，而非直接給出安全版型。

— frontend-design · 動手前的第一步：commit to a BOLD direction

流程說明

使用者只說「好看一點」，技能先回應脈絡、調性、約束、記憶點，這是因為 SKILL.md 在系統 prompt 中明確要求「動手前先 commit 一個 BOLD 方向」。沒有這段指令，Claude 的預設選擇會收斂到通用樣式（如白底紫漸層）。

技能結尾附有一句說明：「Don't hold back, show what can truly be created.」這反映了 frontend-design 與通用程式生成的差異：前者以最終視覺品質為目標，後者以功能可運行為目標。

使用限制

frontend-design 的
適用範圍與邊界

約束沒講清楚,它會自由發揮。技能的本性就是「挑極端、做大膽」。如果你需要嚴格遵守既有 design system 或品牌規範,務必在 prompt 裡把框架、元件庫、色票講死,否則它可能交出漂亮但不符規範的版本。
極繁方向 = 大量程式與維護成本。技能明說「極繁設計需要繁複的程式與大量動畫」。要做出那種視覺,意味著更長的 CSS、更多動畫,連帶效能與後續維護的負擔都會上升。
字體要真的載入。它會挑有特色的字體,但若你的環境沒有引入對應的 Google Fonts 或 web font,瀏覽器就會 fallback、整個排版破功。記得確認字體連結有被加進去。
大膽不等於可及。非對稱、戲劇陰影、低調色彩很好看,但別忘了對比度、鍵盤操作、螢幕閱讀器。技能把可及性列在「Constraints」,要你自己主動提出,它才會兼顧。
它是設計技能,不是工程審查。frontend-design 專注在美學與前端實作的品質,不負責抓邏輯 bug、資安漏洞或架構問題。那些要搭配別的技能或流程,別把它當成上線前的唯一關卡。
9 分與 10 分的差距是品味。就算它做得再大膽,最終「這個方向對不對」仍是你的判斷。它能執行願景,但替你定義願景、拍板取捨的人,還是你自己。
授權因資料夾而異。frontend-design 本身附 LICENSE.txt(多數技能為 Apache 2.0),但同倉庫的文件處理技能是 source-available、非開源。商業使用前,各自確認該資料夾的授權條款。

進階路徑

自訂 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.

— frontend-design · SKILL.md 結語