Timmy
c33806679d
安裝 frontend-design@claude-plugins-official（Anthropic 官方 skill）， 用於讓 Claude 產出有美學方向的前端程式碼、避開 AI 罐頭介面。於 README、SUMMARY、QUICKSTART 建立索引。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
121 lines
4.8 KiB
Markdown
121 lines
4.8 KiB
Markdown
# Frontend Design Plugin (Claude Code) 安裝與使用筆記
|
||
|
||
## 基本資訊
|
||
|
||
- **專案頁**: https://claude.com/plugins/frontend-design
|
||
- **官方**: Anthropic（Verified）
|
||
- **作者**: Prithvi Rajasekaran、Alexander Bricken（Anthropic）
|
||
- **Marketplace**: `claude-plugins-official`
|
||
- **類型**: Claude Code 外掛（純 skill，不含 MCP server）
|
||
- **安裝規模**: 450,000+（官方 marketplace 顯示）
|
||
- **安裝日期**: 2026-04-19
|
||
- **延伸閱讀**: [Frontend Aesthetics Cookbook](https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb)
|
||
|
||
## 是什麼
|
||
|
||
專治「AI 生出來的前端長得都差不多」這件事。Claude 預設產出的 UI 常有共同缺陷：紫色漸層、Inter / Space Grotesk 字體、置中欄位、卡片陰影……這個 plugin 提供一個 skill，強迫 Claude 在寫前端時先**選擇明確的美學方向**（brutalist / maximalist / retro-futuristic / 奢華 / 極簡……），再用與該方向匹配的字體、色彩、動效、排版去實作 production-ready 的程式碼。
|
||
|
||
與 Playwright / Context7 不同，**這是純 skill，沒有 MCP server**，不需要 `npx` 或外部 runtime，安裝後 Claude 在前端任務時會自動套用。
|
||
|
||
## 安裝
|
||
|
||
### CLI（推薦）
|
||
|
||
```bash
|
||
claude plugin install frontend-design@claude-plugins-official
|
||
```
|
||
|
||
### Claude Code 對話內
|
||
|
||
```text
|
||
/plugin install frontend-design@claude-plugins-official
|
||
```
|
||
|
||
### 安裝後驗證
|
||
|
||
```bash
|
||
claude plugin list # 應看到 frontend-design@claude-plugins-official
|
||
ls ~/.claude/plugins/marketplaces/claude-plugins-official/plugins/frontend-design/skills/frontend-design/
|
||
```
|
||
|
||
應看到 `SKILL.md`。重啟 Claude Code 後，skill 會在前端相關 prompt 進入時自動觸發。
|
||
|
||
## 架構
|
||
|
||
```
|
||
frontend-design/
|
||
├── .claude-plugin/plugin.json
|
||
├── LICENSE
|
||
├── README.md
|
||
└── skills/
|
||
└── frontend-design/
|
||
└── SKILL.md # 實際影響 Claude 行為的 skill 本體
|
||
```
|
||
|
||
純檔案、零 runtime，離線可用。
|
||
|
||
## 使用方式
|
||
|
||
安裝後，對 Claude 發前端需求即可，不需要關鍵字：
|
||
|
||
- 「幫我做一個音樂串流 App 的 dashboard」
|
||
- 「AI 資安新創的 landing page」
|
||
- 「設定頁面，要支援 dark mode」
|
||
|
||
Claude 會：
|
||
|
||
1. **Design Thinking**：先釐清 purpose、audience、tone、constraints、differentiation。
|
||
2. 鎖定一個**極端的美學方向**（例：brutalist 粗獷、maximalist 滿版、retro-futuristic 復古未來、editorial 雜誌風……）。
|
||
3. 挑有個性的字體對（避開 Inter / Roboto / Arial / system font）。
|
||
4. 選主色與鮮明輔色（避開紫色漸層在白底這類 AI 罐頭配色）。
|
||
5. 加高衝擊的動效、scroll-triggered 互動、hover 效果。
|
||
6. 安排不對稱 / 網格破壞 / overlap 的排版。
|
||
7. 加材質（gradient mesh、noise、幾何紋理、drop shadow、grain overlay……）。
|
||
|
||
最後輸出可直接執行的 HTML/CSS/JS、React、Vue 等 production-grade 程式碼。
|
||
|
||
## Skill 關鍵守則（摘自 SKILL.md）
|
||
|
||
- **NEVER** 用 Inter / Roboto / Arial / system font。
|
||
- **NEVER** 用「白底紫漸層」這類 AI 罐頭配色。
|
||
- **NEVER** 每次都收斂到同一個選擇（例：不要每次都用 Space Grotesk）。
|
||
- 每次設計**都要不同**：在亮/暗主題、字體、美學間輪替。
|
||
- **Complexity 要配得上 aesthetic**：maximalist 就給滿複雜度與動效；refined minimalism 就克制、精準。
|
||
|
||
## 適用與不適用
|
||
|
||
**適用**：
|
||
- 新 landing page、dashboard、component gallery。
|
||
- 需要 visual identity 的任務，如 portfolio、活動頁、產品首頁。
|
||
- 要展示「可能性」的 prototype。
|
||
|
||
**不太需要它**：
|
||
- 純 UI library 元件（要貼合既有 design system 時，plugin 會想發揮個性）。
|
||
- Bug fix、refactor、logic-only 任務。
|
||
- 必須嚴格對齊既有設計稿（Figma 1:1）的情境——這時你應明確指定字體、色票，壓住 skill 的創作傾向。
|
||
|
||
## 常用檢查與移除
|
||
|
||
```bash
|
||
# 檢查安裝狀態
|
||
claude plugin list
|
||
|
||
# 檢視 skill 本體
|
||
cat ~/.claude/plugins/marketplaces/claude-plugins-official/plugins/frontend-design/skills/frontend-design/SKILL.md
|
||
|
||
# plugin metadata
|
||
cat ~/.claude/plugins/marketplaces/claude-plugins-official/plugins/frontend-design/.claude-plugin/plugin.json
|
||
```
|
||
|
||
移除：
|
||
|
||
```bash
|
||
claude plugin uninstall frontend-design@claude-plugins-official
|
||
```
|
||
|
||
## 備註
|
||
|
||
- Skill 是「建議性」的：Claude 會判斷目前對話是否進入前端任務並自動套用；要強制啟用可顯式指示「套用 frontend-design skill」或提到「make it distinctive / bold」。
|
||
- 若需要穩定、一致的設計語言（而非每次都給不同美學），在 prompt 裡把字體、色票、動效預算明確寫清楚，skill 會尊重這些約束。
|
||
- 與 Superpowers 的 brainstorming skill 搭配效果佳：先釐清需求，再進入 frontend-design 實作。
|