企业官网建设流程全解析

前言

这个国庆节哪儿也没去，就在家里折腾 XiaoMate 的功能和界面了。前天重整了一个 XiaoMate 的README 介绍，改从 XiaoMate 的功能出发，重写了一下。

然后准备再写一个 XiaoMate 功能相关的系列文章，将 XiaoMate 小美同学支持的每个功能都给一一介绍一下。

今天是第一个功能：screen_capture这个 MCP tool。

screen_capture是 XiaoMate（小美同学）MCP 工具系统中的一个强大功能模块，它结合了屏幕截图与视觉 AI 分析两大能力，让 AI 助手能够"看到"你当前的屏幕内容，并提供智能化的理解和反馈。

这个功能的核心价值在于：让语音交互的 AI 助手突破纯文本限制，获得视觉感知能力。

一、技术架构

1. 核心组件

用户语音/文本请求 ↓ LLM 判断需要截图分析 ↓ 调用 screen_capture MCP 工具 ↓ ┌─────────────────────────────────┐ │ 1. mss 库截取全屏 │ │ 2. 保存为 PNG 到 media/tmp/ │ │ 3. 转为 base64 编码 │ │ 4. 调用 Vision 模型分析 │ │ 5. 返回结构化分析结果 │ └─────────────────────────────────┘ ↓ AI 用自然语言描述屏幕内容

2. 关键技术栈

3. 代码实现亮点

# 1. 异步非阻塞截图capture_result=awaitasyncio.to_thread(self.capture_screen)# 2. 细粒度状态推送status_callback({"status":"capturing","data":"正在截取屏幕..."})status_callback({"status":"analyzing","data":"正在调用视觉模型分析截图..."})# 3. 灵活的 Vision 模型配置vision_model=config_loader.get("chat_models.vision.model",fallback)vision_url=config_loader.get("chat_models.vision.url",fallback)

二、应用场景

下面是一个在 XiaoMate 桌宠中的实际截图分析示例，整个过程花了2秒不到，速度还是挺快的。

除此之外，可以畅想一下的场景还有很多，就看你的需求是什么。

✅ 场景 1：网购比价与商品识别

用户说：“帮我看看这个商品怎么样”

系统行为：

1. 截取当前电商页面
2. Vision 模型识别：
   • 商品名称、品牌、价格
   • 商品图片和规格参数
   • 用户评价摘要
3. 返回购买建议

实际案例：

用户：帮我看下这个手机值不值得买 AI（调用截图分析后）： 我看到你在看一款小米 15 Pro 手机： - 价格：¥4299（12GB+256GB） - 主要配置：骁龙 8 至尊版、5000mAh 电池、徕卡影像 - 用户评分：4.8/5.0，好评率 97% 建议：这个价位配置不错，但建议等双十一，预计会降到 ¥3999 左右

实用价值：

• 🛒 网购决策辅助：AI 自动提取关键信息
• 💰 价格历史分析：配合其他工具判断是否该入手
• 🔍 真假辨别：识别山寨商品的破绽

✅ 场景 2：快递单号与生活缴费

用户说：“帮我查一下这个快递到哪了”

系统行为：

1. 截取包含快递单号的页面
2. 自动提取单号（顺丰、中通、菜鸟等）
3. 调用物流查询工具返回实时状态

典型对话：

用户：查下我的快递 AI：[截图识别] 找到快递单号：SF1234567890 [查询物流] 您的包裹已从深圳发出，预计明天送达

扩展用途：

• 📦 多个快递单号批量识别
• 💡 水电燃气账单金额提取
• 🎫 电影票/火车票信息识别
• 📋 发票二维码内容解析

✅ 场景 3：健康报告与体检解读

用户说：“帮我解读一下这个体检报告”

系统行为：

1. 截取体检报告页面/照片
2. Vision 模型提取各项指标数据
3. 对比正常范围，标记异常项
4. 给出健康建议

实际案例：

用户：看下我的体检报告有没有问题 AI（截图分析后）： 我识别到您的体检报告中有 3 项指标异常： ⚠️ 空腹血糖：6.8 mmol/L（正常 3.9-6.1） ⚠️ 总胆固醇：5.9 mmol/L（正常 <5.2） ✅ 其他指标均在正常范围内 建议： 1. 血糖偏高，建议减少甜食摄入 2. 胆固醇略高，注意饮食清淡 3. 建议 3 个月后复查

适用场景：

• 🏥 体检报告解读（血常规、生化指标等）
• 💊 药品说明书用法用量提取
• 🩺 医生处方内容数字化
• 🍎 食品营养成分分析

✅ 场景 4：旅游攻略与行程规划

用户说：“帮我看看这个旅游攻略怎么样”

