📸 MCP ACS屏幕截图-VS代码扩展

赋予AI代理前所未有的视觉超能力，以查看、分析和记录您的应用程序。

这不仅仅是另一个截图工具——它是给人工智能代理的桥梁 视觉感知 使他们能够成为智能文档合作伙伴、UI分析器和可视化调试助手。

🔗 仓库

此包现在保存在自己的存储库中： ****

此存储库是 AI 能力套件在GitHub上。

🤔 为什么AI代理需要看到你的屏幕？

今天的人工智能代理是强大的，但也是盲目的。 他们可以阅读你的代码并提出改进建议，但他们看不到你的应用程序的实际外观，也看不到用户是如何与之交互的。这在他们帮助你的能力上造成了巨大的差距。

🎯 革命性用例

📚 “AI，为此功能创建文档”

You: "Document the new dashboard layout"
AI: *Captures screenshots, analyzes UI components*
AI: "Created comprehensive guide with 8 annotated screenshots showing navigation flow, key features, and user interactions..."

🐛 “AI，帮助调试此UI问题”

You: "The button alignment looks wrong"
AI: *Captures current state, analyzes layout*
AI: "Button is 3px off-center. Here's the CSS fix and a before/after comparison..."

🎥 “AI，创建演示演练”

You: "Show how the authentication flow works"
AI: *Captures key screens, creates step-by-step guide*
AI: "Generated 6-step visual walkthrough with annotations and user journey map..."

🔍 “AI，分析此设计的可访问性”

You: "Check if this form is accessible"
AI: *Captures form, analyzes contrast and layout*
AI: "Found 3 accessibility issues: low contrast on labels, missing focus indicators, inadequate spacing..."

📊 “AI，比较这两种实现方式”

You: "Which design works better?"
AI: *Captures both versions, analyzes differences*
AI: "Version B has 23% better visual hierarchy and clearer call-to-action placement..."

🎨 “人工智能，帮助响应式设计”

You: "How does this look on different screen sizes?"
AI: *Captures multiple viewport sizes*
AI: "Mobile layout breaks at 768px - navigation overlaps content. Here's the media query fix..."

______________________________________________________________________

✨ 这会改变什么

之前： 人工智能只能处理代码和文本描述

❌ “按钮看起来很奇怪”→ AI猜你是什么意思
❌ “创建文档”→ AI编写通用文本
❌ “检查布局”→ AI看不到实际结果

之后： AI可以查看和分析您的实际应用程序

✅ 可视化调试 -AI能准确地看到问题所在
✅ 智能文档 -AI创建带有真实截图的指南
✅ 设计分析 -AI评估实际用户界面
✅ 无障碍审计 -AI检查真实的视觉对比度和布局
✅ 响应式测试 -AI捕捉并比较不同的屏幕尺寸

______________________________________________________________________

🚀 特性

屏幕截图功能

全屏截图：捕获整个显示器或特定显示器
窗口捕获：目标特定的应用程序窗口
区域捕获：捕获矩形屏幕区域
多格式支持：PNG、JPEG、WebP、BMP，具有质量控制
PII屏蔽：自动检测和编辑敏感信息
多显示器支持：与多个显示器无缝协作
隐私控制：排除敏感窗口和应用程序
MCP集成：专为AI代理工作流程构建

🎨 语言服务器协议（LSP）功能-20个功能

该扩展包括一个全面的语言服务器，提供专业级代码智能：

代码操作（4个功能）

修复无效格式：更正无效的格式值（bmp、gif）→ 建议使用有效格式（png、jpeg、webp）
固定质量范围：夹具质量值范围为0-100
添加缺失的参数：为不完整的函数调用生成参数模板
迁移已弃用的API：将6个已弃用的函数转换为现代等效函数

实时辅助（3个功能）

签名帮助：在您键入时显示所有5个屏幕截图功能的参数文档（由触发 ( 和 ,)
镶嵌提示-尺寸：显示 // 800x600px 内联后区域捕获
嵌入提示-文件大小：显示 // ~2.5MB 基于格式和质量的内联

代码导航（3个功能）

文件符号：通过大纲导航捕获操作和列表操作（Ctrl+Shift+O）
文档链接：所有5个屏幕截图功能的示例.md的可点击链接（Ctrl+Click）
调用层次结构：可视化函数依赖关系（captureFull→列表显示）

视觉增强（3个功能）

语义突出显示：自定义颜色 capture* 和 list* 功能，特别突出显示 enablePIIMasking
颜色提供者：图像格式的视觉颜色（png=蓝色，jpeg=橙色，webp=绿色，bmp=红色）
折叠范围：折叠/展开捕获操作和配置对象

智能编辑（3个功能）

选择范围：使用Shift+Alt+Right进行智能选择扩展
链接编辑：同时编辑文件中的格式变量
类型层次：探索类型关系（CaptureConfig→对象）

