时至今日，似乎还办法从 figma 设计图像素级的生成代码？这不应该是 AI 擅长领域吗？

[liuliuliuliu]

如题，我试了下 figma 的 mcp ，然后用 vscode+copilot 生成的代码也就是大体相似，一看细节，没有一处一样的，包括元素宽高啊，字体大小啊，完全不按照 figma 设计稿来

请问是不是我使用方法不对？请教下有没有人知道？

[musi]

你从哪里看到的 AI 擅长还原设计稿

[codehz]

vscode 的 copilot 也不支持多模态输入啊，那样从文本信息还原还能怎么精确呢

[horizon]

同问

[MENGKE]

AI 还原的质量，很大程度取决于给的 figma 设计稿图层的嵌套定位等是否符合规范

[v2pm]

cursor+gemini pro+figma mcp 还原度还是很高的。
还有另外一个办法，就是把截图+SVG 格式的图像发给 AI 引用，像 gemini 这种多模态模型可以直接看图像来设计界面。

[hakuya7]

@codehz 亲测是支持的，截了一张网页截图，copilot 使用 claude opus 4.5 模型，Agent 模式。
它读出了图片上的内容，生成了 html 和 css ，把图片里的文字也还原了

[bjzhou1990]

都不需要设计图，我直接把截图丢给 gemini3 做出来的效果都几乎一模一样，甚至功能都全了

[zhengfan2016]

设计师：我就元素东拼西凑，我就 group 瞎命名🥴

[visper]

正确的做法是，叫设计师不要去搞什么 figma,直接用 ai 来生成前端。

[cfancc]

有没有可能是 copilot 太拉了

[liuliuliuliu]

@v2pm 提示词有什么要注意的吗？我试了 gemini pro 效果也不理想

[liuliuliuliu]

@bjzhou1990 真假？细节都一样吗？在 ai studio 还是在哪里？

[liuliuliuliu]

@MENGKE
@zhengfan2016

设计师我们很难去控制啊……

[liuliuliuliu]

@cfancc 我试了 gemini 也不太理想啊，我就想是不是我的提示词有问题，还是我操作不对

[newtype0092]

你觉得的“大体相似”，在很多人眼里已经是“一模一样”了。

其实可以搞个 benchmark 来横评对比以下。

[byuan04]

和设计稿规范度直接相关

比如一个元素看起来在一个容器内, 单实际他们是平级的, 都在另一个容器的左上角
这样对齐 居中 都要自己写 promtps 转换

另外更加别说一些 UI 效果是乱七八糟元素堆叠的....

[byuan04]

另外不同设备上字体不同, 导致文本高度不同
用高度自适应, 元素之间位置就会重复叠加偏移量, 最终对不齐
用高度固定, 文字又会被截断.
设置本文不截断, 导致横向元素也会错位

其他还有太多太多问题了....

[hubianluanma]

建议使用 Gemini3 试试，它在处理图片和前端的能力目前来看比较不错

[sentinelK]

因为设计图的元素关系和 UI 代码结构不是一比一对应的。
网页与 native 应用的 UI 代码结构又不一样。

这就导致设计图和代码实现之间的统计学最优解不太明显。

[gechang]

gemini3 或许可以，但是其他的都不行，我早就试过了

[shibushi233]

用了一段时间 figma ，后来发现还是直接 ai+html+css 更方便

[andyskaura]

我也是觉得 figma mcp 不太好用，可能是数据太多反而有误导，还原度不如直接截图

[mykaii]

写个单独的 html 模板项目，直接截图，mcp 还原度不行，还费 token

[azev]

@visper 直接文字指令？

[HowardTang]

@MENGKE 同意,最近接触的一位设计师就喜欢藏几张隐形背景图在图层里

[X0V0X]

@HowardTang 笑死，一毛一样，一点图片，能把整个屏幕铺满

[X0V0X]

让设计师根据 AI 生成的页面，图像素级还原成设计稿

[bearbest]

直接截图吧，figma 设计图中在修修改改的过程中会产生有很多干扰代码

[hemllimoer]

我用 figma mcp 和 augment 出来的还可以，不需要我怎么调整，除了图标和一些字体不对。界面很 ok

[yayoec]

感觉需要专门微调一个模型来做效果才好

[cheese]

设计师按照 html 和 css 的规范来做设计稿，就可以一比一还原了

[815377546]

gemini3 听说很强，不过我还没试过。 我这里有一套工作流，你可以试试

···
复制网站：f12 把 html 复制给 cc ，提示词：在一个 html 文件里重建一个使用如下 css 的页面。

chrome 插件 VisBug ，快速获取样式，可以和 ai 沟通哪里需要修改。

html 生成出来后，提示词：

1 现在帮我生成详细的风格指南（ md 格式）,在风格指南中,你必须包含以下部分概述,配色方案,字体排版,间距,组件样式,阴影动画,圆角半径等等,然后生成详细的风格指南 design\-system.md 文档

2：页面意图识别

\* 理解每个页面的功能

\* 标注交互元素

\* 形成页面地图

3：组件库生成

\* 识别可复用组件

\* 自动去重和分类

\* 输出 component\-library.md

4：导航流程设计

\* 分析用户路径

\* 生成 navigation\-flow.md

\* 确保逻辑闭环

5：代码实现

\* 基于前 4 步文档

\* 自动生成 React 组件

\* 保持设计 1:1 还原

6：验证与修复

\* 对比原设计

\* 生成检查清单

\* 标注需要修复的地方

然后用这个 md 给 ai 参考来写网站
···

[maolon]

我现在跟我们 ui 合作就是让她直接出 gemini 的 prototype ，绕过 figma 那步，人还觉得比让她做 figma 更省时间

[zephyru]

想用这种方式还原，必须设计稿符合编码规范，不然就像你说的没一个一样的，还不一定有截图还原效果好。

[Bigstupidcat]

@maolon gemini 的 prototype 是有专门的工作流吗？还是用 md 规范好

[HowardTang]

@maolon 可以讲更多细节吗？ 是直接出图吗？

[gibber]

@maolon 可以详细介绍下吗

[YiFeiY]

@815377546 🐮，可以试试看

[YiFeiY]

@maolon 网页还是 app ？资深级别的设计师还是新手？