企业官网建设流程全解析

1. 设计评审为什么总在“看起来差不多”上翻车

设计评审最消耗人的环节，往往不是设计师改稿，而是前端把页面跑出来之后，大家发现“设计稿说一套，页面又是另一套”。间距差 4px、字号漏了一个状态、组件变量没对上，评审会上看着都像小问题，落到联调里就是一串返工。

我试过把 Figma 链接直接丢给前端同事，结果对方打开设计稿，手动看尺寸、颜色、圆角、阴影，再回代码里一点点调。页面跑起来后，再截图丢群里比对。这个流程能用，但很累，尤其是组件状态多、页面层级深、变量命名复杂的时候，前端很容易只拿到“视觉结果”，拿不到设计上下文。

Figma MCP 解决的就是这层上下文问题。它让支持 MCP 的编辑器或代码工具读取 Figma 里的 frame、layer、变量、组件、布局信息，再把这些信息带到实现环节里。这里别误会：MCP 不是替你一键交付页面，它更像一个懂 Figma 的上下文入口，把设计稿里那些原本要人工翻看的信息，交给开发工具读取和整理。

本文要跑的链路分成四个角色：Figma 桌面端打开本地设计上下文服务；MCP 客户端（VS Code、Cursor、Claude Code）读取设计上下文；前端本地服务跑出评审页面；cpolar 把本地前端页面临时映射成公网地址，发给评审同学访问。同时用 TaoToken 统一管理模型调用凭证，避免每个工具各配一套 Key。

这条链路适合谁？适合需要频繁做设计评审、远程联调的前端团队，尤其是设计师和前端不在同一地点、需要异步验收的场景。如果你只是自己在办公室局域网里看页面，cpolar 这一步可以先不做；只要涉及异地评审、远程联调、手机端验收，临时公网链接就很省事。

先把边界说清楚：Figma MCP 的本地地址是http://127.0.0.1:3845/mcp，它只在本机使用。远程同事打开的是前端评审页面，不是 MCP 服务地址。cpolar 这里只负责暴露前端本地页面或评审入口，不暴露 Figma token，不暴露 MCP 服务本身，也不把内部接口直接丢到公网。

2. TaoToken 前置：统一 Key 与 API 通道管理

在跑 Figma MCP 之前，先把模型调用的凭证问题解决掉。因为这条链路里，MCP 客户端本身可能不直接调模型，但你在编辑器里让 AI 读取设计上下文、生成代码、整理差异时，背后是要走模型 API 的。如果每个工具各配一套 Key，管理起来很乱，换工具就要重新配一遍。

TaoToken 在这里的角色是统一 Key 和 API 通道管理。你可以把它理解成一个凭证中转层：编辑器、MCP 客户端、脚本工具都指向同一个 Base URL，用同一个 Key，模型 ID 按需切换。这样做的直接好处是，换编辑器不用重新申请 Key，团队协作时也不用把多套凭证散落在各人机器上。

先拿到 Key。打开 TaoToken 控制台，进入 API Keys 页面创建一个新 Key。建议按用途命名，比如figma-review-dev，方便后面排查是哪个环境在用。创建后把 Key 复制出来，只显示一次，丢了就重新生成。

拿到 Key 之后，记下两个地址：Base URL 是https://taotoken.net/api，模型对话入口在https://taotoken.net/api下的对话页。如果你用的是 Claude Code 这类工具，需要的是 Anthropic 兼容通道，地址同样走 TaoToken 的 API 入口，具体路径在接入文档里有说明。

这里要强调一点：TaoToken 不是让你绕过什么，它是把模型调用的凭证和通道统一起来。你原本怎么调模型，现在还是怎么调，只是 Base URL 和 Key 换成一个统一入口。对于 Figma MCP 这条链路来说，它的价值在于：当你在 VS Code、Cursor、Claude Code 之间切换时，模型凭证不用跟着换。

配置的时候，三个要素必须齐全：Base URL、Key、Model ID。缺一个都会报错。Base URL 填https://taotoken.net/api，Key 填你刚创建的那串，Model ID 按你实际要用的模型填。如果你不确定 Model ID 怎么写，先去模型对话页面确认一下可用模型列表，再回来填。

对于长期做编码和 Agent 任务的团队，可以考虑 Coding Plan，它更适合高频调用场景。如果只是临时跑一次设计评审链路，按量用 API 就行。接入文档里有完整的参数说明和示例，遇到 401 或者模型找不到的报错，先回去核对这三要素。

3. 可复制配置：Figma MCP + 编辑器 + TaoToken

这一节把配置片段全部给出来，你直接复制改路径就行。先确认 Figma 桌面端已经打开设计文件，并且进入了 Dev Mode。

Figma desktop MCP server 的启用路径：安装并打开 Figma desktop app，登录账号，打开一个 Figma Design 文件，在底部工具栏切到 Dev Mode（也可以按 Shift + D），在 Inspect 面板里的 MCP server 区域，点击 Enable desktop MCP server。底部出现 server 已启用并正在运行的提示后，再去配置编辑器。这里别急着关 Figma，desktop MCP server 是依托 Figma 桌面端运行的，Figma 退出后，本地 MCP 地址就读不到设计上下文了。