核心智能（4个功能）

颜色提供者：图像格式的视觉颜色（png=蓝色，jpeg=橙色，webp=绿色，bmp=红色）

折叠范围：折叠/展开捕获操作和配置对象

选择范围：使用Shift+Alt+Right进行智能选择扩展

链接编辑：同时编辑文件中的格式变量

调用层次结构：可视化函数依赖关系（captureFull→列表显示）

类型层次：探索类型关系（CaptureConfig→对象）

悬停信息：函数、配置属性和标识符的上下文帮助

代码补全：配置属性和值的智能自动补全

诊断：实时验证，并显示有用的错误消息

编码镜头：用于快速截图操作的内联操作按钮

AI代理命令：用于自动化的程序化命令执行

安装

从VS代码市场安装（即将推出）

或从VSIX文件安装：

   code --install-extension mcp-screenshot-0.0.1.vsix

用法

命令

MCP ACS屏幕截图：捕获全屏 -捕获整个屏幕
MCP ACS屏幕截图：捕获窗口 -选择并捕获特定窗口
MCP ACS截图：捕获区域 -捕捉矩形区域
MCP ACS屏幕截图：列表显示 -显示所有连接的显示器
MCP ACS屏幕截图：列出窗口 -显示所有可见窗口
MCP ACS屏幕截图：打开设置 -配置扩展设置

LSP功能正在发挥作用

悬停信息

将鼠标悬停在屏幕截图相关代码上以查看文档：

函数调用：将鼠标悬停在上方 captureFullScreen(), captureWindow()，或 captureRegion() 查看参数文档和示例
配置对象：将鼠标悬停在屏幕截图配置属性上以查看有效值和类型
标识符：将鼠标悬停在显示器或窗口ID上，查看有关该资源的信息（如果可用）

所有悬停信息都格式化为markdown，其中参数、返回值和使用示例部分清晰可见。

编码镜头

代码镜头在代码中显示为内联动作按钮：

📸 屏幕捕获：出现在屏幕截图捕获功能附近-单击以执行捕获
🖥️ 列表显示：出现在显示枚举代码附近-单击以查看所有连接的显示
🪟 列出窗口：出现在窗口枚举代码附近-单击查看所有可见窗口

代码镜头可以在不离开编辑器的情况下快速访问屏幕截图操作。

诊断

实时验证在运行前发现问题：

无效格式：当格式不是“png”、“jpeg”或“webp”时发出警告，并建议有效选项
质量范围：质量参数在0-100范围之外时出错
缺少参数：缺少所需的屏幕截图参数时出错
弃用的API：关于已弃用的带有迁移指南的截图API的信息性消息

所有诊断都包括确切的位置、清晰的消息和建议的修复。

代码补全

截图代码的智能自动补全：

配置属性：键入屏幕截图配置对象以查看所有有效属性和文档
设置值格式：键入格式参数时，自动补全会建议使用“png”、“jpeg”、“webp”
质量值：自动补全提示常见的质量值（80、90、95、100）

所有填写项目均包括文档和正确语法的插入。

AI代理命令

LSP公开了用于编程执行的命令：

mcp.screenshot.capture：使用参数执行屏幕截图捕获
mcp.screenshot.listDisplays：获取可用显示器列表
mcp.screenshot.listWindows：获取可用窗口列表
mcp.screenshot.getCapabilities：获取屏幕截图系统功能

命令返回结构化结果或错误，以实现可靠的自动化。

键盘快捷键

您可以通过VS Code的键盘快捷键设置为任何命令分配自定义键盘快捷键。

配置

通过VS代码设置配置扩展：

{
  "mcpScreenshot.defaultFormat": "png",
  "mcpScreenshot.defaultQuality": 90,
  "mcpScreenshot.saveDirectory": "${workspaceFolder}/screenshots",
  "mcpScreenshot.enablePIIMasking": false,
  "mcpScreenshot.autoSave": true,
  "mcpScreenshot.autoStart": true
}

设置

mcpScreenshot.defaultFormat：默认图像格式（png、jpeg、webp、bmp）
mcpScreenshot.defaultQuality：有损格式的默认质量（1-100）
mcpScreenshot.saveDirectory：保存屏幕截图的默认目录
mcpScreenshot.enablePIIMasking：默认情况下启用PII检测和屏蔽
mcpScreenshot.autoSave：自动将屏幕截图保存到磁盘
mcpScreenshot.autoStart：打开VS Code时自动启动MCP服务器
mcpScreenshot.serverCommand：运行MCP屏幕截图服务器的命令
mcpScreenshot.serverArgs：MCP屏幕截图服务器命令的参数

需求

Visual Studio代码1.85.0或更高版本
Node.js 18.0.0或更高版本
平台特定依赖关系：

