Files

Timmy c33806679d 新增 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>

2026-04-19 12:19:55 +08:00

2.6 KiB

Raw Blame History

QUICKSTART

三個工具的最短上手路徑。詳細說明請看各自的 *-notes.md。

MarkItDown — 檔案轉 Markdown

pip install 'markitdown[all]'
markitdown document.pdf > output.md

Python：

from markitdown import MarkItDown
print(MarkItDown().convert("document.pdf").text_content)

👉 詳情：markitdown-notes.md

MemPalace — 本地記憶庫

pip install mempalace
mempalace init ~/projects/my_app       # 初始化
mempalace mine ~/projects/my_app       # 匯入專案內容
mempalace search "為什麼改用 GraphQL"  # 搜尋

註冊到 Claude Code：

claude mcp add mempalace -- python -m mempalace.mcp_server

👉 詳情：mempalace-notes.md

Playwright — 瀏覽器自動化

pip install playwright
playwright install chromium

最小範例（同步 API）：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("https://example.com")
    page.screenshot(path="out.png")
    browser.close()

錄製操作自動產生程式碼：

playwright codegen https://example.com

👉 詳情：playwright-notes.md

Playwright Plugin — Claude Code 操作瀏覽器

安裝（官方 marketplace，一行搞定）：

claude plugin install playwright@claude-plugins-official

或在 Claude Code 對話內：

/plugin install playwright@claude-plugins-official

重啟 Claude Code 後，直接請 Claude 做事：

打開 https://example.com，截圖存 out.png，告訴我主標題。

確認安裝狀態：

claude plugin list

👉 詳情：playwright-plugin-notes.md

Context7 Plugin — 即時文件查詢

安裝：

claude plugin install context7@claude-plugins-official

使用（在 prompt 尾端加上關鍵字）：

幫我寫一段 Next.js middleware 檢查 cookie 中的 JWT。use context7

指定函式庫：

use library /supabase/supabase for API and docs

👉 詳情：context7-plugin-notes.md

Frontend Design Plugin — 有設計感的前端

安裝：

claude plugin install frontend-design@claude-plugins-official

安裝後直接對 Claude 丟前端需求即可，skill 會自動啟用：

「幫我做一個音樂串流 App 的 dashboard」

「AI 資安新創的 landing page，要有記憶點」

👉 詳情：frontend-design-plugin-notes.md

2.6 KiB Raw Blame History Unescape Escape