系统行为：

1. 截取攻略页面（小红书、马蜂窝、携程等）
2. 提取关键信息：
   • 景点名称、门票价格、开放时间
   • 推荐行程路线
   • 避坑提示
3. 生成个性化建议

真实对话：

用户：这个云南旅游攻略靠谱吗 AI（截图分析后）： 这是一篇"云南 6 天 5 晚"的攻略： 📍 行程：昆明→大理→丽江→香格里拉 💰 预算：约 ¥3500/人（不含机票） ✅ 合理之处： - 行程安排松紧适中 - 推荐的民宿性价比高 ⚠️ 注意避坑： - 第 3 天推荐的"免费"景点实际有隐形消费 - 玉龙雪山索道票需提前 3 天预约 建议：可以把大理多留一天，洱海环湖很值得

扩展用途：

• ✈️ 机票/酒店价格对比
• 🗺️ 地图路线规划确认
• 📸 网红打卡地真实性评估
• 🎒 行李清单检查

✅ 场景 5：菜谱识别与烹饪指导

用户说：“这个菜谱怎么做？帮我简化一下”

系统行为：

1. 截取菜谱页面或美食博主分享
2. 提取：
   • 食材清单及用量
   • 详细步骤
   • 烹饪时长和火候
3. 根据用户情况调整（人数、口味偏好、厨房工具）

典型对话：

用户：我想做这个红烧肉，但只有电饭煲 AI（截图分析后）： 原菜谱需要炒锅炖煮，我帮您调整为电饭煲版本： 🥩 食材（2 人份）： - 五花肉 500g（切块） - 冰糖 3 勺、生抽 2 勺、老抽 1 勺 - 葱姜蒜适量 🍳 电饭煲做法： 1. 五花肉冷水下锅焯水 3 分钟（可用热水壶） 2. 所有调料和肉放进电饭煲 3. 加水没过肉，按"煮饭"键 4. 跳闸后再按一次，总共煮 40 分钟 ⏰ 总时长：50 分钟（比原版简单 30 分钟）

适用场景：

• 📖 美食博主菜谱简化
• 🥗 根据冰箱剩余食材推荐菜谱
• 🍰 烘焙配方换算（分量/温度调整）
• 🌶️ 口味定制（减盐、素食、儿童版）

✅ 场景 6：账单核对与消费分析

用户说：“帮我看看这个月花了多少钱”

系统行为：

1. 截取账单页面（支付宝、微信、银行 APP）
2. 提取消费明细：
   • 每笔交易金额、时间、商户
   • 分类统计（餐饮、交通、购物等）
3. 分析消费趋势，给出理财建议

实际案例：

用户：看下我上个月的花销 AI（截图分析后）： 我识别到您的 10 月账单： 💰 总支出：¥6,842 📊 分类占比： - 餐饮：¥2,350（34%） - 购物：¥1,890（28%） - 交通：¥680（10%） - 娱乐：¥1,200（17%） - 其他：¥722（11%） 💡 分析： - 餐饮支出比上月增加 23%，主要是外卖 - 建议：自己做饭可节省约 ¥800/月 - 有一笔 ¥450 的重复扣款，建议联系客服

扩展用途：

• 📈 工资条解读（五险一金、个税计算）
• 💳 信用卡账单还款计划
• 🏠 房租/水电费用趋势分析
• 🎁 礼物预算规划（节日、生日）

✅ 场景 7：学习资料与笔记整理

用户说：“帮我总结这篇课文的重点”

系统行为：

1. 截取教材/论文/笔记页面
2. 提取核心知识点
3. 生成结构化笔记（思维导图、提纲、记忆卡片）

典型对话：

用户：帮我总结这篇英语阅读理解 AI（截图分析后）： 这篇文章的主题是"人工智能对未来工作的影响"： 📌 核心观点： 1. AI 将取代 40% 的重复性工作 2. 但会创造新的职业机会 3. 关键是要持续学习 📝 重点词汇： - automation（自动化） - displace（取代） - adaptability（适应力） ❓ 常见考点： - 作者态度：客观乐观 - 主旨题选 C（技术与人并重）

适用场景：

• 📚 教科书章节总结
• 📰 长文章要点提取
• 🎓 论文摘要生成
• ✍️ 手写笔记数字化
• 🗂️ 错题整理与归类

✅ 场景 8：社交媒体内容创作

用户说：“帮我为这张照片写个朋友圈文案”

系统行为：

1. 截取照片或页面
2. Vision 模型识别画面内容、氛围、元素
3. 生成多风格文案（文艺、幽默、商务等）

真实案例：

