AI 辅助编码在实际业务前端落地效果如何? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
dickeylth
V2EX    程序员

AI 辅助编码在实际业务前端落地效果如何?

  •  
  •   dickeylth 43 天前 5213 次点击
    这是一个创建于 43 天前的主题,其中的信息可能已经有所发展或是发生改变。

    AI Coding 新闻天天有,Demo 天花乱坠个个都是 SOTA 。

    抛个实际点的问题,前端工程师们实际在 PC 中后台通过源码构建的场景,利用 Figma + AI 辅助( Cursor/Claude Code/...)完成业务需求的实际效果怎么样,能满足预期吗?有感觉比较满意的经验分享吗?

    55 条回复    2025-09-05 14:51:12 +08:00
    mumbler
        1
    mumbler  
       43 天前   1
    25 年都过去三分之二了,还在怀疑 vibe coding 的能力,别人说不好你就继续刀耕火种吗
    midsolo
        2
    midsolo  
       43 天前
    前端早就能 vibe coding ,后端还是要费点功夫,要把需求拆成极小的单元任务块才行。

    公司的祖传项目用 DDD 重构时,面对项目中总数高达 27w 行的存储过程,cursor 都冒烟了也毫无办法,只能靠人工一个一个的拆。
    dickeylth
        3
    dickeylth  
    OP
       43 天前
    @mumbler 我没有怀疑,是实际遇到一些 case 发现并不好解决,想请教下看看大家的经验,你怎么就能断定我在刀耕火种呢?如果你有实际的效果特别满意的 case ,可以分享下经验,不要纸上论道。
    nanyong0627
        4
    nanyong0627  
       43 天前
    @dickeylth 我觉得你不如把你的 case 发出来..
    dickeylth
        5
    dickeylth  
    OP
       43 天前
    @dlmy 前端也有前端的痛,多模态可视化的能力目前看还达不到像素级精准还原的要求,figma MCP 也不完全是银弹(除非 Figma 和 PRD 质量都非常高),另外数据处理逻辑在复杂业务场景里也会很碎片化,交给 AI 要想干好,实测也需要很多上下文手把手的补充比如这里显示的数据从哪个字段取、面向展示需要做什么额外格式化逻辑等等
    dickeylth
        6
    dickeylth  
    OP
       43 天前
    @nanyong0627 可以,上一条回复补充了
    dickeylth
        7
    dickeylth  
    OP
       43 天前
    加一些具体描述以免讨论泛泛而谈:

    1. 面向的是中后台依赖 Pro Code (源码开发)场景,对 UI 有一定高保真还原要求;
    2. Figma 和 PRD 受个体差异质量无法要求,Figma MCP 返回的结构化数据里节点排列可能会和在 Figma 中看到的图比如顺序上有差异,PRD 中可能会混合前端和后端的需求;
    3. 部分场景下针对已有功能的优化不一定有完整的 Figma ,可能产品会基于线上截图给一些调整后的效果图;而对于图像的 OCR 识别,现成的即使是最好的 Claude 系模型也还做不到像素级精确识别布局间距这些信息;
    4. 接口返回字段和页面 UI 上的映射关系,就过往的开发模式依赖于前后端的沟通,存量的业务逻辑在有限的注释量下交给 AI 来消化
    zuosiruan
        8
    zuosiruan  
       43 天前
    ai 在前端就是无敌的存在
    elmelloi
        9
    elmelloi  
       43 天前
    写后台这种有主流组件库的比如 antd 非常好用,你把需求描述清楚生成的基本可用。如果是 C 端自定义样式的组件,哪怕有 figma MCP 生成的效果也是一坨。
    elmelloi
        10
    elmelloi  
       43 天前
    如果你只在乎功能可用,然后样式是基本美观的话,用 ai 工作效率非常高。但是样式交互定制化要求非常高的话,还是要手搓。我是这么认为的。
    zhousystem
        11
    zhousystem  
       43 天前
    前端这个职业可以说已经废了。 即时是用 GitHub Copilot 里非常辣鸡的 GPT-5 min 写出来的落地页也非常的好。
    MrGba2z
        12
    MrGba2z  
       43 天前   1
    讲个这周的事情

    SMS Forwarder 这个软件正式开始收费了

    摸鱼半天写了个替代品侧载到自己手机上(没有一行代码是自己写的, 我也从没写过安卓)完美代替
    MindMindMax
        13
    MindMindMax  
       43 天前
    个人的体验:对于视觉要求(例如元素位置精度、动画效果)不高的 UI 基本上能搞定。
    murmur
        14
    murmur  
       43 天前
    如果是手写 css 若一点,但凡你用那种助记词,ai 完爆初中级前端,你还得背助记词,ai 直接写的又快又好
    littlebaozi
        15
    littlebaozi  
       43 天前   1
    涉及一些复杂的业务逻辑,还不如自己想想写得快
    weixind
        16
    weixind  
       43 天前   3
    你的感觉没错。

    因为前端的反馈周期最短,浏览器就能直接运行,所以登上 “愚昧之巅” 的人最多。

    现在设计稿的还原还处于“史密斯吃面”的初级阶段。

    你可以生成一万个史密斯吃面,都是有两个眼睛一个鼻子,至于眼睛在哪鼻子在哪,属于管你这那的,就问你有没有两个眼睛吧。

    对于设计稿还原,你直接盯着 figma 和 figma 插件的生态就可以了,真到可用的阶段,一定是最先反映到最前沿。
    ShayneWang
        17
    ShayneWang  
       43 天前
    如果还有机会换工作,面试的时候我只能说熟练编写各种 AI 工具提示词...
    jones2000
        18
    jones2000  
       43 天前
    1. 对于能力低的开发,AI 辅助编码是有用的,反正也不会写, 没有思路, 用了 AI 起码能把代码搞出来, 至于对不对,就看 AI 了。
    2. 对于能力强的开发,AI 辅助编码比较鸡肋,如果描述少了,AI 就根据自己的思路逻辑写代码,可能跟你的思路不一样,这个时候就比较变扭了。如果把自己的思路描述很详细,其实跟自己写代码时间差不多,有时候用 AI 可能更费时间,你还要检查 AI 的代码是不是根据你的思路写的。
    ryncv
        19
    ryncv  
       43 天前   1
    cursor + claude4 。在公司已经几个月没有手写代码了。。
    x86
        20
    x86  
       43 天前
    现在真可以用嘴写代码了
    shakukansp
        21
    shakukansp  
       43 天前
    挺好啊,新功能如果和老功能差不多,我就跟 cursor 加一句说你参考下别的页面看着办
    wu67
        22
    wu67  
       43 天前 via Android
    @MrGba2z 啊?

    防诈提醒:SmsForwarder 完全免费开源,请您在 打赏 前务必确认是否出于自愿?本项目不参与任何刷单返利担保!请您远离刷单返利陷阱,谨防网络诈骗!
    https://github.com/pppscn/SmsForwarder
    shiweifu
        23
    shiweifu  
       43 天前
    面对一般交互的项目,属于有嘴就能写
    kzfile
        24
    kzfile  
       43 天前
    某些复杂的细节要是说出来,还不如我直接上手干,
    当然因为业务扯皮,很多细节其实都没啥意义
    wtf12138
        25
    wtf12138  
       43 天前
    简单的增删改查表单页完全可以一字不改,业务逻辑复杂的得拆的很细和 AI 说,反而不如自己写,还有一些地图应用,生成的都不行
    lizy0329
        26
    lizy0329  
       43 天前
    1 有特定 UI 要求, 图片/动效 较多的,AI 无能为力,或者说你压根不知道如何清晰地表达
    2 你需要不断修改项目的 project_rules 或者喂 context7 的文档, 反反复复地调试
    3 对 UI 库上的每个组件形式, 需要单独调试,特别是弹窗, 一连串的交互动作,特别难
    4 在使用 AI 写项目前,要求你对整个项目有一个充分的认知, 可以让 AI 写 prd,一项项对. 同时要将 数据库, 存储, 环境 等提前告知 AI

    总之 AI 适合没有特定 UI/交互要求的项目, 最好能从 0.0.1 版本每次只加 1 个功能,慢慢累加
    musi
        27
    musi  
       43 天前 via iPhone   3
    说 AI 在前端无敌的,你们真的用 AI 去一比一还原公司那质量不高的 figma 稿子了吗?
    hemllimoer
        28
    hemllimoer  
       43 天前   3
    我倒觉得 AI 在后端使用更丝滑,前端需要 UI 还原,交互多的也不好描述清楚,还有自动化测试我们前端也没有,纯用 AI 还是不太靠谱,要自己读 AI 写的代码,大量测试完善。
    abelmakihara
        29
    abelmakihara  
       43 天前
    很明显写接口用 ai 和功能更好用 不是很懂那些写页面的是不是没 ui 或者管理后台随便糊弄就行的..
    dyq917
        30
    dyq917  
       43 天前
    @zhousystem 看来只做这类项目啊
    cutpictureboyxx
        31
    cutpictureboyxx  
       43 天前
    是不是说 AI 在前端无敌,AI 在前端能完全 vibe coding 的都是后端。真正对前端要求高一点
    复杂一点的商业化的项目,AI 目前来说还是存在很多问题,可以辅助编程,但是完全 vibe coding 只能说 demo 还行。
    arayinfree
        32
    arayinfree  
       43 天前
    后端更容易,接入第三方服务,直接丢 接口 和 文档 让 ai 实现. 当然前提是我们系统设计的合理.接入实现接口即可. 例如下单,付款,回调,验证 ...
    dingxi
        33
    dingxi  
       43 天前
    感觉在做交付周期短,小外包项目的时候,出活儿特别快。

    但如果,在自研公司,ai 的作用,更大的作用还是在,解决特殊场景时,提供你方案和思路,尤其是和业务关联不强,但复用场景多的 工具函数,组件。 完全可以交给 ai 去写,自己 review ,省事很多
    murmur
        34
    murmur  
       42 天前
    @musi 没有 1:1 还原了,to c 的系统就那么几个,to b 的只要能做出来能跑通就赢

    大量的开发都是企业应用,toc 应用我 5 年不装新的都不会有什么损失
    Lexin914
        35
    Lexin914  
       42 天前
    设计稿还原现在还不行,其他能力真的很强,拿来写一些公司内部项目是真不错(对设计交互无硬要求的)
    musi
        36
    musi  
       42 天前
    @murmur 只能说业务不同,况且打工人哪有能力去左右老板?我要是老板我还搞个屁的开发
    vitoaaazzz
        37
    vitoaaazzz  
       42 天前
    嵌入式 C/C++、工具脚本 python 、后端 Java 、前端 vue 。
    全栈都能通过 cursor 提高开发效率,你要全自动编程现在还远远达不到,但是辅助编程越是资深工程师效率的放大倍数越高。
    layxy
        38
    layxy  
       42 天前
    写工具还行,写页面就是屎山,写业务目前还是个半吊子,别说我没拆分和规划,拆分了,规划了,但是反复出错
    gerorge
        39
    gerorge  
       42 天前
    我的代码 50%都是 ai 写的 复杂逻辑都交给 ai 来写了 我只细微调教
    leega0
        40
    leega0  
       42 天前 via iPhone
    用 AI 完成了一个后台管理系统,纯手写的逻辑代码不超过 100 行,大量时间是在告诉它怎么做和对它生成的界面进行微调,不过期间也是发现了问题,给再高清的图片也无法 1:1 还原,让它改会越改越复杂,例如布局上 CSS 几行代码可以搞定的东西,它要写数倍代码,3d 大屏带交互这类的就更不用说了,基本上不可用。
    Chuckle
        41
    Chuckle  
       42 天前
    能搞定非业务的,比如让 ai 帮整个表单架子还是 ok 的,但是表单延申出来的动态逻辑控制、校验规则之类的,还是得靠人写,也就是还原产品 prd 里那些弯弯绕绕的逻辑。另外写工具也不是万能的,我最近在重构老页面,让 ai 帮我封装 antd 的 Formitem,支持双向字段映射,ai 写不出来,可能是因为没学过,我在网上也没搜到类似的实现。
    SaiyZhao
        42
    SaiyZhao  
       42 天前
    UI 实现没问题,但是 vibe code 代码都是屎山,当然很多初级根本不明白屎山是什么。还是只能当工具用,不过整体代码效果比去年好很多了。
    raolight
        43
    raolight  
       42 天前
    Ai 写逻辑和功能挺强的,拿来写设计稿 UI 就算了,别折磨自己
    shaojian0702
        44
    shaojian0702  
       42 天前
    2c 的,只能生成大体结构,好多还是要自己写。正常业务逻辑可以写个架子,然后跟着调整,实现出来就是流水账。不想费脑子追求优雅的话,就当跟 ai 聊天了。
    accelerator1
        45
    accelerator1  
       41 天前
    看一些回复就知道有些人对于前端的认知还在 html+js+css 的时代,感觉自己分分钟能 cover 一样,要是真能 cover ,干嘛不把前端的工资一起拿了,对吧全栈工程师

    2B 的场景下,只要项目组件的接口/文档足够详细,完全可以让 AI 去做,大部分也能完美实现; 2C 的话,你要浪费不少 token 了,因为基本做不到你满意的效果(就 V2EX 上经常出现的 vibe coding 的产品页面,一股子 AI 味),v0 也做不到像素级还原,还是要自己一个细节一个细节的去对话调整(我的 cursor 60 刀套餐都是浪费在页面微调上了)。
    cochlea
        46
    cochlea  
       41 天前   1
    作为深度体验以及准备转行到 AI 赛道的前端来说下,目前生成的效果完全取决于模型的效果,此外存在一系列问题,看你能不能接受
    1. 设计图的还原度,结合 mcp 可以大概还原,但是对于一些复杂的设计图,随便举个例子来说例如大屏根本没办法写。
    2. 对于多次迭代,一个项目最初通过 AI 来迭代,但是后续功能依然通过 AI 来迭代,来个几次你就会发现上下文不够,或者说改了一处另外一处出现问题
    3. 对于提示词你需要结合业务来梳理,但是实际上这个过程非常的繁琐,因为如果你要效果好,就必须输入很详细,但是很详细真的很浪费时间,另外如果出现细微的错误,你依然要指点它如何排查,如何修改,这个过程也不会轻松
    4. 对于我来说我有工程洁癖,必须按照最佳实践来写,但是问题在于 AI 的训练有时间节点,很多库或者调用都不会最新的可能,以前的写法都被废弃等。
    5. BUG ,这个是最让人头疼的,就是莫名其妙的陷入一个问题出不来,你需要协助它来排查,甚至可能还要自己编码一部分,例如我有一个播放器的需求,让他生成一个音乐播放器,明确还原我的要求...但是最终生成的结构没有遵从样式,导致我需要自己来改。
    6. 最重要一点就是,你如果不懂前端就根本没办法掌握 AI ,别人给你写的代码,你能读得懂吗,真的能定位出来问题吗?我持怀疑态度。
    ...
    v1
        47
    v1  
       41 天前
    @mumbler vibe coding 这么好,您怎么还没财富自由,啊对,您在井底有键盘就行了,一梭子的事情
    MrGba2z
        48
    MrGba2z  
       41 天前
    @wu67 我指的是 play store 上那个

    这类软件同名的很多

    我用的那个收费了之后 我很清楚应该有很多别的软件能有这样的效果,我那天是纯粹想 vibe coding 一下 Android app 所以没去找现有的同类产品。
    liangjiujiu
        49
    liangjiujiu  
       41 天前
    @zhousystem 但凡你稍微使用过都不会说出这种没有一点边界感的话
    zqguo
        50
    zqguo  
       40 天前
    @zuosiruan #8 怎么个无敌 ?能具体说说 ?
    94
        51
    94  
       40 天前
    @dickeylth #7 ,技术不是万能的,很多时候不能靠程序去规范和规避工作流程和团队沟通上的所有问题。

    一般项目都是在项目开始前制定好一个样式规范,所有的间距字号杨式布局等等都是按照这个规范来约定,那么可以让 AI 很快的糊出来。
    没有这先行的标准,并且有第 3 条和第 4 条这种意识流或者口口相传的情况的话,即使全手写也没办法保证一把能过走查。虽然可以用提 issue 的方式慢慢调,但效率肯定不如截图标注和口口相传。

    如果大部分情况下其实开发的都是管理后台项目,早几年通过简单的表单生成器都能胜任的工作 ai 肯定可以胜任的。
    如果是一些 2C 的项目或者落地页。在页面高度定制的情况下,除非 UI 同学在 figma 中或者提交蓝湖前做好各种命名和层级拆分不然是没办法避免第 2 条的问题。
    还有很多 UI 设计稿都是靠手拖,没有使用网格和参考线,即使有像素级的还原也会有各种对齐的问题。
    zhousystem
        52
    zhousystem  
       39 天前
    @liangjiujiu 不要把自己的已有的知识和技能看的太重。 我不会写前端,我已经用 AI 给我写了支持全平台( electron/ios/android )的 VPN 应用。 从官网到应用全是 AI 写的。https://safewoo.com. 别说前端了,我 android 和 ios 从一丁点不知道怎么写到 AI 全写完也就各用半个月。
    coolmenu
        53
    coolmenu  
       39 天前
    还是看语言的,比如 elxir 这种小众的语言,AI 就明显资料不够,如果是 typescript ,java ,python 这种,问题不大,就是要控制代码,分层,不然就是 Claude 也是容易写出垃圾山,并且 Claude 有时候过度设计明显,不如 codex ,两个一起用。
    sakura1988
        54
    sakura1988  
       39 天前   1
    @zhousystem 我发现这帖子里很多人都像没干过活。自己写和给公司写是一个概念吗?
    dickeylth
        55
    dickeylth  
    OP
       36 天前
    @dfkjgklfdjg 认同,感谢回复
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     5224 人在线   最高记录 667       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 27ms UTC 09:21 PVG 17:21 LAX 02:21 JFK 05:21
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86