VS Code 走 HTTP MCP 配置。打开命令面板，搜索MCP: Add Server，类型选 HTTP，地址填http://127.0.0.1:3845/mcp，Server ID 可以填figma-desktop。配置完成后，mcp.json里会出现类似内容：

{ "servers": { "figma-desktop": { "type": "http", "url": "http://127.0.0.1:3845/mcp" } } }

做完后切到 Agent 模式，在聊天输入框里输入#get_design_context。如果工具列表没有出来，先检查 Figma 桌面端是否还开着，再重启 VS Code。

Cursor 里打开 Settings，进入 Cursor Settings，找到 MCP 标签，添加全局 MCP server，填入：

{ "mcpServers": { "figma-desktop": { "url": "http://127.0.0.1:3845/mcp" } } }

保存后看 MCP 页面里的连接状态。这里最容易填错的是端口，必须是 3845，路径是/mcp，不要写成项目的前端端口。

Claude Code 可以直接用官方命令添加 HTTP MCP server：

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp claude mcp list

claude mcp list能看到figma-desktop后，再回到 Figma 选中目标 frame，让客户端读取当前选区或设计链接。如果命令执行后连不上，先看三个点：Figma desktop app 是否开启、Dev Mode 是否打开、MCP server 是否处于 enabled 状态。

接下来是 TaoToken 的配置。如果你在 Claude Code 里用 Anthropic 兼容通道，需要配置settings.json或者对应的环境变量。Base URL 填https://taotoken.net/api，Key 填你创建的那串，Model ID 按实际模型填。如果你用的是 Codex 类工具，auth.json里同样要写全三件套：Base URL、Key、Model ID。Cline MCP 场景下，也是在 MCP 配置里把模型通道指向 TaoToken 的 API 入口。

这里给一个通用的配置对照表，方便你核对：

配置完成后，回到编辑器里让 MCP 客户端读取设计上下文。这里可以给客户端一段更具体的提示词，别只说“帮我实现这个页面”：

读取当前 Figma 选中的 frame，整理出颜色、字体、间距、圆角、组件层级和交互状态。 只生成前端实现需要的信息，不写回 Figma 画布。 基于当前项目的 React + TypeScript 结构实现页面，并列出需要人工核对的设计差异。

这段提示有两个好处：一是限定只读设计上下文，二是让工具输出可核对项。评审时最有用的不是“代码生成了”，而是知道哪些地方已经对齐，哪些地方需要人眼复核。

4. 验证请求：从本地页面到 cpolar 远程联调

配置写完，接下来验证整条链路能不能跑通。先用 Vite 起一个最小 React 页面，已有项目的同学直接进入项目目录，执行启动命令就行。

新建测试项目：

npm create vite@latest figma-review-demo -- --template react-ts cd figma-review-demo npm install npm run dev -- --host 0.0.0.0

Vite 默认会监听 5173。终端里看到本地地址后，在浏览器打开http://127.0.0.1:5173。再用命令确认页面有响应：

curl -I http://127.0.0.1:5173

返回里有HTTP/1.1 200 OK或HTTP/1.1 304 Not Modified，说明本地页面已经能访问。这一步不是为了测试而测试，而是先把“前端页面能本地访问”确认掉。后面 cpolar 只负责转发，如果本地 5173 都打不开，公网地址也打不开。

本地页面跑起来后，再开一个终端启动 cpolar HTTP 隧道。目标端口就是 Vite 的 5173：

cpolar http 5173

命令启动后，终端会输出公网访问地址。把https://开头的地址发给评审同学，对方就能打开你本机的前端页面。如果你习惯用 Web UI，也可以打开 cpolar 本地管理页面http://127.0.0.1:9200，在 Web UI 里新建 HTTP 隧道时，配置按这个填：隧道名称figma-review，协议http，本地地址5173，域名类型随机域名，地区按页面可选项填写。创建成功后，到“状态 → 在线隧道列表”查看公网地址。

这里有个很实用的提醒：评审链接只给需要参与的人，评审结束就停掉终端里的 cpolar 进程。免费随机公网地址会在 24 小时内变化，用它做临时联调入口正好。

外网验收的时候，把 cpolar 的公网地址发出去之前，自己先用手机流量打开一次，不要只在本机浏览器里看。验收按这几项走：手机关闭 Wi-Fi，使用移动网络访问 cpolar 的https://地址；页面能正常加载，首屏样式和 Figma frame 对得上；交互状态能触发，比如 hover、弹窗、表单错误提示；刷新页面后还能访问，控制台没有接口跨域报错。

如果手机打不开，先不要怀疑 Figma MCP。按链路排查：本地http://127.0.0.1:5173是否能打开；Vite 是否还在运行；cpolar 终端是否还在运行；公网地址是否复制完整，尤其是https://前缀；页面接口是否依赖内网地址。这里的核心验收结果很明确：远程同事打开的是前端页面，不需要登录你的 Figma，也不需要拿到你的 MCP 配置。

5. 常见报错排查：401、local proxy failed、reading choices、OAuth

