diff --git a/QUICKSTART.md b/QUICKSTART.md index f197ba7..bf88c16 100644 --- a/QUICKSTART.md +++ b/QUICKSTART.md @@ -118,3 +118,21 @@ use library /supabase/supabase for API and docs ``` 👉 詳情：[context7-plugin-notes.md](./context7-plugin-notes.md) + +--- + +## Frontend Design Plugin — 有設計感的前端 + +安裝： + +```bash +claude plugin install frontend-design@claude-plugins-official +``` + +安裝後直接對 Claude 丟前端需求即可，skill 會自動啟用： + +> 「幫我做一個音樂串流 App 的 dashboard」 +> +> 「AI 資安新創的 landing page，要有記憶點」 + +👉 詳情：[frontend-design-plugin-notes.md](./frontend-design-plugin-notes.md) diff --git a/README.md b/README.md index b357a88..872bed7 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ | **Playwright (Python)** | 瀏覽器自動化、E2E 測試、截圖與 PDF 輸出 | [playwright-notes.md](./playwright-notes.md) | | **Playwright Plugin (Claude Code)** | 讓 Claude 直接操作瀏覽器的官方 plugin（MCP server） | [playwright-plugin-notes.md](./playwright-plugin-notes.md) | | **Context7 Plugin (Claude Code)** | Upstash 出品，即時拉取 library 官方文件餵給 Claude | [context7-plugin-notes.md](./context7-plugin-notes.md) | +| **Frontend Design Plugin (Claude Code)** | Anthropic 官方 skill，讓 Claude 產出有設計感的前端而非 AI 罐頭介面 | [frontend-design-plugin-notes.md](./frontend-design-plugin-notes.md) | ## 目錄結構 @@ -25,6 +26,7 @@ tool-notes/ ├── playwright-notes.md ├── playwright-plugin-notes.md ├── context7-plugin-notes.md +├── frontend-design-plugin-notes.md └── mempalace.yaml # 本目錄的 MemPalace 設定 ``` diff --git a/SUMMARY.md b/SUMMARY.md index a33b1b3..a52c4e4 100644 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -11,6 +11,7 @@ | Playwright (Python) | 瀏覽器自動化 | 多瀏覽器控制、E2E 測試、截圖/PDF | Python / CLI | Apache-2.0 | | Playwright Plugin | Claude Code 外掛 | 讓 Claude 直接操作瀏覽器（透過 MCP）| Claude Code / MCP | Apache-2.0 | | Context7 Plugin | Claude Code 外掛 | 即時拉取 library 文件到 Claude context | Claude Code / MCP | MIT | +| Frontend Design Plugin | Claude Code 外掛 | 讓 Claude 產出有美學方向的前端程式碼 | Claude Code / Skill | Anthropic | ## MarkItDown @@ -67,6 +68,17 @@ - **不適用**：重構、業務邏輯、通用程式概念、code review。 - **適用時機**：寫 library-specific 程式、版本遷移、API 語法確認、冷門套件查詢。 +## Frontend Design Plugin (Claude Code) + +- **一句話**：Anthropic 官方 skill，強迫 Claude 在寫前端時先選定美學方向，再產出 production-grade 程式碼。 +- **亮點**： + - 純 skill，無 MCP server，離線可用。 + - 明確守則：避開 Inter / Roboto、紫色漸層白底等 AI 罐頭美學。 + - 強調 typography、color theme、motion、spatial composition、視覺紋理五個面向。 + - 每次產出都嘗試不同風格，避免收斂到固定樣板。 +- **不適用**：嚴格對齊既有 design system 或 Figma 1:1 時（會干擾發揮）。 +- **適用時機**：landing page、dashboard、prototype、需要 visual identity 的頁面。 + ## 三者如何一起用？ 一個常見組合： diff --git a/frontend-design-plugin-notes.md b/frontend-design-plugin-notes.md new file mode 100644 index 0000000..14d8a59 --- /dev/null +++ b/frontend-design-plugin-notes.md @@ -0,0 +1,120 @@ +# 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 實作。