Claude Code Fi*** MCP 接入教程

在远程 Mac mini 上把设计上下文带入前端开发

发布建议日期 2026-10-26　适用于 Claude Code Fi*** 与前端开发

Fi*** MCP 让 Claude Code 读取选中画框的布局、组件、变量和图像信息，并结合本地代码库生成实现方案。本文采用 Fi*** 官方推荐的远程 MCP 服务，说明插件安装、手动接入、OAuth 授权、设计稿读取和受控写回流程，同时给出远程 Mac 环境中的权限与验证方法。

Fi*** MCP 适合哪些任务

Claude Code 可以根据 Fi*** 链接读取指定画框或图层的设计上下文，再结合项目中的组件、样式和路由完成前端实现。它还能提取变量、组件关系、布局信息和图像资源，并读取 FigJam 或 Fi*** Make 中的相关内容。

远程 MCP 还支持把网页界面捕获为可编辑的 Fi*** 图层，以及在具备权限和技能配置时写入 Fi*** 画布。生成结果仍需开发者核对响应式行为、交互状态、可访问性和现有组件约束。

开始前准备

确认远程 Mac 已安装并更新 Claude Code，项目能够正常启动和运行测试。准备一个有权访问目标 Fi*** 文件的账号，并复制一个范围明确的画框或组件链接。

建议先用测试文件或只读任务验证连接。Fi*** 文件中的文本、注释和图层名称属于外部输入，不应允许它们改变权限、读取无关文件或触发未经确认的写入。

第一步 选择官方插件或手动连接

Fi*** 官方推荐在 Claude Code 中安装 Fi*** 插件。插件同时提供 MCP 设置和常见工作流技能，适合需要稳定设计转代码或写回画布的用户。

如果组织禁止安装插件，可以手动添加远程 MCP 服务器。手动方式能够连接 Fi***，但不会自动安装 Fi*** 技能，复杂工作流需要额外配置。

第二步 安装 Fi*** 插件

在终端安装官方插件，然后重启正在运行的 Claude Code。进入 /plugin 的 Installed 页面，选择 fi*** 并开始登录。

如果命令被组织策略阻止，应联系 Claude ***确认插件策略，不要绕过企业限制。此时可在获准后使用手动远程连接。

claude plugin install fi***@claude-plugins-official

# 重启 Claude Code 后
> /plugin

第三步 手动添加远程服务器

不能安装插件时，在项目目录添加 Fi*** 远程端点。Claude Code 默认把服务器加入当前项目；只有确实需要在所有项目中使用时，才增加 user 范围。

添加后启动新会话，输入 /mcp，选择 fi*** 和 Authenticate。浏览器授权成功后回到终端，再次运行 /mcp 确认连接状态。

cd /path/to/your-project
claude mcp add --transport http fi*** https://mcp.fi***.com/mcp
claude mcp list
claude mcp get fi***

claude
> /mcp

# 选择 fi***
# 选择 Authenticate 并在浏览器中允许访问

**步 验证账号与文件权限

先让 Claude Code 确认当前 Fi*** 用户，再读取一个测试画框。Fi*** MCP 只能访问该账号本来就有权限查看或编辑的文件；权限错误通常来自登录账号、团队归属或文件共享设置不一致。

只读验收应包含画框名称、尺寸、自动布局、主要组件、颜色变量和文字样式。不要在第一次测试中创建文件、修改画布或上传界面。

请只读取这个 Fi*** 选区链接，不修改画布：
1. 列出画框尺寸 自动布局和响应式约束
2. 识别组件 变量 字体 图像与交互状态
3. 对照当前代码库给出可复用组件
4. 说明仍缺少的状态或设计信息
禁止创建文件 修改画布或上传界面

第五步 从设计稿生成代码

在 Fi*** Design 中右键目标画框或图层，选择 Copy link to selection，再把链接粘贴给 Claude Code。客户端会从链接中提取节点标识，MCP 服务器据此返回指定对象的设计上下文。

