cc-frontend-skills

為什麼要用

核心特性

有主見的風格指引，避免預設 AI 審美
參考編輯/印刷/野獸派/極簡主義等設計語言
由日本開發者撰寫的提示詞——但適用於任何語言
聚焦於字型排版、留白與格線精確度
框架無關（React、Vue、Svelte、純 HTML 均適用）

即時演示

實際使用效果

cc-frontend-skill.replay ▶ 就緒

0/0

安裝

作者儲存庫 · Claude Skills 官方文件

使用場景

實戰用法： cc-frontend-skills

打造有視覺識別感的登陸頁，而非 AI 垃圾頁

👤 獨立開發者、對 AI 生成的登陸頁外觀感到不滿的創業者 ⏱ ~60 min intermediate

何時使用： 你請 Claude 做了一個登陸頁，結果又是一個紫色漸層主視覺加圓角卡片的老套設計。

步驟

定義美學風格

Use cc-frontend-skills. Build a landing page for my book in the style of mid-century Penguin paperback covers — restrained type, one accent color, generous whitespace.✓ 已複製

→ 版型草稿中有明確的字型選擇，而非 shadcn 主視覺樣板
調整格線與字型

Tighten the typographic scale to a 1.333 modular scale; use Charter or similar serif.✓ 已複製

→ 具體的 CSS，有指名字型，而非 'sans-serif'
去除 AI 特徵

Audit for AI-design tells: emoji headers, excessive shadow-lg, gradient text, identical card layouts. Kill them.✓ 已複製

→ 移除常見問題的差異對比

結果： 一個看得出有人用心設計的登陸頁。

注意事項

Claude 在幾次迭代後恢復預設風格 — 每次後續提示都要重新標註風格參考——不要依賴上下文自動保留

搭配使用： filesystem

將泛用儀表板重構成真正有設計感的介面

👤 正在交付內部工具、但大家都默默嫌棄外觀的團隊 ⏱ ~90 min intermediate

何時使用： 你的儀表板功能正常，但外觀和其他所有 shadcn 應用一模一樣。

步驟

診斷問題

Use cc-frontend-skills. Look at /app/dashboard. What are the specific AI-design tells here?✓ 已複製

→ 具體清單：「所有元素都是 lg-rounded、每張卡片都有陰影、CTA 用漸層、格線永遠是三欄」
提出替代方案

Suggest an aesthetic direction anchored to one data-dense design reference (Bloomberg terminal, Figma's inspector panel).✓ 已複製

→ 有具名參考來源，並附上具體的應用方式
逐步套用

Start with typography only — fix hierarchy without touching layout.✓ 已複製

→ 只修改字型大小、字距、字重的差異對比

結果： 一個有自己觀點的儀表板。

注意事項

過度設計導致無障礙功能失效 — 維持 AA 對比度；視覺風格不代表要用淺灰色搭白色背景

搭配使用： chrome-devtools

為你的元件庫建立一致的視覺語彙

👤 設計系統維護者 ⏱ ~60 min advanced

何時使用： 你的按鈕、卡片和輸入框各自獨立生成，現在彼此風格衝突。

步驟

盤點現況

Use cc-frontend-skills. Review components/ and identify inconsistencies in border-radius, shadow, spacing.✓ 已複製

→ 各設計 token 的差異對照表
提出設計 token

Propose a consolidated design token set with one radius scale, one shadow scale, one spacing ramp.✓ 已複製

→ Token JSON / Tailwind config

結果： 一套讓整個元件庫看起來渾然一體的 token 集合。

組合

與其他 MCP 搭配，撬動十倍槓桿

cc-frontend-skill + chrome-devtools

在瀏覽器中即時調整樣式，並將變更同步回原始碼

Open the page, tweak type scale in devtools until it feels right, then apply the diff to CSS.✓ 已複製

cc-frontend-skill + filesystem

在 monorepo 中全面套用設計系統更新

Update all button variants in packages/ui/ to the new token set.✓ 已複製

工具

此 MCP 暴露的能力

工具	輸入參數	何時呼叫
style_audit	component or page	診斷泛用 AI 審美問題時使用
aesthetic_brief	named reference style	開始設計有方向感的新頁面時使用
typography_tune	current scale	修正字型層級時使用

成本與限制

運行它的成本

API 配額: None
每次呼叫 Token 數: Moderate
費用: Free
提示: 一次處理一個頁面；整個應用的重構會讓 context 爆掉。

安全

權限、密鑰、影響範圍

憑證儲存： 無需儲存憑證

資料出站： 無——本地技能，不對外傳輸資料

故障排查

常見錯誤與修復

Claude keeps suggesting shadcn/Tailwind defaults

明確說明：「不要使用 shadcn 預設值；請使用 cc-frontend-skills 的 aesthetic brief」

Generated code uses unnamed fonts

在提示詞中明確指定字型堆疊；Claude 常常留下泛用字型設定

Skill docs are in Japanese and I can't read them

請 Claude 翻譯 SKILL.md；無論提示詞使用什麼語言，技能本身都能正常運作

替代方案