La Forge MCP

🚀 LA FORGE MCP

LA FORGE MCP 是一個模型上下文協議（MCP）服務器，它為 AI 編碼助手提供了其缺乏的視覺感知能力，解決了 AI 編碼助手在處理 CSS/HTML 時無法精準感知渲染結果的問題。

🚀 快速開始

1. 啟動 Chrome 並導航到你的應用

start_chrome("http://localhost:3000")

2. 捕獲參考（當頁面顯示正常時）

capture_reference("homepage", selectors=[".header", ".nav", ".hero", ".footer"])

3. 進行 CSS 修改

正常編輯你的代碼...

4. 與參考進行驗證

verify_against_reference("homepage")

返回詳細報告：

{
  "passed": false,
  "summary": {
    "match_percentage": 94.2,
    "problem_region_count": 2
  },
  "problem_areas": [{
    "region": {"area": "top-center"},
    "style_differences": [
      {"property": "height", "expected": "64px", "actual": "48px"}
    ],
    "css_rules": [
      {"selector": ".header", "source": "component.css"},
      {"selector": "header", "source": "reset.css"}
    ]
  }],
  "recommendation": "Check problem_areas for CSS rule conflicts."
}

✨ 主要特性

• 像素級差異對比：能夠捕捉任何視覺上的差異。
• 計算樣式提取：查看實際應用的 CSS 樣式。
• CSS 規則鏈分析：找出哪些規則覆蓋了你的樣式。
• 問題區域檢測：自動識別不同的區域。

📦 安裝指南

一鍵安裝（macOS/Linux）

curl -fsSL https://raw.githubusercontent.com/MonomythDevelopment/la-forge-mcp/main/install-remote.sh | bash

一鍵安裝（Windows PowerShell）

irm https://raw.githubusercontent.com/MonomythDevelopment/la-forge-mcp/main/install-remote.ps1 | iex

手動安裝

# 克隆倉庫
git clone https://github.com/MonomythDevelopment/la-forge-mcp.git ~/.la-forge-mcp
cd ~/.la-forge-mcp

# 運行安裝程序
chmod +x install.sh
./install.sh

安裝要求

• Node.js 18+
• Claude Code CLI（claude 命令）
• Google Chrome 或 Chromium

💻 使用示例

基礎用法

# 啟動 Chrome 並導航到應用
start_chrome("http://localhost:3000")

# 捕獲參考
capture_reference("homepage", selectors=[".header", ".nav", ".hero", ".footer"])

# 驗證與參考的差異
verify_against_reference("homepage")

高級用法

# 調試會話示例
User: "The header height seems wrong after my changes"

Claude: Let me check what's happening.

> verify_against_reference("homepage")
{
  "passed": false,
  "problem_areas": [{
    "style_differences": [
      {"property": "height", "expected": "64px", "actual": "48px"}
    ],
    "css_rules": [
      {"selector": ".main-header", "source": "header.css", "styles": "height: 64px"},
      {"selector": "header", "source": "reset.css", "styles": "height: auto"}
    ]
  }]
}

Claude: Found it! Your reset.css has `header { height: auto }` which is 
overriding `.main-header { height: 64px }`. The reset rule appears later 
in the cascade.

Fix options:
1. Increase specificity: `header.main-header { height: 64px }`
2. Use !important: `.main-header { height: 64px !important }`
3. Reorder stylesheet imports

📚 詳細文檔

可用工具

Chrome 管理

參考管理

視覺驗證

元素分析

黑屏檢測

quick_visual_check() 工具可以以編程方式檢測渲染問題：

{
  "healthy": false,
  "issues": [
    "Screen appears black/very dark",
    "Page has no visible text content"
  ],
  "metrics": {
    "mean_brightness": 2.3,
    "std_deviation": 1.1
  }
}

與 CLAUDE.md 集成

為了獲得最佳效果，請將 CLAUDE_SNIPPET.md 中的代碼片段添加到你的用戶級 CLAUDE.md 中：

# 查找你的 Claude 配置位置
claude config get

# 追加代碼片段
cat CLAUDE_SNIPPET.md >> ~/.claude/CLAUDE.md

配置

環境變量

設置 Chrome 路徑

如果 Chrome 未被自動檢測到：

# macOS
export CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

# Linux  
export CHROME_PATH="/usr/bin/google-chrome"

# Windows
set CHROME_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe"

🔧 技術細節

像素差異對比

使用 sharp 庫逐像素比較圖像。輸出一個差異圖像，其中不匹配的區域以品紅色突出顯示。通過連通組件分析識別不同的問題區域。

計算樣式提取

使用 Chrome DevTools 協議查詢 window.getComputedStyle() 以獲取任何元素的樣式。顯示 CSS 層疊後實際應用的值，而不僅僅是源文件中的值。

CSS 規則鏈

通過 CDP 遍歷所有樣式表，找到與元素匹配的每個規則。顯示源文件、選擇器和樣式。揭示每個屬性的“獲勝”規則。

📄 許可證

本項目採用 MIT 許可證，詳情請見 LICENSE。