之前因为没有什么必要，一直没有用 ai 工具 vibe coding ，都是古法手搓 + chat 的方式使用 ai
最近听说公司接了个新项目，貌似是甲方催得非常急，公司给开发报销 ai 的费用让我们开始用 ai ，大概是年后开始正式实施吧。
有个比较不理解的地方，比如说 cursor ，是如何帮助前端还原 ui 稿的呢？截蓝湖的图片给 ai ，ai 能还原出来吗？还是说有别的方式？
 |
1
twofox 1 天前
按照我的经验，cursor 能够按照截图实现个大概而已。很多细节都是对不上的。
样式细节都是要手动调的。 不过好像有 figma 插件，能够对接 figma ，但是我没用过。 至于业务逻辑的实现，则是非常强。比如说点这里需要有个弹窗、调接口需要传什么参数，都可以安排的明明白白 |
 |
2
laved 1 天前  1
截图是无法做到还原的，像还差不多，想要百分百还原还是要手动调整，毕竟有些切图之类的东西 你不提供 ai 也是最多给你做个占位，关键是想做到还原，prompt 也不好写
 截图比较方便，但是如果想要还原的好还是得上 MCP |
 |
3
ShaoYuanNuo 1 天前
figma 或者 pencil ，这两个都可以还原的比较高，仅是样式。我一般是 ide+cli,ide 画页面，cli 定义好 skills 和相关规则写具体的逻辑
|
 |
4
stinkytofux 1 天前 3
2026 还不会用 AI 编程的程序员, 我觉得可以称为新时代文盲.
|
 |
5
manami 1 天前 via Android
你发可以公开访问的图片地址给 AI ，效果会好很多
|
 |
6
surfwave 1 天前
公司有前端，就让前端去弄啊。你如果没搞过前端，最好自己学一下，完全依靠 AI ，后续需要频繁调整前端页面会比较麻烦。
|
 |
7
coldmonkeybit OP @twofox 明白了，跟我预期差不多，主要还是逻辑部分的实现
|
 |
8
xiaomushen 1 天前
1.不要追求 100%还原，如果要追求，20%要手写调试
2.功能点大概满足就行，项目如果复杂，细抠依然消耗人力 3.搞定甲方，意思就是：凑合着接收签字就行了 以上 |
|
9
coldmonkeybit OP @laved 如果是这样的话，还需要截图吗，还是样式部分就全部自己还原算了，哈哈
|
 |
10
cutecore 1 天前 1
@stinkytofux 夸张了，OP 只是古法了一点，chatgpt 问完 CV ，这样的人还不少。
|
|
11
coldmonkeybit OP @surfwave 我就是前端，不过我们业务 ui 不是大头，主要是二三维视觉部分占大部分开始周期，但也需要写 ui 就是了
|
 |
12
foryou2023 1 天前
做前端 ui 的话，用 opus 4.6 基本能还原 90% 以上，看过评测，ui 还原这方面还是 opus 比 codex 强很多
|
 |
13
wu67 1 天前
我真的很想问一下用 cursor 的, 那些快捷键绑定那么恶心, 为什么你们用得下去? 连方向键和退格键都给劫持了, 完全没法手动改...
|
 |
14
kakki 1 天前
Figma MCP 接上就行.现在用 AI 开发,最好的流程是先产品原型然后直接出活,最后再来设计边边角角.细节给效率让路.
|
 |
16
nakun233 22 小时 55 分钟前
主要看模型，gemini 截图基本可以还原
|
 |
17
abelmakihara 22 小时 2 分钟前
|
 |
18
SayHelloHi 21 小时 58 分钟前 2
用 AI 写的代码 后期维护有点累
因为不是自己写的 初看代码都不晓得写的是啥 上周刚刚修复了去年用 AI 写的代码（真的一点印象都没） |
|
19
laved 21 小时 56 分钟前
@coldmonkeybit #9 如果你是蓝湖的话 还是 c 端项目的界面的话 建议还是老老实实自己画算了（在我看来调 css 很难受 哈哈 ），figma 的话 可以考虑去用一下他们的 MCP ，我是公司用的蓝湖 所以我也没研究过 figma 的 MCP
|
 |
20
USNaWen 21 小时 46 分钟前
我司是 AI 写出原型，交互和逻辑 OK 之后整个 MVP ，相关方认为可用后转实际的前后端调整和接入工作。
|
 |
21
usVexMownCzar 21 小时 23 分钟前 via iPhone
24 年用过 v0 ，简单的还原很牛逼，复杂 UI 不清楚
|
 |
22
XuDongJianSama 21 小时 13 分钟前
现有的 ai ，都是用别的模型，把图描述成字，然后再读字。字里面肯定确实了 ui 的细节。
换工作流了，让产品或设计直接用 ai 写 html 来设计，然后写好的界面代码给你，接上逻辑，就能 1：1 复刻了 |
 |
23
fairytale110 21 小时 11 分钟前 via Android
这个问题要不你去问我 ai ，哈哈哈
|
 |
24
walkingmoonwell 21 小时 7 分钟前
@cutecore 有个不明白啊，比如我后端 springboot 项目的配置里有一些比如数据库连接信息、api 秘钥之类需要保密的配置项，那我整个项目给 cluade 访问会不会不安全？安全审计会不会说我数据泄露啥的
|
 |
25
cellsyx 21 小时 6 分钟前
只有 ui 稿截图想要完全还原不太现实, 视觉元素还好说, 主要交互类的操作信息没法单纯从图上获取. 我试过如果有类似具体实现的代码可以参考, opus 4.5 倒是可以按你给出的技术栈基本还原(比如把 dbeaver 这种界面用 React 复刻一个前端版本).
|
 |
26
jackOff 21 小时 6 分钟前
ui 不行，除非用专门做前端的 AI 分析工具，cursor 只适合手搓代码，直接按图画 UI 它做不到
|
 |
27
pweng286 21 小时 5 分钟前
给设计图生成大概
然后自己微调一下基本就行了. |
 |
28
ziyeziye 20 小时 38 分钟前
最简单的就是，使用 ide(vscode,cursor,antigravity)安装一个 opencode(另需安装 oh-my-opencode)插件，然后白嫖或者购买一个 kimi2.5 的开发套餐。然后直接截图或者把所有截图都明明好放在项目新建文件夹里面，然后让他根据截图写就行了，在 opencode 中使用 @来加载文件或者图片。kimi2.5 根据图片写前端的能力比 gemini3 还强，还原度非常高。提示词很简单，一步一步来。先让 AI 出一份项目说明文档.md ，包括技术栈架构等，然后和 AI 说，@项目架构.md 根据文档初始化项目基本框架,只要一个 demo 页面，要能直接运行。然后新开一个窗口，@docs/首页.jpg 根据图片写一下首页。 还有一下进阶技巧是使用 AI 开发规范约束框架，比如 openspec speckit 等，你可以自己研究。不过你只是根据截图全新写可以先不用
|
 |
29
anyscript 20 小时 4 分钟前
可以截图，截图的基本都是不准的，只能保证个大概，像素级还原目前来看感觉还是有点难度，我这边用了 figma mcp 也无法保证能完全还原，还有就是如果需要组件化开发很大程度依赖于设计稿的设计规范
|
 |
30
ShineyWang 20 小时 4 分钟前 1
|
 |
31
jevonszmx 10 小时 0 分钟前
使用 gemini 让他参考生成 json 格式，然后拿 json 格式再给 cursor 参考
|
 |
32
viking602 3 小时 14 分钟前
可以考虑在 v0 先做一版实现你的基础需求 然后再让 cursor 这种介入修改 我觉得是比较可用的
|
Select Language