claude code 如何更好的识别设计稿图片内容

发布时间:2026/7/2 11:59:24
claude code 如何更好的识别设计稿图片内容 Linux环境安装图像MCP服务终端执行# 全局安装图片查看MCP claude mcp add --scope user image-viewer -- cmd /c npx -y inchat-image-viewer-mcp # 项目局部安装仅当前文件夹生效 claude mcp add --scope project image-viewer -- cmd /c npx -y inchat-image-viewer-mcp验证 MCP 连通进入claude code输入/mcp列表出现image-viewer ✅ Connected即配置成功设计稿提示词apps\blade\src\assets\images\智识广场.png 精细识别图片内全部UI元素按钮、输入框、尺寸、颜色、文字、布局、间距 输出结构化JSON记录所有组件属性然后生成完整可运行Vue3Tailwind代码还原视觉细节。错误合集如何安装完图像后/mcp出现的是“image-viewer · ✘ failed”则说明你用了cmd /c npx但当前环境是WSL UbuntuLinux 子系统WSL 里没有cmd.exe执行时直接抛出spawn cmd ENOENTMCP 进程瞬间退出状态显示 failedcmd /c只适用于原生 Windows CMD/PowerShell完全不兼容 WSL。修复步骤按顺序执行删除错误的 image-viewer 配置claude mcp remove --scope project image-viewer用 WSL Linux 原生命令重新添加去掉 cmd /cclaude mcp add --scope project image-viewer -- npx -y inchat-image-viewer-mcp前置校验确保 WSL 内 node/npx 可用npx -y inchat-image-viewer-mcp重启 Claude Code 会话验证连通/mcp正常结果image-viewer · ✅ Connected