Claude Code Vision Skill

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

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

截图直贴，所见即所析

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

串联工具链，自动 UI 审查

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

支持的模型

Provider	模型	API Key 环境变量
豆包 (Doubao)	doubao-seed-2-0-pro-260215	DOUBAO_API_KEY
通义千问 (Qwen)	qwen-vl-max	DASHSCOPE_API_KEY
DeepSeek	deepseek-v4-flash-vision-exp	DEEPSEEK_API_KEY
OpenAI	gpt-4o	OPENAI_API_KEY
Claude (Anthropic)	claude-sonnet-5	ANTHROPIC_API_KEY
任意自定义 provider	任意	{NAME}_API_KEY

不在上面内置厂商里的 --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 / deepseek / 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 是否已有 `` 标记
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 DEEPSEEK_API_KEY="your_key"    # DeepSeek
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

免费供应商速查

不想为豆包/Qwen/OpenAI/Claude 任何一个申请付费 key？下面这些渠道提供免费视觉模型，注册即可用，按上面"自定义 provider"的三个环境变量接入即可。额度随时可能调整，使用前请自行到官网核实，此表仅供起步参考：