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>
139 lines
2.6 KiB
Markdown
139 lines
2.6 KiB
Markdown
# QUICKSTART
|
||
|
||
三個工具的最短上手路徑。詳細說明請看各自的 `*-notes.md`。
|
||
|
||
---
|
||
|
||
## MarkItDown — 檔案轉 Markdown
|
||
|
||
```bash
|
||
pip install 'markitdown[all]'
|
||
markitdown document.pdf > output.md
|
||
```
|
||
|
||
Python：
|
||
|
||
```python
|
||
from markitdown import MarkItDown
|
||
print(MarkItDown().convert("document.pdf").text_content)
|
||
```
|
||
|
||
👉 詳情：[markitdown-notes.md](./markitdown-notes.md)
|
||
|
||
---
|
||
|
||
## MemPalace — 本地記憶庫
|
||
|
||
```bash
|
||
pip install mempalace
|
||
mempalace init ~/projects/my_app # 初始化
|
||
mempalace mine ~/projects/my_app # 匯入專案內容
|
||
mempalace search "為什麼改用 GraphQL" # 搜尋
|
||
```
|
||
|
||
註冊到 Claude Code：
|
||
|
||
```bash
|
||
claude mcp add mempalace -- python -m mempalace.mcp_server
|
||
```
|
||
|
||
👉 詳情：[mempalace-notes.md](./mempalace-notes.md)
|
||
|
||
---
|
||
|
||
## Playwright — 瀏覽器自動化
|
||
|
||
```bash
|
||
pip install playwright
|
||
playwright install chromium
|
||
```
|
||
|
||
最小範例（同步 API）：
|
||
|
||
```python
|
||
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()
|
||
```
|
||
|
||
錄製操作自動產生程式碼：
|
||
|
||
```bash
|
||
playwright codegen https://example.com
|
||
```
|
||
|
||
👉 詳情：[playwright-notes.md](./playwright-notes.md)
|
||
|
||
---
|
||
|
||
## Playwright Plugin — Claude Code 操作瀏覽器
|
||
|
||
安裝（官方 marketplace，一行搞定）：
|
||
|
||
```bash
|
||
claude plugin install playwright@claude-plugins-official
|
||
```
|
||
|
||
或在 Claude Code 對話內：
|
||
|
||
```text
|
||
/plugin install playwright@claude-plugins-official
|
||
```
|
||
|
||
重啟 Claude Code 後，直接請 Claude 做事：
|
||
|
||
> 打開 https://example.com，截圖存 `out.png`，告訴我主標題。
|
||
|
||
確認安裝狀態：
|
||
|
||
```bash
|
||
claude plugin list
|
||
```
|
||
|
||
👉 詳情：[playwright-plugin-notes.md](./playwright-plugin-notes.md)
|
||
|
||
---
|
||
|
||
## Context7 Plugin — 即時文件查詢
|
||
|
||
安裝：
|
||
|
||
```bash
|
||
claude plugin install context7@claude-plugins-official
|
||
```
|
||
|
||
使用（在 prompt 尾端加上關鍵字）：
|
||
|
||
> 幫我寫一段 Next.js middleware 檢查 cookie 中的 JWT。**use context7**
|
||
|
||
指定函式庫：
|
||
|
||
```text
|
||
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)
|