什麼是 GreenLight Vibe？
GreenLight 是 Greenshift 官方提供的 AI Agent 技能包（Skill），讓 Claude Code 能夠直接生成 Greenshift Block 格式的 WordPress 頁面內容，而不只是輸出純 HTML。
簡單說：有了 GreenLight，Claude 就懂得怎麼「說 Greenshift 的語言」，可以直接產出帶有動畫、排版、互動效果的完整區塊，搭配 WordPress MCP 一鍵發佈。
整體架構
完整流程如下：
Claude Code（讀取 GreenLight Skill）
↓ 生成 Greenshift Block 格式內容
Claude Desktop（WordPress MCP）
↓
WordPress 發佈完整排版頁面安裝步驟
Step 1：安裝 WordPress MCP
在 Git Bash 執行：
git clone https://github.com/wolffcatskyy/wordpress-mcp.git cd wordpress-mcp npm install npm run build
接著在 Claude Desktop 的 claude_desktop_config.json 加入：
{
"mcpServers": {
"wordpress": {
"command": "node",
"args": ["C:\\Users\\bence\\wordpress-mcp\\dist\\index.js"],
"env": {
"WORDPRESS_URL": "https://bencent.cc",
"WORDPRESS_USERNAME": "your_username",
"WORDPRESS_PASSWORD": "Application Password"
}
}
}
}重啟 Claude Desktop，確認 Developer 頁面顯示 wordpress: running。
Step 2：安裝 GreenLight Vibe Skill
在終端機執行：
git clone https://github.com/wpsoul/greenlight-vibe
在 Claude Code 對話中告知 skill 資料夾路徑，Claude 會自動讀取技能說明，學會 Greenshift Block 的語法規則。
Step 3：生成並發佈
在 Claude Code 輸入需求，例如：
「請用 Greenshift Block 格式幫我做一個 Hero Section，左側標題與 CTA 按鈕，右側 3D Isometric SVG 動畫，極簡風格。」
Claude 生成完整 Block 代碼後，透過 WordPress MCP 直接發佈到網站。
示範：生成的 Hero Section
以下是本次 Claude Code 透過 GreenLight Skill 實際生成的 Greenshift Block，包含：
- 3D Isometric SVG 動畫圖形（含 Mouse Parallax 互動）
- 動態格線背景（60s loop animation）
- 左右兩欄 Hero Layout
- 響應式設計（900px breakpoint）
- CSS 變數色彩系統（oklch）
- 淡入動畫（fade-in-right / fade-in-scale）
注意事項
- WordPress MCP 只在 Claude Desktop（桌機版）有效，網頁版 claude.ai 不支援
- Application Password 請在 WordPress 後台 → 使用者 → 個人資料 → 應用程式密碼 產生
- GreenLight Skill 主要針對 Claude Code 設計，Claude Desktop 可搭配使用但需手動傳入代碼
- Node.js 建議使用 v18–v22，v24 在某些 MCP 套件上有相容性問題