新增 Frontend Design Claude Code plugin 安裝筆記

安裝 frontend-design@claude-plugins-official（Anthropic 官方 skill），
用於讓 Claude 產出有美學方向的前端程式碼、避開 AI 罐頭介面。於
README、SUMMARY、QUICKSTART 建立索引。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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 的頁面。
+
 ## 三者如何一起用？
 
 一個常見組合：