- Linux：X11或Wayland、ImageMagick - macOS：屏幕截图（内置） - 视窗：屏幕截图桌面库

🎮 真实世界的例子

AI驱动的工作流程

文档生成

1. You: "@copilot Document the user registration flow"
2. AI: *Uses MCP ACS Screenshot to capture each step*
3. AI: *Analyzes UI elements and user journey*
4. AI: *Generates markdown with embedded screenshots*
5. Result: Complete documentation with visual guides

Bug报告创建

1. You: "@copilot This form validation isn't working right"
2. AI: *Captures current state and error conditions*
3. AI: *Analyzes expected vs actual behavior*
4. AI: *Creates detailed bug report with screenshots*
5. Result: Professional bug report ready for your team

设计评审与反馈

1. You: "@copilot Review this new feature design"
2. AI: *Captures different states and interactions*
3. AI: *Analyzes usability and accessibility*
4. AI: *Provides specific improvement suggestions*
5. Result: Actionable design feedback with visual examples

响应式设计测试

1. You: "@copilot Check how this looks on mobile"
2. AI: *Captures multiple viewport sizes*
3. AI: *Identifies layout issues and breakpoints*
4. AI: *Suggests CSS improvements*
5. Result: Responsive design fixes with before/after comparisons

手动命令

捕获全屏

打开命令面板（Ctrl+Shift+P/Cmd+Shift+P）
运行“MCP ACS截图：捕获全屏”
屏幕截图已保存到配置的目录中

捕获特定窗口

打开命令选项板
运行“MCP ACS截图：捕获窗口”
从列表中选择窗口
选择是否包括窗框
截图已捕获

捕获区

打开命令选项板
运行“MCP ACS截图：捕获区域”
输入坐标和尺寸
截图已捕获

在代码中使用LSP特性

代码操作示例

修复无效格式：

// ⚠️ Warning: Invalid format 'bmp'
const screenshot = await captureFull({ format: 'bmp' });
// 💡 Quick Fix: Change to 'png', 'jpeg', or 'webp'

修复质量范围：

// ❌ Error: Quality 150 out of range
const screenshot = await captureFull({ format: 'jpeg', quality: 150 });
// 💡 Quick Fix: Clamp to 100

添加缺失的参数：

// ❌ Error: Missing required parameters
const screenshot = await captureFull();
// 💡 Quick Fix: Add parameter template
const screenshot = await captureFull({ format: 'png', quality: 90 });

迁移不推荐的API：

// ℹ️ Info: takeScreenshot is deprecated
const screenshot = await takeScreenshot();
// 💡 Quick Fix: Migrate to captureFull
const screenshot = await captureFull({ format: 'png' });

实时辅助示例

签名帮助：

// Type '(' to see parameter hints
captureFull(
  // ↓ Shows: config: { format: string, quality?: number, ... }
  { format: 'png', quality: 90 }
);

// Type ',' to move to next parameter
captureWindow(
  // ↓ Shows all config properties with types and descriptions
);

镶嵌提示：

// Image dimensions hint
const region = await captureRegion({
  x: 0, y: 0, width: 800, height: 600
});  // → 800x600px

// File size estimate hint
const full = await captureFull({
  format: 'png', quality: 90
});  // → ~2.5MB

代码导航示例

文件符号：

// Press Ctrl+Shift+O to see outline:
// 📸 Capture Operations
//   ├─ captureFull (line 5)
//   ├─ captureWindow (line 10)
//   └─ captureRegion (line 15)
// 📊 List Operations
//   ├─ listDisplays (line 20)
//   └─ listWindows (line 25)

async function screenshots() {
  await captureFull({ format: 'png' });
  await captureWindow({ windowTitle: 'VSCode' });
  await captureRegion({ x: 0, y: 0, width: 800, height: 600 });
  await listDisplays();
  await listWindows();
}

文档链接：

// Hover over function to see underlined link
// Ctrl+Click to open EXAMPLES.md
captureFull({ format: 'png' });  // → Links to captureFull examples
captureWindow({ windowTitle: 'VSCode' });  // → Links to captureWindow examples

呼叫层次结构：

// Right-click 'captureFull' → Show Call Hierarchy
captureFull({ format: 'png' });
// Shows: captureFull → depends on → listDisplays

视觉增强示例

语义突出显示：

// Functions highlighted in distinct color
captureFull({ format: 'png' });  // 'captureFull' highlighted
listDisplays();  // 'listDisplays' highlighted

// PII keyword highlighted for security awareness
const config = {
  format: 'png',
  enablePIIMasking: true  // 'enablePIIMasking' highlighted
};

颜色提供者：

// Color squares appear in gutter
format: 'png'   // 🟦 Blue square
format: 'jpeg'  // 🟧 Orange square
format: 'webp'  // 🟩 Green square

折叠范围：

