mcpField
G
gemini-image

gemini-image

github.com/johnlindquist创意与媒体261.2k 次安装45 周前更新
代码仓库

关于 gemini-image

通过 Gemini CLI 使用 Gemini Pro 的视觉能力分析图像的技能，涵盖图像描述、OCR、界面与错误截图分析、图表理解和图像比较。

主要功能

  1. 01分析一张或多张图像
  2. 02提取图中文字和代码
  3. 03检查界面与错误截图
  4. 04解读图表和示意图
  5. 05比较修改前后的图像
  6. 06生成设计反馈和文档

适用场景

  1. 01读取截图中的文字
  2. 02排查截图显示的错误
  3. 03提取图表数据
  4. 04评审设计或比较不同版本

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/johnlindquist/claude --skill gemini-image

安装后在 Claude Code 中输入/gemini-image确认已加载。

详细介绍

Gemini 图像分析

使用 Gemini Pro 的视觉能力分析图像。

前提条件

pip install google-generativeai
export GEMINI_API_KEY=your_api_key

CLI 参考

基本图像分析
# Analyze an image
gemini -m pro -f /path/to/image.png "Describe this image in detail"

# With specific question
gemini -m pro -f screenshot.png "What error message is shown?"

# Multiple images
gemini -m pro -f image1.png -f image2.png "Compare these two images"

分析操作

通用描述
gemini -m pro -f image.png "Describe this image comprehensively:
1. Main subject/content
2. Colors and composition
3. Text visible (if any)
4. Context and purpose
5. Notable details"
提取文本（OCR）
gemini -m pro -f screenshot.png "Extract all text from this image.
Format as plain text, preserving layout where possible.
Include any text in buttons, labels, or UI elements."
根据截图生成代码
gemini -m pro -f code-screenshot.png "Extract the code from this screenshot.
Provide as properly formatted code with correct indentation.
Note any parts that are unclear or partially visible."
UI 分析
gemini -m pro -f ui-screenshot.png "Analyze this UI:
1. What application/website is this?
2. What page/screen is shown?
3. Main UI elements and their purpose
4. User flow/actions available
5. Any UX issues or suggestions"
错误分析
gemini -m pro -f error-screenshot.png "Analyze this error:
1. What error is shown?
2. What is the likely cause?
3. How to fix it?
4. Any related information visible?"
图表理解
gemini -m pro -f diagram.png "Explain this diagram:
1. What type of diagram is this?
2. Main components and their relationships
3. Data/process flow
4. Key takeaways"

特定用例

调试截图
gemini -m pro -f debug-screen.png "I'm debugging an issue. From this screenshot:
1. What is the current state?
2. What errors or warnings are visible?
3. What should I look at?
4. Suggested next steps"
对比前后变化
gemini -m pro -f before.png -f after.png "Compare these before and after images:
1. What changed?
2. Is this an improvement?
3. Any issues in the 'after' version?
4. Anything missing?"
设计反馈
gemini -m pro -f design.png "Provide design feedback:
1. Visual hierarchy
2. Color usage
3. Typography
4. Spacing and alignment
5. Accessibility concerns
6. Suggestions for improvement"
数据提取
gemini -m pro -f chart.png "Extract data from this chart:
1. Chart type
2. Data series and values
3. Axes labels and ranges
4. Key trends or insights
5. Output as structured data if possible"
表单分析
gemini -m pro -f form.png "Analyze this form:
1. Form purpose
2. Fields and their types
3. Required vs optional
4. Validation rules visible
5. UX suggestions"

工作流模式

从截图创建问题
# Capture screenshot (macOS)
screencapture -i /tmp/bug.png

# Analyze and format as issue
gemini -m pro -f /tmp/bug.png "Create a bug report from this screenshot:

## Summary
[One-line description]

## Steps to Reproduce
[Inferred from screenshot]

## Expected Behavior
[What should happen]

## Actual Behavior
[What the screenshot shows]

## Environment
[Any visible system info]"
从 UI 生成代码
gemini -m pro -f ui-design.png "Generate React component code that recreates this UI:
- Use Tailwind CSS for styling
- Make it responsive
- Include proper TypeScript types
- Add appropriate accessibility attributes"
文档编写
gemini -m pro -f app-screen.png "Write user documentation for this screen:
- What this screen is for
- How to use each feature
- Common tasks
- Tips and notes"

支持的图像类型

  • PNG、JPEG、GIF、WebP
  • 截图
  • 照片
  • 图表和示意图
  • UI 模型图
  • 代码片段
  • 文档

最佳实践

  1. 使用清晰的图像——图像质量越高，分析效果越好
  2. 裁剪到相关区域——移除不必要的上下文
  3. 提出具体问题——提示词越模糊，回答越模糊
  4. 提供上下文——告诉 Gemini 你想查找什么
  5. 核实提取的文本——OCR 并非完美无误
  6. 从多个角度观察——对于复杂主题，请使用多张图像

评论

支持 Markdown