Claude Code Vision Skill

为 Claude Code 提供多模态视觉能力，支持多种视觉模型分析截图、UI、图表。

专为使用 DeepSeek 等无多模态能力的模型作为 Claude Code 底座的用户设计。

截图直贴，所见即所析

遇到 UI 报错、设计稿或数据图表？直接 alt + v 截图粘贴到 Claude Code 对话中，自动调用视觉模型分析。无需记住任何命令，像聊天一样自然。

串联工具链，自动 UI 审查

配合 browser-harness 等工具，可实现自动截图 → AI 视觉分析 → 生成审查报告 → 修正页面的完整闭环。前端页面渲染后自动截图，由视觉模型检查布局、样式和交互问题。

支持的模型

不在上面四个内置厂商里的 --provider 名字，会按同一套命名约定动态解析：设置 {NAME}_API_KEY / {NAME}_BASE_URL / {NAME}_MODEL（{NAME}_PROTOCOL 可选， 默认 openai，需要 Anthropic Messages API 形状时设为 anthropic），无需改一行代码即可接入任意 OpenAI 兼容端点（vLLM、Ollama、LiteLLM、OpenRouter、Azure OpenAI、自建代理等）。详见 vision/SKILL.md。

安装依赖

需要 Python 3.10+。

pip install -r requirements.txt

anthropic 包仅在使用 --provider anthropic 时才会被导入，其他 provider 不受影响。

Claude Code 安装流程（给 Claude Code 看的指令）

When the user asks you to install this skill, follow these steps IN ORDER. Do NOT skip any step.

Step 1 — 询问用户

使用 AskUserQuestion 询问以下信息：

1. 选择 provider：doubao / qwen / openai / anthropic / 自定义（可多选；自定义需额外要 base URL、model，可选 protocol）
2. API Key：每个 provider 的 API key
3. 默认 provider（多选时）：选哪个作为默认

Step 2 — 运行安装脚本

python install.py \
  --api-key qwen:sk-xxx \
  --default-provider qwen \
  --merge-claude

--api-key 可重复，--merge-claude 必须带上。

如果用户选了自定义 provider，额外带上 --base-url / --model（--protocol 可选，默认 openai）：

python install.py \
  --api-key myapi:sk-xxx \
  --base-url myapi:https://host/v1 \
  --model myapi:my-vision-model \
  --default-provider myapi \
  --merge-claude

Step 3 — 合并 CLAUDE.md（如果 install.py 未自动完成）

如果未使用 --merge-claude，则手动合并：

1. 读取项目根目录的 CLAUDE.md
2. 检查 ~/.claude/CLAUDE.md 是否已有 <!-- === VISION_SKILL_START === --> 标记
3. 如果有标记 → 替换标记之间的内容
4. 如果没有标记 → 追加到文件末尾（带标记）
5. 此步骤不可跳过

Step 4 — 验证安装

python ~/.claude/skills/vision/vision.py --help

手动安装

# 交互式安装（你自己操作时）
python install.py

# 预览
python install.py --dry-run

手动配置环境变量

# 至少设置一个
export DOUBAO_API_KEY="your_key"      # 豆包
export DASHSCOPE_API_KEY="your_key"   # 通义千问
export OPENAI_API_KEY="your_key"      # OpenAI
export ANTHROPIC_API_KEY="your_key"   # Claude

# 可选
export VISION_PROVIDER=qwen           # 默认 provider
export VISION_MODEL=qwen-vl-max       # 覆盖模型

自定义 provider（不在内置四个之列）按 {NAME}_* 命名约定注册，无需改代码：

export MYAPI_API_KEY="your_key"
export MYAPI_BASE_URL="https://your-endpoint.example.com/v1"
export MYAPI_MODEL="your-vision-model"
export MYAPI_PROTOCOL="openai"        # 可选，openai(默认) 或 anthropic

模型切换路由（VISION_ROUTING）

通过 CC Switch 等代理在 DeepSeek 之类纯文本模型和原生多模态模型之间切换时，Claude Code 无法感知真实连接的是哪个模型——代理把请求伪装成 Anthropic API 协议转发，这层转换对 Claude Code 不可见。路由判断按以下优先级依次进行：

1. 内置纯文本模型黑名单（当前覆盖 DeepSeek、Qwen3-Coder、GLM-4.5/4.6、GLM-5.x、Kimi K2 的纯文本版本、Devstral）：ANTHROPIC_MODEL 命中时始终强制 external，优先级最高，即使 下面几条都指向别的结果也不例外。黑名单用正则匹配，因为个别厂商的多模态版本和纯文本版本 共享同一前缀（例如 GLM 的 glm-4.6 vs glm-4.6v、Kimi 的 kimi-k2-thinking vs kimi-k2.6），正则排除了这些多模态变体，避免误伤。黑名单只会让判断更保守（多调用），不会 让它更激进（漏检）——未命中的新模型永远不会被静默推断成 native。
2. 显式 VISION_ROUTING：设置了就按你说的来（native 或 external），优先于下面的自动判断。
3. 未设置 ANTHROPIC_BASE_URL，或指向官方 api.anthropic.com → 自动判定为 native。 这不是猜测：Anthropic 官方 API 不提供纯文本模型，只要没有代理把这个地址改写指向别处， 后端就一定是原生多模态的，结构上可以确定，不需要用户手动声明。
4. ANTHROPIC_BASE_URL 指向其他地址、且以上都不适用 → external。这才是真正"身份不可 验证"的情况（CC Switch 之类代理在中间转发，模型名字不可信），保持默认安全。

安装时会自动注册一个 Claude Code SessionStart hook，每次会话开始都会用当前环境变量重新判断一次路由， 不需要切换厂商后重跑 install.py，也不需要任何手动开关。判断逻辑集中在 vision.py 一处 （resolve_routing()），CLAUDE.md 和 SKILL.md 都不感知具体路径或黑名单细节。

export VISION_ROUTING=native     # 强制原生（即使检测不到官方 base URL）
export VISION_ROUTING=external   # 强制外部（即使检测到官方 base URL，比如做对比测试）

使用方式

python ~/.claude/skills/vision/vision.py "screenshot.png" "描述这张图"
python ~/.claude/skills/vision/vision.py --provider qwen "ui.png" "分析布局问题"
python ~/.claude/skills/vision/vision.py --provider anthropic "ui.png" "分析布局问题"
python ~/.claude/skills/vision/vision.py --provider myapi "ui.png" "分析布局问题"

项目结构

vision/                # skill 目录
├── SKILL.md           # skill 定义
└── vision.py          # 多 provider 视觉脚本

tests/                 # pytest 测试套件
install.py             # 安装脚本
CLAUDE.md              # UI 检查流程模板（合并到 ~/.claude/CLAUDE.md）
README.md              # 本文件
requirements.txt       # 运行依赖
requirements-dev.txt   # 测试依赖

Star History