// Click fold icon to collapse
captureFull({  // ▼ Click to fold
  format: 'png',
  quality: 90,
  enablePIIMasking: true
});  // ▲ Click to unfold

选择范围：

// Place cursor, press Shift+Alt+Right to expand
captureFull({ format: 'png' });
// 1st press: selects 'captureFull'
// 2nd press: selects entire function call
// 3rd press: selects entire line

链接编辑：

// Edit 'format' on line 1, line 3 updates automatically
const format = 'png';
captureFull({ format });  // Updates when you edit line 1
captureWindow({ format });  // Also updates

智能编辑示例

选择范围：

// Place cursor, press Shift+Alt+Right to expand
captureFull({ format: 'png' });
// 1st press: selects 'captureFull'
// 2nd press: selects entire function call
// 3rd press: selects entire line

链接编辑：

// Edit 'format' on line 1, line 3 updates automatically
const format = 'png';
captureFull({ format });  // Updates when you edit line 1
captureWindow({ format });  // Also updates

类型层次结构：

// Right-click 'CaptureConfig' → Show Type Hierarchy
const config: CaptureConfig = { format: 'png' };
// Shows: CaptureConfig → extends → Object

核心情报示例

悬停信息：

// Hover over captureFullScreen to see documentation
const screenshot = await captureFullScreen({
  format: 'png',  // Hover to see valid formats
  quality: 90     // Hover to see valid range
});

示例2：编码镜头

// A code lens "📸 Capture Screenshot" appears above this function
async function takeScreenshot() {
  const result = await captureFullScreen({ format: 'png' });
  return result;
}

// A code lens "🖥️ List Displays" appears above this function
async function getDisplays() {
  const displays = await listDisplays();
  return displays;
}

示例3：诊断

// ❌ Error: Quality must be between 0 and 100
const screenshot = await captureFullScreen({
  format: 'png',
  quality: 150  // Diagnostic appears here
});

// ⚠️ Warning: Invalid format, use 'png', 'jpeg', or 'webp'
const screenshot2 = await captureFullScreen({
  format: 'gif'  // Diagnostic appears here
});

示例4：代码完成

// Type inside the config object to see completions
const screenshot = await captureFullScreen({
  // Type 'f' to see 'format' completion
  // Type 'q' to see 'quality' completion
  // Type 'e' to see 'enablePIIMasking' completion
});

示例5:AI代理命令执行

// AI agents can execute commands programmatically
const result = await vscode.commands.executeCommand(
  'mcp.screenshot.capture',
  {
    type: 'fullscreen',
    format: 'png',
    quality: 90
  }
);

const displays = await vscode.commands.executeCommand(
  'mcp.screenshot.listDisplays'
);

隐私和安全

PII屏蔽：自动检测和编辑电子邮件、电话号码和信用卡
窗口排除：排除密码管理器和身份验证对话框
路径验证：将文件保存限制在允许的目录中
速率限制：防止捕获垃圾邮件

故障排除

扩展未启动

检查输出面板（视图→ 输出→ MCP ACS屏幕截图）显示错误消息。

Linux上的权限错误

确保X11访问权限：

xhost +local:

macOS屏幕录制权限

授予屏幕录制权限：

系统偏好设置→ 安全与隐私→ 隐私
选择“屏幕录制”
添加Visual Studio代码

支持

github：
问题：
电子邮件：

许可证

MIT许可证-有关详细信息，请参阅许可证文件

贡献

欢迎投稿！请参阅存储库中的贡献指南。

支持的文件类型

LSP功能在以下文件类型中工作：

JavaScript (.js)
TypeScript (.ts)
JSX (.jsx)
多伦多证券交易所 (.tsx)
JSON (.json)-仅配置验证

更新日志

0.2.0（完成LSP实施）

按类别组织的20个LSP功能：

代码操作：4个操作（修复格式、修复质量、添加参数、迁移API）
实时协助：签名帮助+2个镶嵌提示（尺寸、文件大小）
代码导航：文档符号、文档链接、调用层次结构
视觉增强：语义高亮、颜色提供、折叠范围
智能编辑：选择范围、链接编辑、类型层次结构
核心情报：悬停、完成、诊断、编码镜头、AI命令
质量：52+自动化测试，97%的LSP覆盖率（34/35个功能）
演出：比目标快2-5倍，响应时间\<100ms

0.1.0（LSP集成）

添加了语言服务器协议支持
屏幕截图API的悬停信息
用于快速操作的编码镜头
实时诊断和验证
配置代码完成
AI代理命令执行
多语言支持（JS、TS、JSX、TSX、JSON）

0.0.1（初始版本）

全屏截图
窗口捕获
区域捕捉
多格式支持
PII屏蔽
多显示器支持
MCP集成

Vscode MCP Screenshot

快速接入

详细介绍