链路跑起来之后，最容易卡在几个固定报错上。这一节按真实报错来对照排查。

401 Unauthorized：这个报错基本都出在 TaoToken 配置上。先核对三要素：Base URL 是不是https://taotoken.net/api，Key 是不是复制完整（有没有多余空格），Model ID 是不是当前可用的。如果 Key 刚创建，确认没有过期或者被禁用。Claude Code 场景下，检查settings.json里的环境变量有没有生效；Codex 场景下，检查auth.json里的字段名有没有写错。401 不是 MCP 的问题，是模型通道的凭证问题。

local proxy failed：这个报错通常出现在 MCP 客户端连接 Figma desktop server 的时候。先确认 Figma 桌面端还开着，Dev Mode 还在，MCP server 还是 enabled 状态。然后核对地址是不是http://127.0.0.1:3845/mcp，端口 3845 和路径/mcp都不能错。如果 Figma 重启过，MCP server 需要重新启用。编辑器侧刷新 MCP server 后仍然报错，就重启 Figma desktop app 和编辑器。

reading choices 相关报错：这类报错一般出现在模型返回结果解析阶段。如果你用的是 TaoToken 统一通道，先确认 Model ID 和实际调用的模型匹配。有些模型返回格式和客户端预期不一致，会报 reading choices 之类的解析错误。解决办法是换一个兼容性更好的 Model ID，或者在客户端里调整返回格式配置。如果是在 Claude Code 里出现，检查 Anthropic 兼容通道的配置是否正确。

OAuth 相关报错：如果你在 MCP 客户端里看到 OAuth 报错，先确认这个 MCP server 是不是需要 OAuth 认证。Figma desktop MCP server 走的是本地 HTTP，不需要 OAuth。如果你接的是其他远程 MCP server，才需要处理 OAuth 流程。这里不要混淆：本地 3845 端口的 Figma MCP 不需要 OAuth，报 OAuth 错误说明你连错了地址，或者客户端配置里混入了其他 server 的认证信息。

MCP 工具列表为空：先检查 Figma desktop app 是否打开，再检查是否进入 Dev Mode，并确认 MCP server 已经 enabled。编辑器侧刷新 MCP server 后仍然为空，就重启 Figma desktop app 和编辑器。3845 端口和/mcp路径要逐字核对。

读到的不是目标 frame：选区读取时，Figma 里必须选中具体 frame 或 layer。多人协作时，设计师和前端先约定 frame 名称，避免读到外层页面或临时分组。链接读取时，复制 frame 或 layer 的链接，不要只复制文件首页链接。客户端需要从链接里拿到 node-id。

cpolar 公网地址能打开，但页面样式不对：这类问题通常在前端侧。先看浏览器控制台，确认静态资源有没有 404，接口有没有跨域错误。如果页面使用了本机绝对地址，例如http://127.0.0.1:3000/api，远端浏览器访问时会指向对方自己的电脑。评审页面里要使用可访问的测试接口地址，或者把数据 mock 到前端。

评审时要不要暴露 Figma MCP 服务：不要。MCP server 是给本机 MCP 客户端读取设计上下文的，不是给评审同学直接访问的网页。远程评审只暴露前端页面。设计上下文读取、代码生成、差异整理都留在开发者本机完成。

安全边界再强调一次：本地 MCP 地址http://127.0.0.1:3845/mcp只给本机编辑器使用，不拿它做公网映射。cpolar 映射的对象只选前端页面端口，例如 5173、3000、8080。页面里不要打印 Figma token、MCP 响应原文、内部接口密钥，也不要把.env内容输出到浏览器。如果页面要调用后端接口，给评审准备一个最小权限的测试环境。评审结束后做三件事：停止 cpolar 隧道进程，下线临时测试账号或收回访问权限，删除页面里用于调试的日志输出。

6. 把设计上下文、远程入口和模型凭证各归其位

这条链路跑通之后，你会发现它真正的价值不在于某个工具多强，而在于把三件事分清楚了：Figma MCP 管设计上下文，cpolar 管临时访问入口，TaoToken 管模型调用凭证。各干各的，互不越界。

关键步骤可以压缩成三件事：在 Figma Dev Mode 里启用 desktop MCP server，地址固定为http://127.0.0.1:3845/mcp；在 VS Code、Cursor 或 Claude Code 里接入这个 HTTP MCP server，围绕选区或 frame 链接读取设计上下文；前端页面本地跑在 5173 后，用cpolar http 5173临时生成公网评审链接。模型调用凭证统一走 TaoToken，Base URL 填https://taotoken.net/api，Key 和 Model ID 按实际配置。

如果你在排障阶段卡住了，先去 TaoToken 的接入文档核对三要素，再去 API Keys 页面确认 Key 状态。如果你要验证模型通道是否正常，可以直接在模型对话页面发一条测试消息。如果团队长期做编码和 Agent 任务，Coding Plan 更适合高频场景。

这套方式的价值不在于炫技，而是把“看设计稿、写页面、远程验收”放到一条清晰链路里。评审时就少很多来回截图和口头描述，前端也不用在多个工具之间反复切换凭证。链路跑顺了，设计评审的焦点才能回到设计本身。