Refore Talk to Design MCP
ReforeAI
设计稿 → 代码，AI 改设计稿. 支持 Claude Code、Codex、WorkBuddy、Cursor、Kimi Code 等任何支持 MCP 的 agent 装上 Refore Talk to Design，你的 AI agent 就能直接读取你正在编辑的这份设计稿的真实数据：图层层级、尺寸间距、颜色与文字样式、设计变量，还能按你的话直接修改设计稿。 设计 → 代码 ·照设计稿在代码工程里新建页面、修改现有页面，优先复用工程已有组件和设计 token 逐项比对代码实现与设计稿的差异（间距、颜色、字号、缺失状态），按严重程度排序 把布局、间距、字号、颜色整理成带具体数值的实现规格 同步设计 token：颜色样式、文字样式、变量与工程主题配置（Tailwind / CSS 变量）逐项对账 照桌面版 + 移动版多尺寸稿整理断点规则，直接实现响应式 图标插图批量导出、按用途命名，放进工程静态资源目录 等等 改设计稿 一句话批量替换占位文案、重命名 "Frame 123" 式图层 换主题色、把写死的样式替换成已有变量，动手前先列清单让你确认 照现有风格新建一屏，批量排出 hover / 禁用 / 加载中 / 空数据状态变体 按名字批量审计组件样式是否一致，确认后统一改齐 等等 三步接上 安装并打开本插件 把插件面板里的 MCP 配置加进你的 AI agent（面板内置 Claude Code / Codex / WorkBuddy / Cursor / Kimi Code 各家的现成配置片段，一键复制） 回到 agent 开口说话。面板还内置了一份可直接抄的 Prompt 示例库，支持按选中图层的节点 ID 精准指代 视频教程请看官网：https://reforeai.cn/talk-to-design

标签

  • 版本 4: 2026年9月20日

    <p>优化提示</p>

  • 版本 3: 2026年9月09日

    <p>调整内容布局</p>

  • 版本 2: 2026年9月07日

    <ol><li><p>优化：安装指引</p></li><li><p>新增：操作日志</p></li></ol>

  • 版本 1: 2026年9月02日

最后更新时间：9/20/2026

技术支持：https://reforeai.cn/talk-to-design

标签

mcp
AI
AI改设计
设计转代码

最后更新时间：9/20/2026

技术支持：https://reforeai.cn/talk-to-design