OpenClaw技能开发入门：为Phi-3-vision-128k-instruct编写图片转Markdown插件

OpenClaw技能开发入门为Phi-3-vision-128k-instruct编写图片转Markdown插件1. 为什么需要这个技能上周整理技术文档时我遇到了一个典型痛点需要将十几张包含代码片段的截图转换成可编辑的Markdown格式。手动转录不仅耗时还容易出错。这让我意识到如果能利用Phi-3-vision-128k-instruct的多模态能力结合OpenClaw的自动化框架应该能实现截图自动转Markdown的工作流。这个需求在技术写作中非常普遍会议白板拍照转会议纪要纸质笔记数字化归档网页内容截图转结构化文档演示文稿内容提取传统OCR工具如Tesseract对非标准字体和混合排版效果欠佳而Phi-3-vision这类多模态大模型能理解图像中的语义关系更适合处理复杂场景。2. 开发环境准备2.1 基础组件安装我的开发环境是macOS Ventura已通过Homebrew安装Node.js 20brew install node20 npm install -g openclawlatest clawhub install skill-dev-kit验证环境是否就绪openclaw --version # 应输出v3.2 clawhub list --installed | grep skill-dev-kit # 确认开发套件存在2.2 模型服务对接Phi-3-vision-128k-instit的vLLM服务部署在本地端口5001修改OpenClaw配置文件~/.openclaw/openclaw.json{ models: { providers: { phi3-vision: { baseUrl: http://localhost:5001/v1, apiKey: NULL, api: openai-completions, models: [ { id: phi-3-vision-128k-instruct, name: Phi-3 Vision Local, contextWindow: 131072, vision: true } ] } } } }重启网关使配置生效openclaw gateway restart3. 技能开发实战3.1 创建技能骨架使用开发套件初始化项目mkdir image2md cd image2md clawhub skill init --nameimage2md --authoryourname生成的目录结构包含关键文件image2md/ ├── package.json ├── skill.json # 技能元数据 ├── src/ │ ├── index.js # 主逻辑 │ └── prompts/ # 系统提示词 └── test/ └── sample.png # 测试图片3.2 核心逻辑实现修改src/index.js主要实现三个功能接收图片路径输入调用Phi-3-vision进行图文理解输出结构化Markdownconst { BaseSkill } require(skill-dev-kit); const fs require(fs); module.exports class Image2MdSkill extends BaseSkill { constructor() { super({ name: image2md, description: Convert images to structured Markdown using Phi-3-vision }); } async execute({ input }) { const imagePath input.image_path; if (!fs.existsSync(imagePath)) { throw new Error(Image file not found); } const imageBase64 fs.readFileSync(imagePath, base64); const visionPrompt 你是一个专业的技术文档工程师。请将图片中的内容转换为结构化的Markdown文档保留所有代码块、表格和标题层级。如果是手写内容请保持原意但优化表述。; const response await this.models.phi3_vision.chat.completions.create({ model: phi-3-vision-128k-instruct, messages: [ { role: user, content: [ { type: text, text: visionPrompt }, { type: image_url, image_url: data:image/png;base64,${imageBase64} } ] } ], max_tokens: 4096 }); return { markdown: response.choices[0].message.content, image: imagePath }; } };3.3 提示词优化在src/prompts/system.md中添加多轮对话优化提示你正在处理图片转Markdown任务需要特别注意 1. 代码块保持原样标注正确语言类型 2. 表格用Markdown语法重建保留表头 3. 数学公式转换为LaTeX格式 4. 手写文字需校验关键术语拼写 5. 标题层级不超过###三级4. 测试与调试4.1 单元测试创建测试脚本test/test.jsconst skill require(../src/index); const testImage ./test/sample.png; (async () { try { const result await skill.execute({ input: { image_path: testImage } }); console.log(Conversion Result:\n, result.markdown); fs.writeFileSync(output.md, result.markdown); } catch (error) { console.error(Test Failed:, error); } })();运行测试node test/test.js4.2 常见问题解决在开发过程中我遇到了几个典型问题图片尺寸过大现象模型返回截断内容解决添加图片预处理步骤超过1024px的图片自动缩放混合内容识别错误现象代码块被识别为普通文本优化在提示词中强调代码块必须用包裹中文编码问题现象部分中文乱码解决在返回结果前强制UTF-8编码校验5. 发布与使用5.1 打包技能clawhub skill pack --outputimage2md.claw5.2 安装到OpenClawclawhub install ./image2md.claw openclaw gateway restart5.3 实际使用示例现在可以通过自然语言指令调用该技能请将~/Downloads/meeting_notes.png转换成Markdown文档并保存到~/Documents/transformed.mdOpenClaw会自动定位图片文件调用Phi-3-vision进行识别输出格式化文档保存到指定路径6. 进阶优化方向在实际使用两周后我发现几个值得改进的点首先是处理速度优化。对于包含大量文字的高清截图可以先用本地OCR进行初筛只将低置信度的区域交给大模型处理这样能减少约40%的Token消耗。其次是上下文记忆功能。当处理同一文档的多张截图时应该保持标题层级和术语的一致性这需要技能具备短期记忆能力。我通过在技能类中添加context属性实现了这个特性。最后是输出格式的定制化。不同用户可能偏好不同的Markdown风格比如有的喜欢表格用管道符有的偏好HTML表格。好的做法是在技能配置中增加样式选项。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。