/ 目錄 / 演練場 / cc-frontend-skills
← 全部伺服器 ↗ GitHub
● 社群 oikon48 ⚡ 即開即用

cc-frontend-skills

作者 oikon48 · oikon48/cc-frontend-skills

Claude Code 前端 UI 外掛，讓你的介面不再千篇一律——擺脫那套紫色漸層加圓角的 AI 審美疲勞。

由日本開發者撰寫的 Claude Code 技能，專注於打造具有獨特視覺風格的前端 UI。引導 Claude 遠離預設的「AI 設計語言」（泛用漸層、千篇一律的卡片排版、shadcn 複製品），轉向真正有設計感的選擇——根植於真實設計參考的字型排版、格線系統與色彩體系。

▶ 觀看演示 📦 安裝 💡 使用場景

為什麼要用

核心特性

即時演示

實際使用效果

cc-frontend-skill.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "cc-frontend-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oikon48/cc-frontend-skills",
        "~/.claude/skills/cc-frontend-skills"
      ],
      "_inferred": true
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "cc-frontend-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oikon48/cc-frontend-skills",
        "~/.claude/skills/cc-frontend-skills"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "cc-frontend-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oikon48/cc-frontend-skills",
        "~/.claude/skills/cc-frontend-skills"
      ],
      "_inferred": true
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示，然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "cc-frontend-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oikon48/cc-frontend-skills",
        "~/.claude/skills/cc-frontend-skills"
      ],
      "_inferred": true
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "cc-frontend-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/oikon48/cc-frontend-skills",
        "~/.claude/skills/cc-frontend-skills"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列，而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "cc-frontend-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/oikon48/cc-frontend-skills",
          "~/.claude/skills/cc-frontend-skills"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add cc-frontend-skill -- git clone https://github.com/oikon48/cc-frontend-skills ~/.claude/skills/cc-frontend-skills

一行命令搞定。用 claude mcp list 驗證，claude mcp remove 移除。

使用場景

實戰用法： cc-frontend-skills

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

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

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

前置條件
  • 已安裝技能 — git clone https://github.com/oikon48/cc-frontend-skills ~/.claude/skills/cc-frontend-skills
  • 心中有一個參考風格 — 說出一個就好——編輯風、瑞士風、野獸派、Y2K、暖色單色調，任何風格都行
步驟
  1. 定義美學風格
    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 主視覺樣板
  2. 調整格線與字型
    Tighten the typographic scale to a 1.333 modular scale; use Charter or similar serif.✓ 已複製
    → 具體的 CSS，有指名字型，而非 'sans-serif'
  3. 去除 AI 特徵
    Audit for AI-design tells: emoji headers, excessive shadow-lg, gradient text, identical card layouts. Kill them.✓ 已複製
    → 移除常見問題的差異對比

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

注意事項
  • Claude 在幾次迭代後恢復預設風格 — 每次後續提示都要重新標註風格參考——不要依賴上下文自動保留
搭配使用： filesystem

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

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

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

步驟
  1. 診斷問題
    Use cc-frontend-skills. Look at /app/dashboard. What are the specific AI-design tells here?✓ 已複製
    → 具體清單：「所有元素都是 lg-rounded、每張卡片都有陰影、CTA 用漸層、格線永遠是三欄」
  2. 提出替代方案
    Suggest an aesthetic direction anchored to one data-dense design reference (Bloomberg terminal, Figma's inspector panel).✓ 已複製
    → 有具名參考來源，並附上具體的應用方式
  3. 逐步套用
    Start with typography only — fix hierarchy without touching layout.✓ 已複製
    → 只修改字型大小、字距、字重的差異對比

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

注意事項
  • 過度設計導致無障礙功能失效 — 維持 AA 對比度；視覺風格不代表要用淺灰色搭白色背景
搭配使用： chrome-devtools

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

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

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

步驟
  1. 盤點現況
    Use cc-frontend-skills. Review components/ and identify inconsistencies in border-radius, shadow, spacing.✓ 已複製
    → 各設計 token 的差異對照表
  2. 提出設計 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 審美問題時使用 0
aesthetic_brief named reference style 開始設計有方向感的新頁面時使用 0
typography_tune current scale 修正字型層級時使用 0

成本與限制

運行它的成本

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；無論提示詞使用什麼語言，技能本身都能正常運作

替代方案

cc-frontend-skills 對比其他方案

替代方案何時用它替代權衡
apple-hig-designer-skill專門針對 iOS / macOS HIG 視覺風格時使用僅適用於特定平台
Tailwind UI / shadcn blocks你優先追求開發速度而非視覺識別感所有東西看起來都一樣

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills