_ ______
| | | ____|
| | __ _ | |__ ___ _ __ __ _ ___
| | / _` | | __/ _ \| '__/ _` |/ _ \
| |___| (_| | | | | (_) | | | (_| | __/
|______\__,_| |_| \___/|_| \__, |\___|
__/ |
|___/ MCP░▒▓█ A PIXEL PERFECT VISOR FOR AI CODING ASSISTANTS █▓▒░
______________________________________________________________________
一个模型上下文协议（MCP）服务器，为AI编码助手提供他们所缺乏的视觉感知。
问题
当AI编码助手（如Claude Code）处理CSS/HTML时：
- 他们可以看到代码，但无法真正“看到”渲染结果
- 截图是语义解释的，而不是像素精确解释的
- CSS继承和级联可能会导致源代码中不可见的意外结果
- 黑屏可能会被报告为“看起来不错”，因为没有什么需要语义解析的
解决方案
┌─ VISOR ONLINE ──────────────────────────────────────────────────────────┐
│ │
│ ◉ Pixel-level diffing Catches ANY visual difference │
│ ◉ Computed style extraction See what CSS is ACTUALLY applied │
│ ◉ CSS rule chain analysis Find which rules override your styles │
│ ◉ Problem region detection Automatically identify differing areas │
│ │
└─────────────────────────────────────────────────────────────────────────┘______________________________________________________________________
快速安装
One Liner（macOS/Linux）
curl -fsSL https://raw.githubusercontent.com/MonomythDevelopment/la-forge-mcp/main/install-remote.sh | bashOne Liner（Windows PowerShell）
irm https://raw.githubusercontent.com/MonomythDevelopment/la-forge-mcp/main/install-remote.ps1 | iex手动安装
# Clone the repo
git clone https://github.com/MonomythDevelopment/la-forge-mcp.git ~/.la-forge-mcp
cd ~/.la-forge-mcp
# Run installer
chmod +x install.sh
./install.sh______________________________________________________________________
需求
- Node.js 18+
- 克劳德代码CLI(
claude命令） - 谷歌Chrome或Chromium
______________________________________________________________________
快速开始
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."
}______________________________________________________________________
可用工具
Chrome管理
| 工具 | 说明 |
|---|---|
start_chrome(url, port, headless) | 启用调试启动Chrome |
navigate(url) | 导航到URL |
check_connection() | 验证Chrome连接状态 |
参考资料管理
| 工具 | 说明 |
|---|---|
capture_reference(name, selectors, full_page) | 保存截图+计算样式作为参考 |
list_references() | 列出所有已保存的引用 |
目视验证
| 工具 | 说明 |
|---|---|
verify_against_reference(name, threshold) | 主要工具 --将当前状态与参考进行比较 |
quick_visual_check(url) | 快速检查黑屏、加载状态 |
元素分析
| 工具 | 说明 |
|---|---|
get_element_debug_info(selector) | 深入了解元素的计算样式+规则链 |
compare_elements(selector, expected) | 将元素与预期样式值进行比较 |
screenshot_element(selector) | 单个元素的屏幕截图 |
______________________________________________________________________
调试会话示例
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______________________________________________________________________
黑屏检测
这 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：
# Find your Claude config location
claude config get
# Append the snippet
cat CLAUDE_SNIPPET.md >> ~/.claude/CLAUDE.md这教会了Claude Code何时以及如何自动使用可视化调试工具。
______________________________________________________________________
配置
环境变量
| 变量 | 描述 | 默认值 |
|---|---|---|
CHROME_PATH | Chrome可执行文件的路径 | 自动检测到 |
CHROME_DEBUG_PORT | Chrome调试端口 | 9222 |
设置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遍历所有样式表，以找到与元素匹配的每个规则。显示源文件、选择器和样式。揭示每个属性的“获胜”规则。
______________________________________________________________________
故障排除
服务器无法启动
# Test directly
node ~/.la-forge-mcp/dist/index.js
# Should hang waiting for input (Ctrl+C to exit)
# If errors appear, check Node version and run npm install“未找到Chrome”
集 CHROME_PATH 环境变量或通行证 chrome_path 到 start_chrome().
“未找到Chrome实例”
通过调试手动启动Chrome：
google-chrome --remote-debugging-port=9222或使用 start_chrome() 自动执行此操作的工具。
模块导入错误
重新安装和重建：
cd ~/.la-forge-mcp
npm install
npm run buildClaude代码显示“连接失败”
- 检查注册：
claude mcp get la-forge - 手动测试服务器（见上文）
- 删除并重新添加：
claude mcp remove la-forge -s user
claude mcp add la-forge node ~/.la-forge-mcp/dist/index.js -s user______________________________________________________________________
发展
# Clone
git clone https://github.com/MonomythDevelopment/la-forge-mcp.git
cd la-forge-mcp
# Install deps
npm install
# Development (with hot reload)
npm run dev
# Build
npm run build
# Run built version
npm start______________________________________________________________________
卸载
# Remove from Claude Code
claude mcp remove la-forge -s user
# Remove files
rm -rf ~/.la-forge-mcp______________________________________________________________________
许可证
麻省理工学院——见 许可证
______________________________________________________________________
╔═══════════════════════════════════════════════════════════════════════════╗
║ ║
║ LA FORGE MCP ║
║ ║
║ ░▒▓█ A PIXEL PERFECT VISOR FOR AI CODING ASSISTANTS █▓▒░ ║
║ ║
║ Made with ◉ by Monomyth Development ║
║ ║
╚═══════════════════════════════════════════════════════════════════════════╝