AI開發
Claude Design 是什麼？AI 設計工作區、Claude Code 串接與實作教學
Claude Design 是 Anthropic 官方 AI 設計工作區，可建立網站原型、簡報與品牌視覺，並同步 Claude Code。本篇整理啟用方式、設計系統、MCP、輸出格式、費用限制，以及和 Figma、Open Design 的差異。
Mr.大痣
2026 年 8 月 9 日
Claude Code 教學、安裝設定、AI 終端開發工作流、MCP、CLAUDE.md、Hooks 與實戰案例。
Claude Design 是 Anthropic 官方 AI 設計工作區，可建立網站原型、簡報與品牌視覺，並同步 Claude Code。本篇整理啟用方式、設計系統、MCP、輸出格式、費用限制，以及和 Figma、Open Design 的差異。
GitHub 不只是備份程式碼，在 vibe coding 與 AI agent 時代，它是管理 branch、commit、Pull Request、Issue、Actions 與測試結果的安全帶。這篇整理如何用 GitHub 管好 AI 產生的程式碼。
Playwright 不只是測試框架，在 vibe coding 與 AI agent 時代，它是讓 AI 看懂畫面、操作瀏覽器、驗證 CTA、表單、RWD 與 FAQ 的基本工具。這篇整理 Playwright 為什麼必學，以及如何放進 AI coding 工作流。
Loop Engineering 不是寫更長的 prompt，而是設計一套讓 AI agent 能發現任務、執行、驗證、記錄狀態並持續迭代的工作流程。這篇用 AI coding、WordPress SEO 與中小企業工作流角度，整理 Loop Engineering 怎麼理解與導入。
Claude Cowork 不只是聊天 AI，而是把 Claude 放進本機資料夾、Project 與工作流程。這篇用中小企業與個人品牌角度，整理 Claude Cowork 怎麼用、適合哪些任務，以及導入 AI 工作流前要注意什麼。
WordPress Agent Skills 教學：整理 WordPress/agent-skills 是什麼、能解決哪些 AI 開發痛點，以及如何安裝到 Codex、Claude Code、Cursor。
Claude Code 太貴嗎？從使用情境、工程時間、替代工具、Codex、Cursor、Copilot 與省錢工作流，判斷是否值得使用。
用 Claude Code 管 WordPress 專案：整理外掛開發、REST API、Gutenberg、WooCommerce、SEO metadata、FAQ schema 與發布驗證工作流。
Claude Code MCP 教學：看懂 Model Context Protocol、GitHub、文件、資料庫、瀏覽器整合，以及 MCP 與 Skills 的分工。