codebuddy视觉理解能力可将设计图/截图转化为结构化ui信息：支持上传png/jpeg提取ui_hierarchy、ocr文字、定位元素生成css选择器，并分析alignment/proximity/interactive_flow等空间与交互逻辑。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要快速从设计稿或截图中提取可编辑的UI结构、识别图中文字、定位关键控件位置，甚至理解界面逻辑关系——CodeBuddy的视觉理解能力正是为此而生，它不只“看到”图像，还能把像素转化为开发可用的语义信息。
上传图像并触发视觉理解
打开CodeBuddy CLI终端，确保已进入目标项目目录；输入codebuddy vision命令后回车，终端会提示“Waiting for image…”；此时直接将PNG/JPEG格式的设计图或屏幕截图拖入终端窗口，松手即完成上传。
注意：不要截图带半透明阴影或模糊边缘的窗口，这类图像会导致实体定位精度下降15%以上。
上传成功后，CLI自动调用多模态模型进行解析，约3～8秒后返回结构化响应。
提取UI组件结构与层级关系
在vision命令返回结果中，查找"ui_hierarchy"字段；该字段以嵌套JSON形式描述所有可识别控件（如Button、TextField、NavigationBar），包含id、type、bounds（x/y/width/height）、text（如有）和parent_id。
复制整个ui_hierarchy内容 → 粘贴至VS Code新建JSON文件 → 用Prettify插件格式化 → 即可直观查看层级树；若发现某Button未被识别为可点击元素，大概率是其像素对比度低于阈值，需在原图中手动加粗边框再重试。
【bounds坐标系以左上角为原点，单位为像素，非CSS中的relative定位】
识别图中文字并保留排版上下文
方法一：直接读取返回结果中的"ocr_text"数组，每项含text、confidence、bounding_box；confidence低于0.85的文字建议人工核对，尤其小字号或斜体字容易误识。
方法二：若需导出带位置标记的文本文件，执行codebuddy vision --export-ocr=txt，生成vision_ocr_export.txt，其中每行格式为[x,y,w,h] 文本内容。
方法三：对中英文混排截图，优先启用--lang=zh,en参数，否则默认仅识别英文，中文字符可能被拆成单字且丢失标点。
定位特定视觉元素并生成CSS选择器
第一步：在vision返回结果中找到"entities"列表，筛选label字段匹配你关注的对象（例如"提交按钮"、"头像区域"、"价格标签"）。
第二步：取出对应项的bounding_box，计算其中心点坐标：center_x = x + w/2，center_y = y + h/2。
第三步：运行codebuddy css-selector --x={center_x} --y={center_y}，工具将基于DOM结构推测最稳定的选择器路径，例如main > .product-card:nth-child(2) .price-tag。
这一步不能跳过中心点计算——直接传原始bounds会导致选择器命中多个相似区域，尤其在重复卡片布局中极易出错。
分析图像空间关系与交互逻辑
查看返回结果里的"spatial_reasoning"字段，它包含三类关键推断：
• "alignment"：指出元素是否左对齐/居中/右对齐，适用于快速校验设计规范一致性；
• "proximity"：标注哪些控件存在操作耦合（如“搜索框紧邻放大镜图标”，暗示应绑定同一事件）；
• "interactive_flow"：按视觉动线推测用户操作路径（例：“从顶部导航栏→下滑至商品列表→点击第二项→进入详情页”），该路径已通过GUI交互多模态推理验证，不是简单热区排序。
若"interactive_flow"为空，说明图像缺乏明确操作锚点（如无箭头、无高亮状态、无悬停效果示意），此时需补一张带交互态标注的截图再分析。