提示词应同时说明目标技术栈、复用现有组件、允许修改的目录和验收方式。先要求 Claude Code 说明组件映射与差异，再确认是否写文件。

根据刚才读取的设计上下文：
1. 先列出组件映射和准备修改的文件
2. 优先复用现有组件和设计令牌
3. 等待确认后再写代码
4. 完成后运行测试并说明与设计稿的差异

第六步 使用 Code Connect 提高一致性

如果团队已配置 Code Connect，Fi*** MCP 可以把设计组件映射到代码库中的真实组件。这样生成结果更容易复用现有按钮、表单和设计令牌，而不是重新创建近似实现。

Code Connect 不能替代代码**。仍要检查组件属性、状态组合、国际化、键盘操作和断点行为，并运行项目现有测试。

第七步 控制画布写入

远程 MCP 支持创建和修改 Fi*** 原生内容。写入草稿之外的文件需要 Full seat 和文件编辑权限；相关能力仍处于持续改进阶段，部分写入功能在 *eta 期间免费，之后可能采用按量计费。

执行写入前，应让 Claude Code 列出目标文件、页面、画框和拟变更内容。先在副本或草稿中验证，确认后再应用到团队文件。不要让**自动覆盖主组件或批量重命名变量。

第八步 避免大型画框拖慢会话

一次选择整个复杂页面会返回大量节点、图像和样式，容易增加上下文占用并触发速率限制。应把任务拆成页头、内容区、表单或单个组件，逐块读取和实现。

如果工具响应缓慢，先缩小选择范围，再检查 Fi*** 账号的方案和席位限制。速率限制会随方案和席位变化，团队应以 Fi*** 当前管理页面与官方文档为准。

第九步 桌面服务器的适用范围

桌面服务器运行在 Fi*** 桌面应用内，地址为 http://127.0.0.1:3845/mcp，主要面向特定组织或企业需求。它要求支持方案中的 Dev 或 Full seat，并且不支持写回画布或把网页界面发送到 Fi***。

如果没有企业限制或本地集成要求，优先使用远程服务器。若同时配置远程和桌面服务器，应使用不同名称，并在提示词中明确目标服务器，避免调用到功能较少的本地端点。

claude mcp add --transport http fi***-desktop \
  http://127.0.0.1:3845/mcp
claude mcp get fi***-desktop

第十步 在远程 Mac 上长期使用

通过 SSH 进入远程 Mac，在项目目录启动 tmux 后运行 Claude Code。OAuth 登录需要浏览器时，可以通过 UU 远程桌面完成授权；授权完成后回到终端检查连接。

设计资源和代码可能涉及未发布产品信息。远程 Mac 上应使用独立账号、最小文件权限和受保护的项目目录，任务结束**理不再使用的认证并检查仍启用的 MCP 服务器。

ssh your-**c-mini
cd /path/to/your-project
tmux new -s fi***-mcp
claude

# 断线后接回
tmux attach -t fi***-mcp

为什么 Zu**c.Ai 适合这类工作流

根据 Zu**c.Ai 官网***息，其方案提供位于新加坡的 Mac mini M6 整机独享环境，配置为 16G* 统一内存和 256G* SSD，接入新加坡家庭或商业宽带，并支持 UU 远程、终端、Tailscale、ToDesk、RustDesk，以及浏览器 SSH 或 VNC。

官网当前公开价格为每月 999 元起。长期在线的本地文件系统适合保留前端仓库、依赖缓存、Claude Code 配置和 tmux 会话；Fi*** 账号、席位、文件权限、代码备份和发布流程仍由使用者自行管理。

常见问题排查

结语

接入 Fi*** MCP 后，应先用明确的画框链接完成只读验收，再让 Claude Code 对照现有组件生成实现计划。远程端点适合多数场景；写回画布前要核对席位、编辑权限和变更目标，并在代码测试与视觉检查通过后再合并结果。