基礎工具與功能
Connectors / Projects / Research Mode
進階工具介紹
Skills / Cowork / Plugins / Claude Code
建議優先設定
Connectors — 讓 Claude 連接你常用的工具
連上 Notion、Slack、Google Calendar 等，不需要另外打開其他視窗，在對話裡就能查行程、找文件、發訊息。
Customize → Connectors
建議優先設定
Projects — 你在 Claude 裡的專屬工作室
把相關的檔案、文件、背景資料都上傳進去，且只需設定一次，不論之後開多少對話，全部都共享同一個背景脈絡。
左側導覽列 → Projects
Custom Styling — 自訂你的寫作風格
選預設風格或把自己的寫作習慣餵給它，每次回覆都會更像你想要的語氣。
主介面 → 對話框左下角選 + 號 → Use Style
內容參考整理自 @ZHUSTUDIO / AI Edge on X
Claude Skills — 指令和工作流程一次設定
把常用知識、規則、流程整理成可重複使用的能力模組。適合固定語氣、輸出格式、任務步驟與專業背景。
品牌文案風格統一
固定簡報架構
特定產業知識整理
重複性工作流程自動化
Customize → Skills
需 Pro 方案或以上
Cowork Plugins — 角色化自動化
將 Skills、Connectors 與 Sub-agents 整合單一套件，讓 Cowork 能依任務需求展開更完整的操作流程與角色分工。
將多種能力整合成單一插件
涵蓋行銷、法律、財務等領域
開箱即用
已內建多個可直接使用
桌面版 Claude 應用程式 → Customize → Plugins
需 Pro 方案或以上
Claude Cowork — 最接近「AI 自動幫你做事」的功能
在背景執行、自主存取檔案、排程任務，你只需要設定好，剩下交給它。
背景自主執行任務
建立與管理 Plugins
排程工作流程
支援複雜多步驟任務
桌面版 Claude 應用程式 → Cowork
需 Pro 方案或以上
Claude Code — 最強 AI 程式開發工具
從補全到建構，寫程式、建網站、除錯，整個開發流程都能處理。
寫程式、建網站
理解整個專案結構
除錯與錯誤處理
支援多種語言與框架
桌面版 Claude 應用程式 → Claude Code
內容參考整理自 @ZHUSTUDIO / AI Edge on X
CLI 安裝與設定
安裝 Claude Code、CLAUDE.md 設定檔
Vibe Coding 工作流
用自然語言驅動程式碼產出的完整流程
搭配 Figma MCP
設計稿轉前端的關鍵連接與常見問題
安裝 Claude Code
npm install -g @anthropic-ai/claude-code
claude --version
claude
CLAUDE.md — 專案設定檔
在專案根目錄放一個 CLAUDE.md，Claude Code 每次啟動時自動讀取，等於幫專案設定好背景脈絡。
專案：玉山銀行信貸購車活動頁
技術：HTML + CSS + jQuery
設計稿：Figma 連結（透過 Figma MCP 讀取）
規範：
- 使用 BEM 命名
- Mobile First 響應式
- 主色 #86A697
- 繁體中文，台灣用語
常用 Slash Commands
/init 初始化 CLAUDE.md
/clear 清除對話紀錄
/compact 壓縮對話記憶
/cost 查看目前用量
/doctor 診斷連線問題
/plugin 管理插件
所謂 Vibe Coding，就是用自然語言描述你想要的東西，讓 AI 幫你寫程式碼。以下是設計師的典型流程：
cd ~/projects/loan-landing-page
claude
> 請讀取 Figma 連結裡的 page3 frame，
轉換成 HTML + CSS 頁面，
使用 jQuery 做 tab 切換，
圖片先用 placeholder。
> 把標題字體改大一點，按鈕顏色改成 #86A697
> 幫我整理程式碼，加上註解
安裝 Figma MCP 後，Claude Code 可以直接讀取 Figma 設計檔案的結構與樣式，是設計轉前端的關鍵連接。
> 請讀取這個 Figma 連結
https://www.figma.com/file/xxxxx
把 "Hero Section" frame 轉成 HTML
常見踩坑：如果出現「enterprise plan required」錯誤，通常是環境變數中有衝突的 ANTHROPIC_API_KEY。請先執行 unset ANTHROPIC_API_KEY 再重試。
本機開發入口
CLI / IDE / App，直接讀取、修改與執行專案
Skills / MCP / 專案規則
把固定規則、可複用流程與外部工具接成工作流
審查與交付
Code review、Web search、Cloud tasks 與自動化
適合工程與前端轉換
Codex — OpenAI 的 coding agent
Codex 可在本機終端機、IDE extension、Codex app 或雲端任務中協助寫程式、理解 repo、修改檔案、執行測試與做 code review。與一般聊天不同，Codex 的重點是「在專案裡完成可交付變更」。
CLI 快速開始
curl -fsSL https://chatgpt.com/codex/install.sh | sh
codex
CLI：終端機裡完成程式修改與測試
IDE extension：在 VS Code / Cursor / Windsurf 內協作
Codex app：規劃、審查與互動式工作
Cloud tasks：把較長任務交給雲端環境並套用 diff
資料來源：OpenAI Codex CLI / Codex Help Center，最後盤點：2026-06-05
AGENTS.md — 給 Codex 的 repo 級說明書
Codex 啟動時會讀取可用的 AGENTS.md，把專案結構、測試指令、程式風格、審查規則與注意事項納入工作脈絡。根目錄放共通規則，子目錄可放更接近任務的覆寫規則。
repo root → AGENTS.md
## Project Context
- 這是部署到 Cloudflare Pages 的靜態 KM 網站
- 主要內容在 data/skills.js、data/articles.js、data/agents.js
## Update Rules
- 新增內容前先查證官方來源與日期
- id 使用 kebab-case，dateAdded 使用 YYYY-MM-DD
- 不提交 API key、token 或內部機敏資料
## Verify
- 用 python3 -m http.server 8000 本機預覽
- 檢查首頁、AI Host、Skills、KM Post 是否正常顯示
Skills — 把可重複任務變成能力模組
Skill 適合存放跨專案可重複使用的 SOP、檢查清單與範例。和 AGENTS.md 不同，AGENTS.md 是此 repo 的固定規則，Skill 是可被不同專案反覆套用的任務方法。
Figma 轉前端品質檢查
KM 內容更新與官方來源查證
PR review checklist
Cloudflare Pages 靜態站部署檢查
MCP — 讓 Codex 讀取即時工具與外部脈絡
MCP 適合接需要授權或結構化存取的資料來源，不只是貼網址給模型猜內容。Codex 可透過 MCP 取得設計稿、文件、repo、issue 或其他內部工具資訊，再回到本機專案執行修改與驗證。
Figma MCP：讀設計稿、token、component 結構
GitHub MCP：查 issue、PR、repo 狀態
Google Drive / Docs MCP：讀需求文件與研究資料
Browser / Web search：查最新官方文件與產品變動
推薦串接流程
用 AGENTS.md 固定本 repo 規則，用 Skills 提供可重複任務方法，用 MCP 接即時外部資料，最後由 Codex 執行改檔、驗證與交付。
AGENTS.md 定義 repo 規則
+ Skill 定義可重複任務方法
+ MCP 提供即時外部資料
+ Codex 執行改檔、驗證、整理交付
審查與自動化使用情境
Codex 適合在 PR 前協助找 bug、整理差異、補測試、跑本機檢查，也能搭配 MCP、Web search、subagents 與 non-interactive mode 處理更長或重複性的任務。
請 Codex 先做 code review，再修高風險問題
用 Web search 查證快速變動的官方文件
用 MCP 接 Figma、文件或內部工具脈絡
用 approval mode 控制是否能自動改檔或執行命令
Gemini CLI
終端機 AI agent，支援工具、MCP、Web search
Gemini Code Assist
IDE、GitHub review 與 Google Cloud 工作流
Gemini API
產品整合、內容生成、多模態與自動化
適合本機工具型任務
Gemini CLI — Google 的開源終端機 agent
Gemini CLI 可在終端機中使用 Gemini，透過 ReAct loop、內建工具與本機或遠端 MCP server 處理修 bug、建立功能、補測試，也能做內容生成、研究與任務管理。
官方 Gemini CLI 文件顯示：免費層與 Google One 使用者將於 2026-06-18 改由 Antigravity CLI 取代，企業或付費情境需依最新方案確認。
npm install -g @google/gemini-cli
npx @google/gemini-cli
gemini
資料來源：Google Gemini CLI / Gemini Code Assist docs，最後盤點：2026-06-05
Gemini Code Assist — IDE 與團隊開發輔助
Gemini Code Assist 支援 VS Code、JetBrains IDEs、Android Studio 等開發環境，可提供程式補全、程式生成、debug、文件解釋與單元測試生成。Standard / Enterprise 版本延伸到 Google Cloud 與企業知識情境。
IDE 內聊天與程式補全
Agent mode 可執行多步驟任務
GitHub PR summary 與 code review
Enterprise 可結合私有 codebase 客製化
Gemini API — 把模型能力接進產品或自動化流程
Gemini API 適合需要程式化存取生成式模型的情境，例如文字生成、文件摘要、多模態輸入、內容分類、客服流程、資料處理與內部工具自動化。
使用 SDK 呼叫 generateContent
適合產品功能與後端自動化
可搭配 Google Cloud 權限與金鑰管理
模型與費率更新快，實作前查官方文件
ai.google.dev → Gemini API docs
Antigravity
Antigravity 圖形化 Figma 轉前端工具指南 — 即將上線