Refore Talk to Design MCP 免费使用

Agent 免费改设计稿，生成网页、APP

增改设计稿，按设计稿在代码工程增改页面

两类活它都干

改设计稿

一句话交代清楚，AI 直接在设计稿上动手——批量改文案、换主题色、整理图层，动手前先列清单让你确认。

设计稿 → 代码

AI 不再靠截图猜设计，而是直接读取设计稿里真实的层级、尺寸、颜色和变量，照稿写出对得上的代码。

只是想把网页导入成设计稿？

建议用 "Refore 网页转设计"（也提供 MCP）—— 在还原度和速度上都比 Refore Talk to Design MCP 高出一大截。

了解 "Refore 网页转设计"

手里只有截图，想转成设计稿？

建议用 "Refore 截图转设计" —— App、小程序的截图一键转成可编辑的设计稿，图标完美矢量化。

了解 "Refore 截图转设计"

有了 Refore Talk to Design MCP 可以让 Agent 做这些

连上之后，在 AI agent 里这样说话就行——这些示例也内置在插件面板里，随选随用。

改这块的样式

把我选中的这个图层的背景色换成 #4F46E5、圆角改成 12，其他不动。动手前先把要改的属性列出来让我确认。

批量替换文案

把我选中的这个图层里的占位文案（lorem ipsum、"标题 1"、重复的假数据）换成贴合它用途的真实内容，长度和原文案接近；只改文字，不动布局和样式。

做出状态变体

复制我选中的这个图层，在旁边排出 hover、禁用、加载中、空数据四个状态的变体，每个变体上方加一行文字标出状态名。

把写死的样式换成变量

检查我选中的这个图层里写死的颜色和文字样式，找出文件里已有的对应样式或变量逐个替换过去；没有对应项的先列给我，别自己造。

换掉主题色

把这个文件的主题色换成 #4F46E5：先找出用到当前主题色的颜色样式、变量和图层，列给我确认，再逐个替换。

按内容重命名图层

把当前页面里还叫 "Frame 123"、"Group 5" 这类默认名的图层，按它们的实际内容和作用重命名；动手前先给我一份新旧名对照表。

照现有风格新建一屏

参照当前页面已有 Frame 的排版和样式，在它们右边新建一屏，复用文件里已有的颜色样式和文字样式，别新造颜色。

按名字批量查并改齐

找出当前页面所有名字里带 "Button" 的图层，列出尺寸、圆角、填充色和文字样式，指出哪些之间不一致；我确认后统一改齐。

导出成图挑毛病

把我选中的这个图层导出成图片看一眼，指出对齐、间距、层级上明显不对的地方，并说明该怎么改。

支持的设计工具

MasterGo

Pixso

即时设计

Figma

常见 AI agent 都能接 ——Claude Code、Codex、WorkBuddy、Cursor、Kimi Code……任何支持 MCP 的 agent 都可以。

三步接上

1. 安装插件

在你的设计工具（MasterGo / Pixso / 即时设计 / Figma）里安装并打开。

2. 在 AI agent 里配置 MCP

先选你的设计工具，再把配置加进 AI agent——以 Claude Code 为例，在终端执行下面这条命令；其他 agent（Codex / Cursor / Kimi Code 等）把对应的 JSON 配置贴进它的 MCP 配置文件即可，插件面板里有每个 agent 的现成片段。

你的设计工具：

终端执行

claude mcp add refore-talk-to-mastergo -- npx -y @refore-ai/talk-to-design-mcp --platform mastergo

或贴进 MCP 配置文件

{
  "mcpServers": {
    "refore-talk-to-mastergo": {
      "command": "npx",
      "args": [
        "-y",
        "@refore-ai/talk-to-design-mcp",
        "--platform",
        "mastergo"
      ]
    }
  }
}

终端执行

claude mcp add refore-talk-to-pixso-china -- npx -y @refore-ai/talk-to-design-mcp --platform pixso-china

或贴进 MCP 配置文件

{
  "mcpServers": {
    "refore-talk-to-pixso-china": {
      "command": "npx",
      "args": [
        "-y",
        "@refore-ai/talk-to-design-mcp",
        "--platform",
        "pixso-china"
      ]
    }
  }
}

终端执行

claude mcp add refore-talk-to-jsdesign -- npx -y @refore-ai/talk-to-design-mcp --platform jsdesign

或贴进 MCP 配置文件

{
  "mcpServers": {
    "refore-talk-to-jsdesign": {
      "command": "npx",
      "args": [
        "-y",
        "@refore-ai/talk-to-design-mcp",
        "--platform",
        "jsdesign"
      ]
    }
  }
}

终端执行

claude mcp add refore-talk-to-figma -- npx -y @refore-ai/talk-to-design-mcp --platform figma

或贴进 MCP 配置文件

{
  "mcpServers": {
    "refore-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "@refore-ai/talk-to-design-mcp",
        "--platform",
        "figma"
      ]
    }
  }
}

3. 开口说话

回到 agent 直接描述你要做的事。插件面板会显示已连接的 Agent，还有一份可直接抄的 Prompt 示例。

让 AI 读懂你的设计稿

装好插件、配上 MCP，你的 AI agent 就多了一双看得见设计稿的眼睛和一双改得动设计稿的手。