Refore Talk to Design 免费使用

让 AI 与你的设计稿直接对话

在 AI agent 里配置一个 MCP，它就能照着设计稿在代码工程里改页面、建页面，也能按你的话直接改设计稿。

两类活它都干

设计 → 代码

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

改设计稿

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

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

那更适合用 Refore 网页转设计（也提供 MCP）——它就是专门干这事的，在还原度和速度上都比 Refore Talk to Design MCP 高出一大截。

了解网页转设计

直接抄这些 Prompt

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

试试通没通

用 Refore Talk to Design 这个 MCP 读一下我正在设计工具里编辑的这份设计稿，告诉我文件名、里面有哪几个 Page，以及我现在停在哪个 Page 上。

照设计稿新建页面

读取我选中的这个图层，在我的工程里新建对应的页面。优先复用工程已有的组件和设计 token，缺什么才新写；动手前先列出你打算复用哪些组件。

照设计稿改现有页面

读取我选中的这个图层的层级、尺寸、间距、颜色和文字样式，在我的工程里找到对应的页面或组件，列出它跟设计稿不一致的地方；我确认后再改代码。

对齐工程组件库

盘一遍我选中的这个图层里用到的按钮、输入框、卡片等元素，跟我工程组件库里的组件逐个对应，给我一份「设计稿元素 → 工程组件」的映射表，标出哪些没有现成组件、需要新建。

查代码和设计稿的差异

挑出当前页面上的主要 Frame，逐个和我工程里对应的页面比对，列出实现和设计对不上的地方（间距、颜色、字号、缺失的状态），按严重程度排序。

照多个尺寸稿写响应式

把当前页面上同一个界面的桌面版和移动版 Frame 找出来，逐项列出两版之间变化的布局、间距和字号，整理成断点规则，再照着它在我的工程里实现响应式。

导出实现规格

读一下我选中的这个图层，把布局方式、内外间距、对齐规则、字号字重和颜色整理成一份实现规格，每个颜色和尺寸都给具体数值。

同步设计 token 到工程

把这个文件里的颜色样式、文字样式和变量整理成设计 token，和我工程里的主题配置（Tailwind / CSS 变量）逐项对账，列出缺的和对不上的，再补进去。

导出这块的图片资源

把我选中的这个图层里的图标和插图逐个导出成图片，按用途命名，放进我工程的静态资源目录。

支持的设计工具

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 就多了一双看得见设计稿的眼睛和一双改得动设计稿的手。