Token导航 LogoToken导航

MCP Server · 设计创作

Claude Code To Figma Experiments

通过Claude Code生成移动应用原型并利用HTML-to-Design插件推送至Figma的设计工具，适用于快速创建和迭代移动应用界面。

stdio官方级别未说明来源级核验工具 1http-server
设计开发工具HTMLClaude

快速开始

打开主来源页面GitHub 仓库
作者 / 组织
SeanSmithDesign
提供方
SeanSmithDesign
运行时
Node.js

工具数量

1

来源目录标注

资源数量

0

来源目录标注

提示词数量

0

来源目录标注

GitHub Star

0

仓库热度

收录来源

1 个

MCP World

选型结论

Claude Code To Figma Experiments 属于设计创作类 MCP Server，公开资料标注 1 个工具，通过stdio 本地进程接入，适配 Claude，有可以直接复制的安装命令；接入前要先准备 OAuth 授权。

分类

设计创作

传输方式

stdio

认证方式

OAuth 授权

部署方式

公开资料未说明

安装与配置

安装命令

npx http-server . -p 8080

客户端配置示例

{
  "mcpServers": {
    "claude-code-to-figma-experiments": {
      "command": "npx",
      "args": [
        "http-server",
        ".",
        "-p",
        "8080"
      ]
    }
  }
}

按公开安装命令拼出来的示例，字段名和参数以仓库 README 为准；带 YOUR_API_KEY 这类占位符的位置记得换成自己的值。

上手步骤

  1. 1

    准备运行环境

    stdio 服务在本地起进程，需要先装好 Node.js，再按安装命令拉取依赖。

  2. 2

    安装服务

    复制下面的安装命令执行；命令里带占位符的位置换成自己的密钥或路径。

  3. 3

    写入客户端配置

    在客户端的 MCP 配置里填启动命令和参数，保存后完全退出客户端再打开，让新配置生效。

  4. 4

    验证是否可用

    连接成功后客户端会列出 1 个工具，随便调一个只读工具确认能返回结果。

接入前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

详细介绍

Claude Code到Figma实验

使用Claude Code生成的移动应用程序模型，并通过 HTML设计 MCP集成。

屏幕

文件屏幕描述
login.html登录电子邮件/密码+谷歌账号；GitHub OAuth
task-list.html任务列表带过滤器、任务卡、底部导航的仪表板
task-detail.html任务详细信息任务元数据、子任务、活动提要
new-task.html新建任务创建带有指定人员、子任务的表单

用法

在本地提供文件并捕获到Figma中：

# Start a local server
npx http-server . -p 8080

# Each file can be opened with Figma MCP capture parameters:
# http://localhost:8080/login.html#figmacapture=...&figmaselector=.phone-frame&figmadelay=2000

Figma MCP generate_figma_design 该工具处理捕获ID生成和轮询。

约束条件

每个HTML文件必须 独立的 （所有CSS都是内联的），因为Figma捕获序列化器一次处理一个页面。CSS在文件之间的重复是有意的。

看 docs/solutions/integration-issues/figma-mcp-overflow-scroll-height.md 用于序列化器特定的CSS规则和陷阱。

密钥序列化程序规则

  • 使用 background-color 不 background 纯色的简写
  • 使用 flex: 1 没有 overflow-y: auto 关于内容领域
  • 替换CSS伪元素(::before/::after)具有真正的DOM元素
  • 内容必须物理上适合手机框架（~795px内容预算）
  • 添加 ?v=N 迭代时缓存崩溃

手机框架模板

Phone frame: 433x892px, 12px padding
  Phone screen: ~409x868px
    Status bar: ~54px
    Content area: ~760-795px
    Home indicator + spacer: ~33px

添加新屏幕

  1. 将任何现有文件复制为模板
  2. 保持手机框架外壳（外面的一切 ``)
  3. 用屏幕的UI替换内容区域
  4. 验证总内容高度是否在~795px预算范围内

工具与能力

工具数量

1

资源数量