用户：这张日落照片配什么文案好 AI（截图分析后）： 我看到一张海边日落的照片： - 橙红色天空，海面上有帆船剪影 - 整体氛围宁静、治愈 推荐文案： 🌅 文艺版： "夕阳是天空写给大海的情书" 😄 幽默版： "今天的晚霞是橘子味的，建议搭配冰啤酒食用" 💼 商务版： "结束一天的忙碌，最美的风景在路上" 选择哪个？我可以帮你调整~

扩展用途：

• 📸 小红书种草文案生成
• 🎵 抖音/B 站视频标题优化
• 🛍️ 闲鱼二手商品描述
• 💼 朋友圈职场动态
• 🎉 节日祝福个性化定制

✅ 场景 9：合同协议与条款解读

用户说：“帮我看看这份租房合同有没有坑”

系统行为：

1. 截取合同页面
2. 提取关键条款：
   • 租金、押金、付款方式
   • 租期、违约责任
   • 维修责任划分
3. 标注风险点，给出谈判建议

实际对话：

用户：这个租房合同能签吗 AI（截图分析后）： 我识别到合同中的关键信息： 📋 基本信息： - 月租金：¥3,500，押一付三 - 租期：1 年 - 地址：XX 小区 3 栋 1201 ⚠️ 需要注意的条款： 1. 第 8 条：提前退租需支付 2 个月违约金（偏高） 2. 第 12 条：家电维修由租客承担（建议协商） 3. 第 15 条：房东可随时进入房间（侵犯隐私） 💡 建议： - 要求修改第 15 条，改为"需提前 24 小时通知" - 第 8 条违约金协商为 1 个月 - 入住前拍照记录房屋现状

适用场景：

• 🏠 租房/购房合同审查
• 💼 劳动合同条款解读
• 🛒 网购平台用户协议
• 📱 APP 隐私政策摘要
• ✈️ 机票退改签规则

✅ 场景 10：生活服务与便民查询

用户说：“帮我看看这个停车费怎么算”

系统行为：

1. 截取停车场收费标准/公告页面
2. 提取计费规则
3. 根据停车时长计算费用

典型对话：

用户：我停 3 小时要多少钱 AI（截图分析后）： 这个停车场的收费规则： - 首小时：免费 - 1-3 小时：¥5/小时 - 超过 3 小时：¥8/小时 - 24 小时封顶：¥60 您停 3 小时的费用： ¥0（首小时）+ ¥5×2 = ¥10 💡 提示： - 周末全天封顶 ¥40 - 商场消费满 ¥200 可免 2 小时

扩展用途：

• 🚌 公交/地铁线路规划确认
• 🏥 医院挂号流程指导
• 📮 快递寄送价格对比
• 🎬 电影排期与选座建议
• 🍽️ 餐厅菜单翻译与推荐

三、高级用法

1. 自定义分析问题

通过传递question参数，可以精确控制分析方向：

# 示例 1：专注安全性审查question="这段代码中是否有 SQL 注入风险？"# 示例 2：性能分析question="这个前端页面的加载性能如何？有哪些优化建议？"# 示例 3：设计评审question="这个 UI 设计的配色和布局是否符合无障碍标准？"# 示例 4：数据提取question="提取表格中的所有数据，输出为 JSON 格式"

2. 多轮对话结合

截图分析可以融入连续对话：

用户：截图看看 AI：[完成截图分析] 屏幕显示 VS Code 编辑器... 用户：第 32 行那个函数是做什么的？ AI：[基于上下文] 那是 validate_user_input 函数， 用于验证用户提交的表单数据... 用户：帮我重构一下 AI：[调用代码生成工具] ...

四、技术细节

1. 截图流程

defcapture_screen(self)->Dict[str,Any]:# 1. 创建保存目录tmp_dir=Path("media/tmp")# 2. 使用 mss 截取全屏（支持多显示器）withmss.MSS()assct:monitor=sct.monitors[0]# 所有屏幕合并screenshot=sct.grab(monitor)# 3. 转换为 PIL Image 并保存为 PNGimg=Image.frombytes("RGB",screenshot.size,screenshot.bgra,"raw","BGRX")img.save(str(image_path),"PNG")# 4. 返回本地路径和 URLreturn{"success":True,"image_path":str(image_path),"image_url":f"/media/tmp/{filename}"}

2. Vision 分析流程

asyncdefanalyze_image_with_vision(self,image_path,question):# 1. 图片转 base64image_base64=base64.b64encode(image_bytes).decode('utf-8')# 2. 读取 Vision 模型配置（支持热切换）vision_model=config_loader.get("chat_models.vision.model")vision_url=config_loader.get("chat_models.vision.url")# 3. 构建 OpenAI 兼容的 Vision API 请求payload={"model":vision_model,"messages":[{"role":"user","content":[{"type":"text","text":question},{"type":"image_url","image_url":{"url":f"data:image/png;base64,{image_base64}"}}]}],"max_tokens":2048}# 4. 异步调用 APIasyncwithhttpx.AsyncClient(timeout=60.0)asclient:response=awaitclient.post(vision_url,headers=headers,json=payload)

