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

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

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

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

@visper 直接文字指令？

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

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

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

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

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

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

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

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 参考来写网站
···

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

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

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

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

@maolon 可以详细介绍下吗

@815377546 🐮，可以试试看

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