企业官网建设流程全解析

1. 为什么我要在 Claude Code 里塞一个出图 Skill

Claude Code 本身是个终端里的编码 Agent，能读文件、跑命令、改代码，但它默认不会画图。Nano Banana Pro 是图像生成模型，出图质量不错，尤其适合做封面、流程图、信息图这类设计物料。问题在于：每次出图都要手动拼提示词、调参数、下载图片、检查文字有没有写错，改一版风格全变，再改文字成乱码，来回折腾四五次才能用。

我想要的不是「再打开一个网页工具」，而是「在 Claude Code 里说一句话，图就出来了」。这就需要 Skill 机制：把 Nano Banana Pro 的 API 调用、提示词模板、出图后的自检逻辑，全部封装成一个 Claude Code 能识别的技能包。你说「画一张讲 Skill 机制的封面图」，Claude Code 自动读 Skill 配置、调 API、拿回图片、检查文字、不对就重试，最后把成品路径告诉你。

适合谁？经常写技术文章需要配图的人、做产品文档要出流程图的人、以及想让 Agent 帮自己跑完整设计链路的人。下面我从零开始，把 Skill 配置文件骨架、统一 Key/API 通道的 settings.json 片段、以及一句话触发出图的验证步骤全部给出来，你复制配置就能跑通。

2. 前置准备：TaoToken 统一 Key 与 API 通道

Claude Code 调外部模型 API 时，最烦的是每个模型一套 Key、一套 Base URL、一套鉴权头。TaoToken 的作用是把这些统一成一个入口：你拿一个 Key，配一个 Base URL，后面换模型只改模型名，不用改鉴权逻辑。对 Skill 来说，这意味着配置文件里只需要维护一份凭证，出图 Skill 和对话模型共用同一条通道。

先拿 Key。打开 https://taotoken.net/api-keys ，登录后创建一个 API Key，复制出来。这个 Key 同时用于 Claude Code 的模型对话和 Nano Banana Pro 的出图调用。注意不要把它写进 Git 仓库，后面我会用环境变量引用。

TaoToken 的 API 入口是 https://taotoken.net/api ，不带任何多余路径。Claude Code 的 settings.json 里配置ANTHROPIC_BASE_URL指向它，模型名按你实际用的填。如果你还没装 Claude Code，先按官方文档装好，能正常对话后再往下走。

注意：Key 只显示一次，复制后存到密码管理器或本地环境变量文件里。后面所有配置都通过$TAOTOKEN_API_KEY引用，不硬编码。

3. Skill 配置文件骨架：让 Claude Code 认识出图能力

Claude Code 的 Skill 放在~/.claude/skills/目录下，每个 Skill 一个文件夹，里面至少有一个SKILL.md描述技能用途和调用方式，外加可选的脚本或配置文件。我这里的出图 Skill 叫nano-banana-image，目录结构如下：

~/.claude/skills/nano-banana-image/ ├── SKILL.md ├── config.json └── generate.py

SKILL.md是给 Claude Code 看的说明书，告诉它这个 Skill 能干什么、什么时候触发、参数怎么传。内容骨架：

--- name: nano-banana-image description: 调用 Nano Banana Pro 生成图像，支持封面、流程图、信息图。当用户说“画一张”“出图”“生成封面”时触发。 --- # Nano Banana Pro 出图 Skill ## 用途 根据自然语言描述生成图像，自动检查图中文字是否正确，不对则重试。 ## 调用方式 运行 `python generate.py --prompt "描述" --output "输出路径"` ## 参数 - prompt: 图像描述，必填 - output: 输出文件路径，默认 ./output.png - size: 图像尺寸，默认 1024x1024

config.json存 API 通道和默认参数，Key 从环境变量读：

{ "api_base": "https://taotoken.net/api", "api_key_env": "TAOTOKEN_API_KEY", "model": "nano-banana-pro", "default_size": "1024x1024", "max_retries": 3 }

generate.py是实际干活的脚本，负责拼请求、调 API、保存图片、返回结果。核心逻辑：

import os, json, requests, sys, argparse def load_config(): with open(os.path.join(os.path.dirname(__file__), "config.json")) as f: return json.load(f) def generate(prompt, output, size): cfg = load_config() api_key = os.environ.get(cfg["api_key_env"]) if not api_key: raise RuntimeError("缺少环境变量 " + cfg["api_key_env"]) resp = requests.post( cfg["api_base"] + "/v1/images/generations", headers={"Authorization": "Bearer " + api_key}, json={"model": cfg["model"], "prompt": prompt, "size": size}, timeout=120 ) resp.raise_for_status() data = resp.json() img_url = data["data"][0]["url"] img = requests.get(img_url, timeout=120) with open(output, "wb") as f: f.write(img.content) return output if __name__ == "__main__": p = argparse.ArgumentParser() p.add_argument("--prompt", required=True) p.add_argument("--output", default="./output.png") p.add_argument("--size", default="1024x1024") args = p.parse_args() print(generate(args.prompt, args.output, args.size))

