如题，我试了下 figma 的 mcp ，然后用 vscode+copilot 生成的代码也就是大体相似，一看细节，没有一处一样的，包括元素宽高啊，字体大小啊，完全不按照 figma 设计稿来
请问是不是我使用方法不对？请教下有没有人知道？
请问是不是我使用方法不对？请教下有没有人知道？
 |
1
musi 11 天前 via iPhone  1
你从哪里看到的 AI 擅长还原设计稿
|
 |
2
codehz 11 天前
vscode 的 copilot 也不支持多模态输入啊，那样从文本信息还原还能怎么精确呢
|
 |
3
horizon 11 天前
同问
|
 |
4
MENGKE 11 天前 1
AI 还原的质量，很大程度取决于给的 figma 设计稿图层的嵌套定位等是否符合规范
|
 |
5
v2pm 11 天前
cursor+gemini pro+figma mcp 还原度还是很高的。
还有另外一个办法，就是把截图+SVG 格式的图像发给 AI 引用，像 gemini 这种多模态模型可以直接看图像来设计界面。 |
 |
6
lzgshsj 11 天前
@codehz 亲测是支持的，截了一张网页截图，copilot 使用 claude opus 4.5 模型，Agent 模式。
它读出了图片上的内容，生成了 html 和 css ，把图片里的文字也还原了 |
 |
7
bjzhou1990 11 天前
都不需要设计图，我直接把截图丢给 gemini3 做出来的效果都几乎一模一样，甚至功能都全了
|
 |
8
zhengfan2016 11 天前 via Android
设计师：我就元素东拼西凑，我就 group 瞎命名🥴
|
 |
9
visper 11 天前
正确的做法是，叫设计师不要去搞什么 figma,直接用 ai 来生成前端。
|
 |
10
cfancc 11 天前
有没有可能是 copilot 太拉了
|
 |
11
liuliuliuliu OP PRO @v2pm 提示词有什么要注意的吗？我试了 gemini pro 效果也不理想
|
|
12
liuliuliuliu OP PRO @bjzhou1990 真假？细节都一样吗？在 ai studio 还是在哪里？
|
|
13
liuliuliuliu OP PRO |
|
14
liuliuliuliu OP PRO @cfancc 我试了 gemini 也不太理想啊，我就想是不是我的提示词有问题，还是我操作不对
|
 |
15
newtype0092 11 天前
你觉得的“大体相似”，在很多人眼里已经是“一模一样”了。
其实可以搞个 benchmark 来横评对比以下。 |
 |
16
byuan04 11 天前
和设计稿规范度直接相关
比如一个元素看起来在一个容器内, 单实际他们是平级的, 都在另一个容器的左上角 这样对齐 居中 都要自己写 promtps 转换 另外更加别说一些 UI 效果是乱七八糟元素堆叠的.... |
|
17
byuan04 10 天前
另外不同设备上字体不同, 导致文本高度不同
用高度自适应, 元素之间位置就会重复叠加偏移量, 最终对不齐 用高度固定, 文字又会被截断. 设置本文不截断, 导致横向元素也会错位 其他还有太多太多问题了.... |
 |
18
hubianluanma 10 天前
建议使用 Gemini3 试试，它在处理图片和前端的能力目前来看比较不错
|
 |
19
sentinelK 10 天前
因为设计图的元素关系和 UI 代码结构不是一比一对应的。
网页与 native 应用的 UI 代码结构又不一样。 这就导致设计图和代码实现之间的统计学最优解不太明显。 |
 |
20
gechang 10 天前
gemini3 或许可以，但是其他的都不行，我早就试过了
|
 |
21
shibushi233 10 天前
用了一段时间 figma ，后来发现还是直接 ai+html+css 更方便
|
 |
22
andyskaura 10 天前
我也是觉得 figma mcp 不太好用，可能是数据太多反而有误导，还原度不如直接截图
|
 |
23
mykaii 10 天前
写个单独的 html 模板项目，直接截图，mcp 还原度不行，还费 token
|
 |
25
HowardTang 10 天前
@MENGKE 同意,最近接触的一位设计师就喜欢藏几张隐形背景图在图层里
|
 |
26
X0V0X 10 天前
@HowardTang 笑死，一毛一样，一点图片，能把整个屏幕铺满
|
|
27
X0V0X 10 天前
让设计师根据 AI 生成的页面，图像素级还原成设计稿
|
 |
28
bearbest PRO 直接截图吧，figma 设计图中在修修改改的过程中会产生有很多干扰代码
|
 |
29
hemllimoer 10 天前
我用 figma mcp 和 augment 出来的还可以，不需要我怎么调整，除了图标和一些字体不对。界面很 ok
|
 |
30
yayoec 10 天前
感觉需要专门微调一个模型来做效果才好
|
 |
31
cheese 10 天前
设计师按照 html 和 css 的规范来做设计稿，就可以一比一还原了
|
 |
32
815377546 10 天前
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 参考来写网站 ··· |
 |
33
maolon 10 天前
我现在跟我们 ui 合作就是让她直接出 gemini 的 prototype ，绕过 figma 那步，人还觉得比让她做 figma 更省时间
|
 |
34
zephyru 10 天前
想用这种方式还原，必须设计稿符合编码规范，不然就像你说的没一个一样的，还不一定有截图还原效果好。
|
 |
35
Bigstupidcat 9 天前
@maolon gemini 的 prototype 是有专门的工作流吗？还是用 md 规范好
|
|
36
HowardTang 9 天前
@maolon 可以讲更多细节吗？ 是直接出图吗？
|
Select Language