1. 增长运营用 diagram-design 画漏斗图先卡在 TaoToken 的 Base URL上周给增长团队做 Q2 转化复盘我用 diagram-design 画漏斗图卡在 AI 编程工具一直连不上模型Skill 装好了但生成 HTML 时请求超时。排查一圈发现是模型 Base URL 没切到 TaoTokenKey 也没在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentfunnel_intro 里生成。把地址改成 https://taotoken.net/api 后输入阶段和数量不到一分钟就拿到了漏斗图 HTML再导出 PNG 塞进复盘文档。这个经历挺典型不是 diagram-design 不好用而是很多人忽略了 AI 编程工具背后的模型接入层。尤其增长运营做转化分析手里有漏斗数据却卡在绘图 Skill 和模型供应商之间。增长运营画漏斗图图的不是好看是让团队一眼看到钱漏在哪一层。访问落地页、注册、创建项目、邀请同事、升级付费每一层流失多少、转化率多少、哪一步最值得优化都要在一张图里说清楚。以前我的做法是 Excel 拉数据PPT 拼形状调颜色调到怀疑审美最后发出来的图还经常被吐槽“字太小”“重点不突出”。diagram-design 这类绘图 Skill 的价值是把一套克制的视觉规则固化下来一个强调色、无阴影、细边框、间距统一生成单文件 HTML能导出 SVG 和 PNG。但它需要挂在 AI 编程工具上而 AI 编程工具需要模型服务。模型服务没接稳Skill 再强也画不出来。所以这篇不讲空泛的“AI 提效”只讲一条可复现路径用 diagram-design 做漏斗图用 TaoToken 改模型地址从拿 Key 到输出 HTML再到导出 PNG。视角就是增长运营做转化分析输入阶段和数量输出漏斗图 HTML并导出 PNG。中间涉及的配置以 Claude Code、Codex、CC Switch 为主命令都可以本地复现。2. 生成漏斗图前先到 TaoToken 官网拿 Key 并确认 Base URL不管用 Claude Code 还是 Codexdiagram-design 只是“画图 Skill”真正执行推理和代码生成的是背后的模型。你要做的第一件事不是写 prompt而是把模型供应商接好。路径不复杂打开 TaoToken 官网登录创建 API Key然后把工具里的 Base URL 指向 https://taotoken.net/api。具体步骤可以按下面走打开 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentfunnel_key_setup 。注册或登录账号进入控制台。找到 API Keys 管理页创建一个新的 Key。复制 Key后面统一用YOUR_API_KEY占位实际使用时替换成你自己的。在支持 Anthropic 或 OpenAI 兼容协议的工具里把 Base URL 填成https://taotoken.net/api。模型名不要凭记忆写去模型对话页或控制台看当前可用的模型 ID。这里有一个容易踩的坑Base URL 不要带 UTM 参数。https://taotoken.net/api是给工具配置用的不是给浏览器点开的。浏览器访问官网时再用带utm_source和utm_content的链接。两者别混。如果你想先验证 Key 和地址是否通可以在本地终端用 curl 做一次最小请求。注意这条命令只是测试模型端点不涉及任何生产数据库curl -X POST https://taotoken.net/api/v1/messages \ -H x-api-key: YOUR_API_KEY \ -H anthropic-version: 2023-06-01 \ -H content-type: application/json \ -d { model: YOUR_MODEL_ID, max_tokens: 64, messages: [ {role: user, content: ping} ] }如果返回正常内容说明 Key 和 Base URL 基本可用。如果返回 401优先检查 Key 是否复制完整、是否多了空格、请求头是否正确。如果返回模型不存在就去 TaoToken 控制台确认模型 ID。增长运营不需要背模型参数但至少要保证“能调通”否则后面 diagram-design 的 prompt 写得再清楚也没用。3. Claude Code 接入 TaoTokensettings.json 里的 ANTHROPIC_* 怎么写Claude Code 是我用来跑 diagram-design 的主要工具。它读的是 Anthropic 兼容配置所以模型地址要写进ANTHROPIC_BASE_URLKey 写进ANTHROPIC_AUTH_TOKEN或对应环境变量。最稳的方式是改~/.claude/settings.json也可以放在项目级.claude/settings.json里只对当前项目生效。一个可以复制的配置示例如下{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: YOUR_MODEL_ID, ANTHROPIC_SMALL_FAST_MODEL: YOUR_FAST_MODEL_ID } }这里的YOUR_MODEL_ID和YOUR_FAST_MODEL_ID不是固定值按 TaoToken 控制台当前可用的模型来填。ANTHROPIC_BASE_URL只填https://taotoken.net/api不要在后面拼接奇怪路径也不要把官网 UTM 链接复制进去。很多人配置失败就是把浏览器地址栏的链接直接粘到了 Base URL。如果你不想改全局配置也可以临时用环境变量启动。macOS 或 Linux 可以这样export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_AUTH_TOKENYOUR_API_KEY export ANTHROPIC_MODELYOUR_MODEL_ID export ANTHROPIC_SMALL_FAST_MODELYOUR_FAST_MODEL_ID claudeWindows PowerShell 可以这样$env:ANTHROPIC_BASE_URLhttps://taotoken.net/api $env:ANTHROPIC_AUTH_TOKENYOUR_API_KEY $env:ANTHROPIC_MODELYOUR_MODEL_ID $env:ANTHROPIC_SMALL_FAST_MODELYOUR_FAST_MODEL_ID claude配好之后重启 Claude Code。验证方式很简单在对话里问一句“当前使用的 Base URL 是什么”或者看启动日志里有没有报鉴权错误。能正常对话再装 diagram-design Skill。diagram-design 的安装方式以项目 README 为准不同版本的放置目录可能不同。核心是让 Claude Code 能发现这个 Skill。通常可以把它放到类似~/.claude/skills/diagram-design的目录下然后在 Claude Code 里用技能列表确认是否加载。你可以先用下面命令检查目录mkdir -p ~/.claude/skills cd ~/.claude/skills ls -la如果 Skill 列表里能看到 diagram-design就可以开始画漏斗图了。第一次在新项目里使用它可能会问你要不要做品牌适配。对增长运营来说这个功能很实用让它读取你的官网或品牌色之后漏斗图的强调色、背景色、字体都会统一放进复盘文档和 PPT 里不突兀。4. Codex 接入 TaoTokenconfig.toml 不要套 ANTHROPIC_*如果你用 Codex配置逻辑和 Claude Code 不一样。Codex 读config.toml不要写ANTHROPIC_BASE_URL也不要套 Claude Code 的环境变量。正确做法是新增一个 model provider把base_url指向 TaoToken。一个可以改的config.toml示例如下model YOUR_MODEL_ID model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api chat这里的wire_api按你所用 Codex 版本和模型兼容协议来选常见有chat和responses两种。不要因为 Claude Code 用 Anthropic 协议就以为 Codex 也要写 Anthropic 变量。Codex 有自己的一套 provider 配置混用只会增加排障成本。然后在本地设置环境变量export TAOTOKEN_API_KEYYOUR_API_KEYWindows PowerShell$env:TAOTOKEN_API_KEYYOUR_API_KEY重启 Codex让它重新读取配置。之后在 Codex 里调用 diagram-design 画漏斗图请求会走 TaoToken 的https://taotoken.net/api。如果你同时用 Claude Code 和 Codex建议把两套配置分开管理Claude Code 管ANTHROPIC_*Codex 管config.toml TAOTOKEN_API_KEY。别把 Key 写进 Git 仓库也不要提交到公开项目里。5. CC Switch 三件套把 TaoToken 配成增长分析项目默认供应商如果你经常在 Claude Code、Codex、其他编程工具之间切换手动改配置文件很烦。CC Switch 这类切换工具可以帮你管理供应商。对 TaoToken 来说核心就是“三件套”名称、API Key、Base URL。配置项建议值供应商名称TaoTokenAPI KeyYOUR_API_KEYBase URLhttps://taotoken.net/api模型按 TaoToken 控制台当前可用模型选择适用工具Claude Code / Codex / 其他兼容工具在 CC Switch 里新增供应商后切到 TaoToken再启动对应的 AI 编程工具。注意CC Switch 只是帮你写配置或切环境变量底层规则仍然要遵守Claude Code 走ANTHROPIC_*Codex 走config.toml和TAOTOKEN_API_KEY。如果你在 CC Switch 里看到一个“Base URL”输入框填https://taotoken.net/api即可不要加 UTM。对增长运营来说这个配置的意义是做周报、月报、复盘时可以快速切到稳定模型把 diagram-design 的漏斗图 prompt 跑起来。不用每次画图前都重新检查 Key 和地址。6. 可复现漏斗图输入阶段和数量让 diagram-design 输出 HTML现在进入正题用 diagram-design 画一张增长转化漏斗图。假设我们做的是 SaaS 产品阶段和数量如下访问落地页12000注册账号3600创建首个项目1800邀请同事750升级付费220先算转化率。12000 到 3600 是 30%3600 到 1800 是 50%1800 到 750 约 41.7%750 到 220 约 29.3%。整体从访问到付费是 220 / 12000约 1.83%。这些数字就是漏斗图的骨架。在 Claude Code 或 Codex 里可以这样写 prompt请调用 diagram-design 的漏斗图模板生成一张单文件 HTML。 主题SaaS 增长转化漏斗 数据 访问落地页 12000 注册账号 3600 创建首个项目 1800 邀请同事 750 升级付费 220 要求 1. 每层显示绝对数量、从上一步转化率、整体转化率 2. 标出每层流失数量 3. 使用浅色极简样式只保留一个强调色 4. 无阴影边框 1px圆角不超过 10px 5. 页面内提供导出 PNG 和导出 SVG 的按钮或说明 6. 输出文件名 funnel-saas.html。如果你已经做过品牌适配可以补一句使用我的品牌色主色 #1F2937正文 #111827强调色 #F97316背景 #FFFFFF。生成完成后你会在当前项目目录下看到funnel-saas.html。双击用浏览器打开检查这几项每一层数量是否和输入一致转化率计算是否正确流失数量是否标清楚强调色是否只有一个文字有没有重叠尤其是小屏宽度下图例和标题是否完整。diagram-design 的审美规则里有一条很关键最高质量的操作通常是删除。漏斗图不要堆太多装饰节点要少而准标签要短。增长运营很容易想把所有细分渠道都塞进去结果图变成一团。我的建议是一张漏斗图只讲一个主流程渠道对比另开一张图或一张表。7. 导出 PNG本地命令与排版检查diagram-design 输出 HTML 后导出 PNG 有两种方式。第一种是直接打开 HTML用页面自带的导出按钮。第二种是用本地无头浏览器截图适合批量处理。下面给一个 Python Playwright 的本地脚本命令由你在自己电脑上执行。先安装依赖pip install playwright playwright install chromium然后新建export_funnel.pyfrom playwright.sync_api import sync_playwright html_path file:///你的绝对路径/funnel-saas.html with sync_playwright() as p: browser p.chromium.launch() page browser.new_page( viewport{width: 1600, height: 1200}, device_scale_factor2 ) page.goto(html_path, wait_untilnetworkidle) page.screenshot(pathfunnel-saas.png, full_pageTrue) browser.close()运行python export_funnel.py这样会得到 2 倍清晰度的funnel-saas.png放进 CSDN 文章、PPT 或复盘文档都够用。如果你需要继续在 Figma 里改就导出 SVG。导出后检查 PNG 是否被截断尤其是漏斗底部和右侧标签。如果发现字体没加载完就截图可以把networkidle换成固定等待几秒或者先手动打开 HTML 确认渲染完成。增长运营做转化分析图最终是给业务方看的。所以导出 PNG 后最好再检查三件事第一标题是否直接说明了时间段和业务线第二最大流失层是否被视觉强调第三图里有没有暴露用户隐私字段。不要把用户 ID、手机号、订单号画进图里。8. 排障Skill 不触发、401、模型名错误、漏斗比例不对配置和生成过程中常见问题基本集中在几类。第一Skill 不触发。你在 prompt 里说了“画漏斗图”但 AI 没有调用 diagram-design。解决方式是明确写“使用 diagram-design 的漏斗图模板”并确认 Skill 已安装到工具能识别的目录。装完后重启 Claude Code 或 Codex。第二401 或鉴权失败。检查YOUR_API_KEY是否替换Key 是否复制完整环境变量是否在启动工具前生效。Claude Code 看ANTHROPIC_AUTH_TOKENCodex 看TAOTOKEN_API_KEY两者不要混。第三Base URL 错误。Claude Code 的ANTHROPIC_BASE_URL填https://taotoken.net/apiCodex 的base_url也填https://taotoken.net/api。不要带 UTM不要带/v1/messages这种具体路径具体路径由工具自己拼接。第四模型名错误。不要凭记忆写模型 ID去 TaoToken 控制台或模型对话页看当前可用模型。模型名写错时通常会报模型不存在或权限不足。第五漏斗比例不对。先确认输入数量是否逐层递减再确认转化率公式是“当前层 / 上一层”还是“当前层 / 第一层”。整体转化率要用最后一层除以第一层。如果数据里有重复用户或跨周期归因先在本地用 SQL 聚合清楚。SQL 由你在本地数据库执行不要把生产库连接串直接交给 AI 工具也不要用 MCP 或 Agent 直连 Oracle、生产库。第六导出 PNG 空白或截断。等页面渲染完成再截图viewport 宽度给足full_page 打开。如果 HTML 里有动画先关掉动画或等动画结束。第七品牌适配失败。如果让它抓官网配色失败可以直接把品牌色值写进 prompt。增长运营不需要懂设计系统但给几个十六进制色值并不难。9. 文末 CTA模型对话 → Coding Plan → 创建 Key → Claude Code 文档如果你也想用 diagram-design 做漏斗图先把模型地址接稳。TaoToken 官网入口在这里https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentfunnel_final 。建议按下面顺序走一遍少绕路先看模型对话确认可用模型和效果https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentfunnel_chat如果你经常用编程工具跑 Skill可以看 Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentfunnel_coding_plan然后创建 API Key替换配置里的YOUR_API_KEYhttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentfunnel_api_keysClaude Code 用户最后对照文档检查ANTHROPIC_BASE_URL和settings.jsonhttps://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentfunnel_claude_code_doc回到增长运营的场景你手里有阶段和数量diagram-design 负责把漏斗图画得克制、清楚TaoToken 负责把模型地址和 Key 接好。配置一次后面每周复盘都能复用。输入 12000、3600、1800、750、220输出一张漏斗图 HTML再导出 PNG这件事就能从“卡一小时”变成“几分钟跑完”。