3. 状态推送机制

asyncdefcapture_and_analyze(self,question="",status_callback=None):# 阶段 1：截图ifstatus_callback:status_callback({"status":"capturing","data":"正在截取屏幕..."})capture_result=awaitasyncio.to_thread(self.capture_screen)# 阶段 2：截图完成ifstatus_callback:status_callback({"status":"capture_completed","data":"截图完成，开始分析...","image_url":capture_result.get("image_url")})# 阶段 3：分析ifstatus_callback:status_callback({"status":"analyzing","data":"正在调用视觉模型..."})analysis_result=awaitself.analyze_image_with_vision(...)

五、配置指南

1. 设置 Vision 模型

在config.yaml中配置：

chat_models:vision:model:"gpt-4-vision-preview"# 或兼容的开源模型url:"https://api.openai.com/v1/chat/completions"api_key:"your-api-key"

2. 初始化工具

# 在 Django shell 中执行python manage.py shell<mcps/screen_capture/init_screen_capture_tool.py

这会创建 MCP 工具配置，包括：

• 工具名称和描述
• 触发场景关键词
• 参数定义（question、user_id）

3. 测试功能

frommcps.screen_captureimportsingleton_screen_captureimportasyncio# 简单截图result=singleton_screen_capture.capture_screen()print(result["image_url"])# 截图 + 分析asyncdeftest():result=awaitsingleton_screen_capture.capture_and_analyze(question="屏幕上打开了几个应用？")print(result["analysis"])asyncio.run(test())

六、性能与限制

1. 优势

• ✅跨平台：基于mss，支持 Windows/macOS/Linux
• ✅多显示器：自动合并所有屏幕
• ✅异步非阻塞：不阻塞主线程，适合高并发
• ✅模型可替换：兼容任何 OpenAI 兼容的 Vision API

2. 当前限制

• ⚠️全屏截图：暂不支持指定区域截图
• ⚠️分辨率依赖：Vision 模型的识别精度受截图分辨率影响
• ⚠️隐私安全：截图包含屏幕所有信息，需注意敏感数据
• ⚠️API 成本：每次调用消耗 Vision 模型的 token

3. 优化建议

1. 缩小截图范围：后续可添加monitor_id参数支持单屏截图
2. 图片压缩：在 base64 编码前降低分辨率
3. 缓存机制：相同场景的截图可复用分析结果
4. 隐私保护：添加自动打码功能（银行卡号、密码等）

七、未来扩展方向

🔮 短期规划

• 支持指定窗口/区域截图
• 多显示器独立截图
• 截图历史管理
• 敏感信息自动过滤

🔮 中期规划

• 实时屏幕监控：持续截图 + 变化检测
• 交互式标注：用户在截图上画圈，AI 重点分析
• 多模态对话：连续截图构建上下文（类似 GPT-4o 的屏幕共享）

🔮 长期愿景

• AR 辅助：结合摄像头实现"看屏幕"到"看实物"的过渡
• 自动化操作：AI 识别按钮位置 → 自动点击（RPA 集成）
• 协作审查：多人共享屏幕截图 + AI 标注

八、总结

screen_captureMCP 工具通过截图 + 视觉 AI的组合，为 XiaoMate 增加了"看见"用户屏幕的能力。它不仅是简单的 OCR，而是具备语义理解、上下文推理、问题诊断的智能分析系统。

1. 核心价值主张

“从网购比价到合同解读，让 AI 看懂你的生活”

2. 典型用户画像

• 👨‍👩‍👧家庭用户：账单管理、菜谱指导、体检报告解读
• 🛒网购达人：商品比价、快递查询、优惠攻略
• ✈️旅行爱好者：旅游攻略、行程规划、票据识别
• 👩‍🎓学生党：学习资料整理、笔记总结、错题归纳
• 💼职场新人：合同审查、社交文案、消费分析
• 📱社交媒体用户：朋友圈文案、种草笔记、内容创作

九、参考资源

• 源码位置：mcps/screen_capture/screen_capture.py
• 测试脚本：mcps/screen_capture/test_screen_capture.py
• 配置示例：config.yaml中的chat_models.vision节点
• MCP 协议文档：docs/MCP_NOTIFICATION_COMPLETE_UNIFICATION.md

本文档基于 XiaoMate v2.3.2 版本编写，技术细节可能随版本迭代更新。