[免费福利] Refore Talk to Design MCP：Agent 改设计稿，设计稿 → 代码

给大家送福利了，Refore Talk to Design MCP 现在可以免费使用：在设计工具里装上插件、给 Agent 配上它，AI Agent 就能读懂、也改得动你的设计稿——设计稿 → 代码，以及改设计稿，两类活它都干。

MasterGo、Pixso、即时设计、Figma 都支持，操作完全一样；Claude Code、Codex、WorkBuddy、Cursor、Kimi Code……任何支持 MCP 的 Agent 都能接。

这条通道是双向的：既能照着设计稿写代码，也能让 Agent 回过头来改设计稿。

它干两类活

设计稿 → 代码：让 Agent 读你选中的图层，在工程里新建对应的页面（网页、App、小程序都一样）。它会优先复用工程里已有的组件和设计 token，缺什么才新写，动手前先把打算复用哪些组件列给你看。反过来也能查——挑出当前页面的主要 Frame，逐个和工程里对应的页面比对，把间距、颜色、字号、缺失状态这些对不上的地方按严重程度排出来。

改设计稿：一句话交代清楚，Agent 直接在稿子上动手——换主题色、批量改文案、整理图层、生成一个亮色版本。动手前它会先列一份清单让你确认，不会闷头就改。

不用自己从头想 Prompt——插件面板里内置了一批现成的示例，拿去改一改就可以了。

实操：给一份深色稿生成亮色版本

演示里用的是即时设计 + Codex：把安装那句话发给 Codex，它自己装好，插件面板里就出现了「Codex MCP client 已连接」。接着选中一个图层，说一句「生成对应的白色亮色版本」。

Agent 干的不是「换个背景色」这么粗糙的事——它先定位到那个节点，确认现有样式和关联资源，再按同一套结构重新生成一份亮色版本，最后自己回头检查状态栏图标、导航图标在浅色背景上的对比度够不够。

六分钟后，亮色版本落在原稿右边：

只是想把网页导入成设计稿？用 “Refore 网页转设计”

Refore Talk to Design MCP 适合让 Agent 读设计稿、写代码、直接改稿。注意：因为靠 Agent 大模型驱动，整个过程是比较慢的，尤其是图片多的场景下。

如果只是把现有网页转成设计稿，建议用专门做这件事的 “Refore 网页转设计”，速度更快，还原度也更高。

Refore 网页转设计：

想让 Agent 自动导入页面，或沿着操作流程边点边导，可以用 Refore 网页转设计 MCP（只能用于导入，实现原理不一样，导入更精准，可以和 Refore Talk to Design MCP 一起安装使用）；

如果更看重稳定性和还原效果，建议直接用 Refore 网页转设计浏览器插件录制网页并导入，或把 AI 生成的 HTML 文件直接拖入设计工具中的 Refore 网页转设计插件导入。