1. 蓝湖 MCP 在管理端页面里到底解决什么问题蓝湖 MCP 是把蓝湖设计稿数据封装成 Model Context Protocol 服务的开源方案让 Cursor、Cline、Claude Code 这类 AI 编程工具能直接读取画板结构、图层信息、颜色字体间距等样式数据。它适合正在做管理端页面后台系统、运营平台、数据看板的前端开发者尤其是那种设计稿改一版、页面就要跟着调一遍的场景。管理端页面的特点是表格多、表单多、弹窗多样式重复度高但细节琐碎靠人眼对着设计稿抄间距和色值一天下来眼睛都花了。我试过把蓝湖 MCP 接到统一 API 通道上跑核心痛点其实不在 MCP 本身而在 Key 管理。蓝湖的 API Token、项目 ID 这些凭证如果散落在各个工具的配置文件里团队里谁改了哪份配置根本说不清。管理端页面往往由多人协作A 同学用 ClineB 同学用 CursorC 同学用 Claude Code每人本地一套蓝湖 Token权限和额度都没法统一看。TaoToken 在这里的角色是提供一个统一的 Key/API 通道把模型调用和 MCP 服务的凭证收口到一处配置骨架统一之后换人换机器只需要改一个地方。这篇要给的是一套可复制的配置骨架config.toml、settings.json、CC Switch 和 Cline 的片段以及启动后怎么验证 MCP 连接状态和页面数据拉取是否正常。管理端页面的设计稿通常层级深一个列表页可能嵌套五六层 FrameMCP 返回的 JSON 结构如果不先验证AI 生成出来的代码很容易把嵌套关系搞错。所以验证动作不是走形式是必须做的。2. TaoToken 前置统一 Key 与 API 通道的准备在配蓝湖 MCP 之前先把 TaoToken 这边的通道准备好。TaoToken 提供的是模型调用的统一入口API 地址是 https://taotoken.net/api官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。你需要先去控制台创建一个 API Key这个 Key 后面会写进各个工具的配置里作为模型调用的凭证。创建 Key 的入口在控制台的 API Keys 页面路径是 https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。进去之后新建一个 Key命名建议带上用途比如 lanhu-mcp-admin这样后面在多个工具里复用时不会搞混。Key 创建完只显示一次复制下来存到安全的地方。这里要区分两个东西蓝湖自己的 API Token 和 TaoToken 的 API Key。蓝湖 Token 是去蓝湖开放平台申请的用来让 MCP 服务能读你的设计稿数据TaoToken 的 Key 是给 AI 编程工具调用模型用的。两者作用不同但都建议收口管理。管理端页面开发时AI 工具既要读设计稿走蓝湖 MCP又要生成代码走模型通道两条链路都得通。如果你用的是 Claude Code 或者 Anthropic 风格的接入TaoToken 这边有对应的接入文档可以参考地址是 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。文档里会说明 base_url 怎么填、header 里 Authorization 的格式是什么。管理端页面项目通常周期长建议直接上 Coding Plan额度稳定不用天天盯着余额入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。3. 可复制配置config.toml 与 settings.json 骨架蓝湖 MCP 服务本身是个本地进程启动后暴露一个 MCP Server 地址默认类似 http://localhost:3000/mcp。AI 工具通过这个地址去拉设计稿数据。下面这套骨架你可以直接抄改掉 Token 和项目 ID 就能跑。先看蓝湖 MCP 服务自己的 config.toml放在项目根目录# config.toml - 蓝湖 MCP 服务配置 [server] host 127.0.0.1 port 3000 path /mcp [lanhu] # 蓝湖开放平台申请的 Token token 你的蓝湖Token # 管理端页面所在的项目 ID project_id 你的项目ID # 设计稿版本不填默认最新 version latest [taotoken] # 统一模型通道 base_url https://taotoken.net/api api_key 你的TaoToken Key # 管理端页面代码生成建议用长上下文模型 model claude-sonnet [log] level info file ./logs/lanhu-mcp.log注意 token 和 api_key 不要提交到 Git用环境变量覆盖更安全。启动前可以这样导出export LANHU_TOKEN你的蓝湖Token export LANHU_PROJECT_ID你的项目ID export TAOTOKEN_API_KEY你的TaoToken Key然后是 Cline 的 settings.json 片段。Cline 是 VS Code 插件配置在插件设置里MCP 部分长这样{ mcpServers: { lanhu: { url: http://127.0.0.1:3000/mcp, transport: http, description: 蓝湖设计稿数据用于管理端页面生成 } }, taotoken: { baseUrl: https://taotoken.net/api, apiKey: 你的TaoToken Key, model: claude-sonnet } }CC Switch 的配置片段类似它管的是多套模型通道的切换。管理端页面开发时你可能需要在快速模型和长上下文模型之间切CC Switch 的配置这样写{ providers: [ { name: taotoken-main, baseUrl: https://taotoken.net/api, apiKey: 你的TaoToken Key, models: [claude-sonnet, gpt-4o] } ], mcp: { lanhu: { url: http://127.0.0.1:3000/mcp } } }如果你用 Claude Code接入方式走 Anthropic 兼容格式参考 https://taotoken.net/claudecode-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecode-anthropicutm_campaignrewrite 。配置里 base_url 填 TaoToken 的 API 地址Key 填刚才创建的。4. 验证请求MCP 连接状态与页面数据拉取配置写完不算完得验证。管理端页面的设计稿结构复杂MCP 连接不通或者数据拉取不全AI 生成的代码就是空中楼阁。验证分两步先确认 MCP 服务活着再确认能拉到管理端页面的真实数据。第一步启动蓝湖 MCP 服务cd lanhu-mcp npm install npm run start看到日志里输出MCP server listening on http://127.0.0.1:3000/mcp就算起来了。如果端口被占改 config.toml 里的 port。第二步用 curl 直接打 MCP 的接口确认连接状态curl -X POST http://127.0.0.1:3000/mcp \ -H Content-Type: application/json \ -d { jsonrpc: 2.0, method: tools/list, id: 1 }正常返回会列出 MCP 暴露的工具比如 get_pages、get_page_structure、get_styles、get_assets 这些。如果返回连接拒绝说明服务没起来如果返回 401说明蓝湖 Token 不对。第三步拉一个管理端页面的真实数据。假设你的管理端有个用户列表页设计稿里叫「用户管理-列表」先查页面列表curl -X POST http://127.0.0.1:3000/mcp \ -H Content-Type: application/json \ -d { jsonrpc: 2.0, method: tools/call, params: { name: get_pages, arguments: { project_id: 你的项目ID } }, id: 2 }返回的 JSON 里应该能看到页面名称和对应的 page_id。拿到 page_id 之后再拉页面结构curl -X POST http://127.0.0.1:3000/mcp \ -H Content-Type: application/json \ -d { jsonrpc: 2.0, method: tools/call, params: { name: get_page_structure, arguments: { page_id: 上一步拿到的page_id } }, id: 3 }这一步返回的是画板图层树。管理端页面的图层树通常很深你要重点看几个东西表格组件的列定义有没有出来、表单字段的 label 和 input 有没有配对、弹窗是不是作为独立 Frame 存在。如果这些结构完整说明数据拉取正常。第四步在 AI 工具里实际问一句。在 Cline 或 Cursor 里输入「根据蓝湖设计稿的用户管理列表页生成一个 Vue3 Element Plus 的表格页面」。AI 会先调 MCP 拉数据再生成代码。你观察它生成的表格列数、字段名、间距值是不是和设计稿对得上。对不上就回到第三步看数据结构哪里缺了。5. 本篇常见错排查配这套东西踩坑是常态管理端页面因为结构复杂报错也五花八门。下面几个是我遇到频率最高的。MCP 连接状态显示 connected 但拉不到数据。这种情况多半是蓝湖 Token 的权限不够。蓝湖开放平台的 Token 分项目级和团队级管理端页面如果跨了多个项目项目级 Token 只能读一个。去蓝湖后台确认 Token 的 scope或者换成团队级 Token。另外 project_id 填错也会这样返回空数组而不是报错容易误判。AI 工具里 MCP 工具列表是空的。检查 settings.json 里 mcpServers 的 url 是不是 http://127.0.0.1:3000/mcp注意是 http 不是 https本地服务没有证书。Cline 有时候需要重启 VS Code 才加载新配置。CC Switch 的话确认 mcp 字段和 providers 字段是平级的别嵌套错了。页面结构拉回来但样式数据缺失。管理端页面的设计稿如果用了组件库的 symbol蓝湖里可能只存了引用没存展开后的样式。这种情况 get_styles 返回的色值和间距会是空的。解决办法是在蓝湖里把 symbol 打散或者让 MCP 配置里加一个 expand_symbol 参数看 lanhu-mcp 的 README 有没有支持。没有的话只能手动补样式。TaoToken 调用返回 401 或 403。先确认 API Key 有没有复制全Key 里可能有连字符容易漏。再确认 base_url 是 https://taotoken.net/api末尾不要多加斜杠。如果用的是 Claude Code 的 Anthropic 格式header 里的 x-api-key 和 Authorization 别同时填按文档来。生成的管理端页面代码里表格列对不上。这是 prompt 的问题不是 MCP 的问题。管理端列表页的列定义在图层树里可能叫「表头」或者「columns」AI 不一定认得。你在 prompt 里明确说「读取设计稿里表格组件的列定义按顺序生成 el-table-column」命中率会高很多。MCP 服务跑一段时间就断。蓝湖 API 有频率限制管理端页面如果图层特别多一次拉取可能触发限流。config.toml 里加个 retry 配置或者把大页面拆成多次拉。日志在 ./logs/lanhu-mcp.log断了先看日志里的错误码。6. 把配置收口到统一通道管理端页面的开发周期通常以月计设计稿会改很多版。如果每次改版都要重新对一遍配置效率就没了。把蓝湖 MCP 和 TaoToken 的配置收口到一套骨架里换人换机器只改环境变量这是长期维护的关键。模型对话调试的时候可以直接在 https://taotoken.net/model-chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite 里试 prompt确认模型对管理端页面结构的理解没问题再写进工具配置。长期做管理端页面和 Agent 辅助编码的话Coding Plan 的额度模型更适合不用每次调用都算钱。配置骨架给到这里剩下的就是按你的管理端项目改 project_id 和页面名称。验证动作别省MCP 连接状态和页面数据拉取这两步过了后面 AI 生成的代码才靠谱。