这段脚本只做一件事：拿 prompt 调 API，把返回的图片 URL 下载到本地。重试逻辑放在 Skill 层面，由 Claude Code 根据出图结果决定是否再调一次。

4. settings.json 片段：把 Key 和通道接进 Claude Code

Claude Code 的配置文件在~/.claude/settings.json。你需要把 TaoToken 的 Base URL 和 Key 配进去，让 Claude Code 的模型对话走这条通道。片段如下：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "你的TaoToken Key", "TAOTOKEN_API_KEY": "你的TaoToken Key" } }

ANTHROPIC_BASE_URL和ANTHROPIC_API_KEY让 Claude Code 的对话模型走 TaoToken；TAOTOKEN_API_KEY是给上面generate.py读的，两个 Key 是同一个，只是变量名不同。如果你不想把 Key 明文写在 settings.json 里，可以改成从 shell 环境变量继承：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "${TAOTOKEN_API_KEY}", "TAOTOKEN_API_KEY": "${TAOTOKEN_API_KEY}" } }

然后在~/.zshrc或~/.bashrc里加一行export TAOTOKEN_API_KEY="你的Key"，重启终端和 Claude Code。这样 Key 不进配置文件，也不怕误提交。

配完后重启 Claude Code，输入/skills看列表里有没有nano-banana-image。没有的话检查目录名和SKILL.md的name字段是否一致。

5. 验证请求：一句话触发出图并检查结果

配置就绪后，在 Claude Code 里直接说：

画一张讲 Claude Code Skill 机制的封面图，风格简洁，深色背景，中间写“Skill”大字

Claude Code 会识别到「画一张」触发词，读取nano-banana-imageSkill，调用generate.py，把 prompt 传进去。你会在终端看到类似输出：

正在调用 Nano Banana Pro... 图片已保存到 ./output.png

打开output.png检查。如果图中文字写错，比如「Skill」变成「Skil」，直接在 Claude Code 里说「文字错了，改成 Skill，其他不变」。Claude Code 会把修正后的 prompt 重新传给 Skill，再出一版。实测下来，把「文字必须准确」写进 prompt 模板后，一次成功率明显提高。

如果你想一次出多张，可以说「画三张不同风格的封面图」，Claude Code 会并行调三次 API，分别保存为output_1.png、output_2.png、output_3.png。这比一张张等快很多。

验证成功的标志：终端返回图片路径，打开图片内容符合描述，文字无误。到这一步，从描述到成图的链路就通了。

6. 本篇常见错排查

报错缺少环境变量 TAOTOKEN_API_KEY：说明generate.py没读到 Key。检查~/.zshrc里的 export 是否生效，echo $TAOTOKEN_API_KEY有没有输出。如果用的是 settings.json 明文配置，确认TAOTOKEN_API_KEY字段拼写正确。

报错401 Unauthorized：Key 无效或过期。去 https://taotoken.net/api-keys 重新生成一个，替换配置后重启 Claude Code。注意 Key 前后不要有空格。

报错404 model not found：config.json里的model字段和 TaoToken 支持的模型名不一致。检查模型名拼写，确认 Nano Banana Pro 在当前通道可用。

Skill 不触发：Claude Code 没识别到「画一张」这类触发词。检查SKILL.md的description里是否包含触发词，或者手动说「用 nano-banana-image Skill 画一张」。

图片保存成功但打不开：可能是下载了错误响应体。在generate.py里加一行打印resp.status_code和data，确认返回的是图片 URL 而不是错误 JSON。

文字反复写错：在 prompt 里明确写「图中文字必须为：XXX，不要改动」，并在 Skill 里加自检步骤——出图后让 Claude Code 读图确认文字，不对就重试。这是 Skill 相比手动出图最大的优势：经验可以沉淀，下次不用重新踩坑。

7. 把出图能力接进你的日常工作流

配好这个 Skill 后，你可以把它和写作 Skill 组合。比如你说「写一篇讲 API 网关的文章，配一张封面图」，Claude Code 先调写作 Skill 生成正文，再调出图 Skill 生成封面，最后把两个文件路径一起给你。整个过程你只说了一句话。

长期做编码或 Agent 开发的话，建议把常用 Skill 统一管理，Key 和通道走 TaoToken 一份配置。需要看模型对话效果就去 https://taotoken.net/model-chat ，需要管理 Key 就去 https://taotoken.net/api-keys ，接入文档在 https://taotoken.net/doc 。如果你打算把出图 Skill 用在持续集成或批量生成场景，可以看看 Coding Plan：https://taotoken.net/coding-plan ，把调用额度规划好，避免跑一半断掉。

我踩过的坑是：一开始把 Key 硬编码在generate.py里，换 Key 时改了三个文件。后来统一用环境变量，只改一处。另外 Skill 的description要写清楚触发词，不然 Claude Code 不知道什么时候该用它。把这两点做好，后面基本不用再动配置。