多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

FIGMA_TOKEN 不想进 mcp-settings.json?TaoToken 这样分开配 Claude Code 的模型 Key

FIGMA_TOKEN 不想进 mcp-settings.json?TaoToken 这样分开配 Claude Code 的模型 Key FIGMA_TOKEN明文写进mcp-settings.json是常见做法也是常见事故。TaoToken 的官网是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 本文要用的模型 Key 从那里创建Figma 的 Token 则继续待在系统环境变量里两把钥匙互不串门。很多人的配置坏就坏在混项目目录里放一份 MCP 配置顺手把 Figma 的个人 Token 粘进env过两天模型侧额度不够又把模型 Key 追加到同一个文件最后一份配置同时握着设计文件的读取权和模型调用的账单谁 clone 走都能用。这篇按原文的思路继续往下走Figma Token 该怎么做安全注入仍然用环境变量、加密配置、Vault、临时 Token 轮换这几条路多出来的一步是把 Claude Code 的模型请求接到 TaoToken 统一通道上让它和 Figma 的凭证彻底分家。读者读完应该能自己配出这样一份状态mcp-settings.json里搜不到任何真实密钥模型请求走https://taotoken.net/apiFigma 的读取权限只挂在当前用户的环境变量里撤销一个不影响另一个。1. FIGMA_TOKEN 留在 mcp-settings.json 里代价比想象中大1.1 一份配置进版本库等于把 Figma 读取权公开mcp-settings.json有的项目里叫.mcp.json天生是跟着项目走的文件它天然会被提交、被复制、被同步到各种 dotfiles 仓库。你把FIGMA_TOKEN写在它的env字段里就等于把一枚长期有效的设计文件读取凭证塞进了一个面向团队的文本文件。它不像.env至少还有被.gitignore挡住的默契很多人第一次写 MCP 配置时根本没意识到这个文件会跟着 git 走。更麻烦的是这枚 Token 的性质。Figma 的个人访问令牌默认是长期有效的除非你主动撤销它就一直能读你有权限的文件。一旦进了历史提交即使在后续 commit 里删掉git log -p依然能翻出来。清理历史比改一行配置贵得多所以正确做法不是事后删而是从一开始就不让它落进这个文件。1.2 模型 Key 混进来事故半径直接翻倍真正的坑往往出在第二步。Figma 这里配通了接下来想让 Claude Code 用上自己的模型通道顺手把模型 Key 也写进同一个env块理由是都在一个文件里好管理。这一下就把两类完全不同的凭证绑成了一根绳上的蚂蚱一个是第三方 SaaS 的数据读取权一个是模型调用的计费凭证撤销周期、泄露影响、轮换方式全都不一样。分开的好处很实在。模型 Key 换了你只改一处系统环境变量或者 Claude Code 的settings.jsonFigma 的 MCP 配置一个字都不用动反过来要撤销 Figma Token也不影响模型请求继续跑。下面这张表把两张凭证的边界摆清楚配之前先在心里过一遍后面就不会写错位置。项目Figma Token模型侧 Key用途让 MCP server 读 Figma 文件让 Claude Code 发模型请求作用范围单个 MCP server 进程Claude Code 全局或单项目存放位置系统环境变量FIGMA_TOKEN~/.claude/settings.json的envBase URL不涉及https://taotoken.net/api轮换方式撤销重建 重新 export控制台重新创建 改一处配置2. 两把钥匙分家模型侧接 TaoTokenFigma 侧留在系统环境2.1 先创建一把只服务模型请求的 Key打开 TaoToken 官网 注册登录后进控制台创建 API Key复制出来的这串值在本文里统一写成YOUR_API_KEY。注意它的职责边界它只负责 Claude Code 发出的模型请求不是 Figma Token不要用它去填mcp-settings.json里任何跟 Figma 有关的字段也不要把它写进项目目录。同一个控制台页面里能看到的模型列表就是你后面要填的模型 ID 来源。模型 ID 以官网模型广场当时展示的为准不要凭记忆写一个带日期后缀的名字那种拼错通常不会报模型不存在而是直接给你一个看不懂的错误码排查起来很浪费时间。2.2 把 Claude Code 的模型侧指到 https://taotoken.net/apiClaude Code 读环境变量的优先级比较清晰~/.claude/settings.json里的env块会作为进程环境注入比在 shell 里临时 export 更稳定也更适合长期使用。三个关键字段分别是ANTHROPIC_BASE_URL、ANTHROPIC_AUTH_TOKEN、ANTHROPIC_MODEL值按下面的格式填。{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: YOUR_API_KEY, ANTHROPIC_MODEL: YOUR_MODEL_ID } }BASE_URL这一栏只写到https://taotoken.net/api就够了末尾不要再补/v1。这是最常见的自伤操作多写一段路径请求就会打到不存在的路由上返回的往往是 404 而不是鉴权失败于是你会误以为 Key 有问题去控制台反复重建 Key。把地址和 Key 分清楚一个是打给谁一个是你是谁出错时先怀疑哪个心里要有数。2.3 FIGMA_TOKEN 放系统环境不放项目文件Figma 那一侧做法和原文一致把 Token 放进当前用户的环境变量让它成为 Claude Code 启动 MCP server 时的子进程环境。macOS 和 Linux 写进~/.zshrc用 bash 就是~/.bashrcWindows 走用户级环境变量。这一步之后FIGMA_TOKEN的真实值只存在于你的用户配置里项目目录里任何一个文件都不该出现它。# ~/.zshrc # 只给 Figma MCP 用的只读 Token和模型 Key 完全无关 export FIGMA_TOKENfigd_你的个人访问令牌写完之后执行source ~/.zshrc或者干脆关掉终端重新开一个。这里有个容易忽略的细节如果你是在已经打开的 Claude Code 会话里改的环境变量那个会话是拿不到新值的因为环境在进程启动那一刻就固定了。改完环境变量先退出再重进这个动作能省掉至少半个小时明明配了却读不到的排查。3. 让 mcp-settings.json 只引用 ${FIGMA_TOKEN}3.1 macOS / Linux 下的引用式写法配置文件里保留一个占位引用形如${FIGMA_TOKEN}真实值由父进程环境提供。这样文件可以放心提交、放心分享给同事别人拿到之后只需要在自己的环境变量里放一枚属于自己的 Token不需要改任何一行配置。{ mcpServers: { figma: { command: npx, args: [-y, figma-developer-mcp, --stdio], env: { FIGMA_TOKEN: ${FIGMA_TOKEN} } } } }上面command和args按你实际安装的 Figma MCP server 写不同实现包名不一样照抄包名比照抄路径更靠谱。关键在于env里只出现变量名不出现figd_开头的任何真实字符串。你可以在提交前用一条命令自查在项目根目录搜一下figd_搜不到才算过关。提示不同版本的 Claude Code 对${}展开的支持略有差异。如果你的版本不展开就把env里这一行删掉让 MCP server 直接继承父进程已有的FIGMA_TOKEN效果一样配置更短。3.2 Windows 用户变量与终端重启Windows 上推荐用用户级环境变量而不是系统级避免影响其他账户。图形界面在系统属性 → 环境变量 → 用户变量里新建一条FIGMA_TOKEN命令行里可以用setx注意它写的是持久变量不是当前会话。# 写入用户级环境变量持久执行后需要新开一个终端 setx FIGMA_TOKEN figd_你的个人访问令牌setx有一个经典误区它不会更新当前已经打开的终端窗口。你会看到设置成功的提示然后在同一个窗口里 echo 出空值接着怀疑人生。正确顺序是先执行setx再关掉所有终端包括编辑器内嵌的终端和正在跑的 Claude Code重新打开后再验证。3.3 顺手把两个变量的验证做一遍配置写完别急着让 Claude Code 干活先做一次纯环境检查。这一步不涉及网络请求纯看你自己的机器配得对不对。# Figma 侧应该打印出一串以 figd_ 开头的值 echo ${FIGMA_TOKEN:0:5} # 模型侧确认 Claude Code 读到的 base url 没有多余的 /v1 grep -n ANTHROPIC_BASE_URL ~/.claude/settings.json第一条命令只截前五个字符既不泄露完整 Token 又能确认变量存在。第二条是给自己看的https://taotoken.net/api后面多一个斜杠还是多一段/v1肉眼一比对就清楚了。两件事都确认再进下一步效率比先跑起来再猜哪里错高得多。4. 加密配置、Vault、临时 Token另外三条注入路线4.1 加密的 .envage 或 sops 解到内存再 export如果你更习惯用.env管变量那就给它加一层加密把一个secrets.env.age之类的密文文件放进仓库解密结果只往环境里写不落盘成明文。启动 Claude Code 之前跑一次解密并 export这一层和模型侧的配置完全不冲突。# 解密到环境变量标准输出不进任何明文文件 export FIGMA_TOKEN$(age -d -i ~/.age/key.txt secrets.env.age | grep ^FIGMA_TOKEN | cut -d -f2-) claude这条链路的好处是密文可以进版本库团队里每个人用自己的私钥解坏处是多了记得解密这一步。建议把它写成一个dev-up.sh和 Claude Code 的启动绑在一起避免忘记。4.2 Vault 与 1Password CLI启动前注入有 Vault 或密码管理器的团队直接把取值命令塞进启动流程即可本质和上一条一样都是运行时注入。区别在于密钥的权威来源变成了集中管理的服务撤销和审计都在那边做本地不留任何副本。# HashiCorp Vault export FIGMA_TOKEN$(vault kv get -fieldtoken secret/figma/mcp) # 1Password CLI export FIGMA_TOKEN$(op read op://Private/Figma/mcp-token) # 然后再启动 Claude Code模型侧的 Key 依旧来自 settings.json claude注意这里只解决了 Figma Token 的注入模型侧的ANTHROPIC_AUTH_TOKEN仍然是你在 TaoToken 控制台 创建的那把 Key。两条链路独立谁换都不牵动对方这也是拆开配置最大的收益。4.3 Figma 临时 Token 与 files:read 的轮换节奏最后一条路是缩短凭证寿命。给 Figma 的访问令牌只勾最小必要权限MCP 联调阶段只要files:read这一类只读范围就够了不要因为以后可能要用就一次勾满。只读令牌即使泄露损失面也只到别人能看你读过的文件不会波及写操作。轮换节奏按项目周期定就行一个迭代结束、一个外包同学离场、一次配置分享之后都可以撤销重建。撤销后只需要更新一处环境变量mcp-settings.json不用动因为里面本来就只有引用。这就是为什么值得在第 3 节多花十分钟把真实值从配置文件里赶出去。5. 跑通验证Claude Code 读 Figma 文件模型请求走统一通道5.1 先单独验模型通道再验 MCP验证顺序很重要别一次把两个未知量同时丢进去。先在一个干净目录里启动 Claude Code让它回答一句普通问题比如用三行说明这个仓库是做什么的。这一步只走模型请求不碰 MCP。如果这句话能正常返回说明 Base URL、Key、模型 ID 三件事都对上了。如果这一步失败了问题百分之百在模型侧检查ANTHROPIC_BASE_URL是不是https://taotoken.net/api、末尾有没有多余的路径、YOUR_API_KEY有没有粘漏字符、模型 ID 是不是模型广场里当时存在的那个。这时完全不用怀疑 Figma 那边两套配置已经拆开了这是拆分带来的第二个好处——故障域变小。5.2 再让 MCP 读一个 Figma 文件模型通道确认没问题后再让 Claude Code 通过 Figma MCP 去读一个具体文件给它一个 Figma 文件链接让它读出页面里的图层名称或者文本内容。这一步同时用到两条链路——Claude Code 要把上下文发给模型模型决定调用 MCP 工具MCP server 再用FIGMA_TOKEN去请求 Figma。任何一环断掉你都会看到失败但失败信息指向的位置不一样。读成功之后最值得做的一件事是回头确认模型请求确实走了 TaoToken 通道。打开 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 的控制台用量页面看刚才那几分钟里有没有对应的调用记录。有记录说明模型侧确实从统一通道走没有记录说明 Claude Code 还在用别的配置比如某个 shell 里还 export 着旧变量优先级把settings.json盖掉了。5.3 两个 Token 同时错的表现与二分排查同时配错两个 Token 时错误信息往往指向前一个失败点容易误导。FIGMA_TOKEN是空串MCP server 通常在握手阶段就挂了你会看到工具不可用模型 Key 错了则是对话直接报鉴权失败工具根本没机会被调用。记住这个差异就能快速二分。一个实用的排查习惯是只改一边只验一边。模型侧出问题的时候先把 Figma MCP 从配置里临时摘掉把变量收敛到最少Figma 侧出问题的时候先用curl之类的方式单独验证 Token 能不能读文件把模型完全排除在外。两条线各自成立再合到一起。6. 排障对照这几个报错分别说明什么6.1 401 与 invalid api key 的两种来源模型请求返回 401绝大多数是ANTHROPIC_AUTH_TOKEN的值不对可能是复制时带了空格可能是 Key 已被删除或替换也可能是环境里同时存在一个旧的同名变量把新值盖住了。先echo一下 Claude Code 实际读到的环境再对比控制台里那把 Key 是否还在。另一种 401 来自 Figma 那边但表现形式不同它出现在 MCP 工具调用结果里而不是对话本身的报错。看错误文本里出现的是 Figma 的接口地址还是模型接口地址一眼就能分清责任方。这也是为什么前面一直强调两把钥匙别混分清了报错自己也带着标签。6.2 FIGMA_TOKEN 展开成空串、MCP server 起不来最常见的现象是配置看着没问题工具却一直不可用。原因通常是变量没传进子进程改完~/.zshrc没source或者setx之后没重开终端或者你的 Claude Code 版本不展开${}语法。三种情况对应的修法分别是source、重启终端、把env里那一行删掉改成继承。还有一种少见但确实存在的坑MCP server 的启动命令依赖npx或某个全局包而这个命令在 Claude Code 的启动环境里不在 PATH 上。表现是 server 反复重启。这时把启动命令换成绝对路径或者先在一个普通终端里手动跑一遍同样的命令看能不能起来比在配置里反复改参数快。6.3 下次改配置先想清楚改哪一边配好之后建议留一条给自己看的备忘模型侧要换只动~/.claude/settings.json的env三行Figma 侧要换只动环境变量和 Figma 后台的令牌。两边唯一的交集是它们都跑在同一个 Claude Code 进程里仅此而已。下一次遇到额度不够想换模型通道你会发现这件事变得非常轻去 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 的模型广场确认要用的模型 ID改一下ANTHROPIC_MODEL重启会话收工。mcp-settings.json里的 Figma 引用一个字都不用碰因为那里从头到尾就没放过真实密钥。配完这一轮顺手把这次调用对上账先在 TaoToken 模型对话 里用同一把 Key 发一条测试消息确认模型 ID 和地址写得跟settings.json一致如果打算天天写代码去 Coding Plan 看看套餐够不够用Key 需要重建时在 控制台 API Keys 里操作Claude Code 环境变量的完整字段说明对照 接入文档 再核一遍。
返回列表