0

提示词数量

0

能力标签

HTML本地部署移动应用设计原型设计Figma插件前端开发UI设计

支持客户端

Claude

数量来自来源目录的标注，具体工具清单以官方文档为准。

典型使用场景

出图与改图

按描述生成或修改图像，快速迭代风格。

读取设计稿

读取画布和图层信息，按规范生成页面。

素材整理

批量生成缩略图、统一命名和标签。

选择建议

值得选的地方

  • 只提供 1 个工具，职责集中，接入后不容易误操作。
  • 有现成的安装命令，不用自己找入口，照着跑就能起服务。
  • 公开说明写得比较完整，接入前能看清能力边界。

先想清楚的地方

  • stdio 方式要求本地装好 Node.js，换机器要重新装一遍。
  • 需要自备OAuth 授权，没有凭据没法直接试。
  • 第三方目录整理，版本更新和行为细节以官方仓库为准。

更适合

  • 需要在设计创作场景里让模型直接调用外部能力的人。
  • 已经在用 Claude 的用户，接入路径最短。
  • 想先快速试一下、能接受在本地跑服务的人。

不太适合

  • 完全不想在本地装环境的人。
  • 暂时拿不到OAuth 授权的人。
  • 需要厂商级 SLA 和技术支持的生产环境。

同类对比

5 个同类
MCP Server工具数传输方式安装命令收录来源最后核验
Claude Code To Figma Experiments

MCP World · 本页

1stdio有1 个2026-05-17
Blender MCP

MCP.so

17stdio有3 个2026-05-17
Figma Context MCP 3aaa8d28

MCP World

0未说明未标注2 个2026-05-17
Nova Canvas MCP Server

MCP World

2stdio有1 个2026-05-17
Cursor Talk To Figma MCP Da1c7911

MCP World

40未说明未标注1 个2026-05-17

按同分类和工具数量挑出最接近的几条，字段以各自详情页为准。

常见问题

5 条

Claude Code To Figma Experiments 怎么安装？

公开资料给出的安装命令是 npx http-server . -p 8080，运行环境为 Node.js。装完后按客户端要求写进 MCP 配置，重启客户端生效。

Claude Code To Figma Experiments 怎么在 Claude Desktop、Cursor 里配置？

它是stdio 本地进程，客户端配置里要写启动命令和参数，运行环境是 Node.js；保存后完全退出客户端再打开，配置才会生效。

Claude Code To Figma Experiments 收费吗？

本站只整理公开资料，不代收费用，也没有标注具体价格。是否收费取决于服务本身和背后的接口额度，正式使用前按官方说明确认。

Claude Code To Figma Experiments 需要 API Key 吗？

公开资料标注的认证方式是OAuth 授权，也就是要先拿到凭据才能连上；凭据只填在自己本地的配置里，不要写进公开仓库。

Claude Code To Figma Experiments 支持哪些客户端？

公开资料标注支持 Claude；其他客户端只要能配置 MCP Server，也能用同样的命令或地址接入。

来源信息

MCP World

claude-code-to-figma-experiments

通过Claude Code生成移动应用原型并利用HTML-to-Design插件推送至Figma的设计工具，适用于快速创建和迭代移动应用界面。

www.mcpworld.com

/detail/1a0a7ce0def18515090c9951ca9bab56

来源标签

HTML本地部署移动应用设计原型设计Figma插件前端开发UI设计

来源分类路径

HTML

继续浏览同类 MCP

更多设计创作 MCP（1,700）返回 MCP 目录

上一个 MCP

Claude Code Frontend Design Toolkit

一个包含70多种工具和技能的Claude代码前端设计工具包，涵盖设计美化、主题定制、动画效果、UI/UX智能、设计到代码流程、测试自动化等多个方面，适用于前端开发者和设计师。

下一个 MCP

Claude Comfyui MCP

一个Model Context Protocol (MCP)服务器，使Claude Desktop能够与本地ComfyUI安装进行交互，实现AI驱动的图像生成。