AI直接把Figma转代码,那么还需要前端工程师吗?
当UI发来Figma设计稿时,我尝试用AI工具自动生成前端代码,却因设计稿命名混乱导致失败。规范命名后,AI顺利生成高还原度代码,开发时间缩短至10分钟。作者反思:AI取代的是重复编码,而开发者需转型为“架构师”——定义规范、解决问题、沟通需求,将混乱转化为AI可执行的指令。未来的价值在于驾驭AI,而非与它竞争。
2025年8月18日,多云转晴,就像我的心情
今天下午,UI妹子在企业微信上“当”的一声甩给我一个Figma链接,后面跟了个“OK”的手势表情。一如既往的言简意赅,仿佛多打一个字,设计稿的美感就会流失一分。
搁在以前,我会把链接转给前端老王。但现在,我的工作流变了。我打开了我的trae pro,里面集成了Figma的MCP,这玩意儿配置很简单,只需要在trae中打开设置,定位到mcp tab页,再从市场添加mcp,搜索figma就可以,需要提前在Figma官网申请一个Token(免费的),mcp配置只需要这一个参数,然后提问时给他figma的url就能直接读取设计稿。
我满怀期待地把链接扔了进去,然后像个运筹帷幄的将军,对AI下达了一系列指令:
“用这个Figma链接,生成页面,文件位置、技术方案和代码参考/src/views/user-management
,保持队形。”
我特意强调了参考老页面,就是怕AI放飞自我,给我搞出一套天外飞仙式的代码,那我还得一个一个文件给它“拨乱反正”。
回车。风扇开始“嗡嗡”作响,进度条在跳动。我端起我的保温杯,拧开,一股枸杞混合着绿茶的蒸汽氤氲开来。我心想,这下牛了,一杯茶的功夫,活儿干完,岂不是可以提前进入“垃圾时间”?
结果,现实给了我一记响亮的耳光。
一连串的Error
,核心意思是资源下载失败。我愣了一下,随即失笑。嗨,我当是什么高大上的AI伦理问题,搞了半天是目录权限不够。这感觉太熟悉了,就像你折腾了半天服务器连不上,最后发现是防火墙端口没开。AI再牛,也得遵守操作系统的基本法。
行吧,sudo chmod -R 777 ./assets
,简单粗暴,先跑起来再说。程序员的浪漫,有时候就是这么朴实无华。
权限问题解决了,我再次运行。这次倒是没报错,但生成出来的东西……一言难尽。好几个页面揉在了一起,组件命名乱七八糟,像一锅东北乱炖。
我点开Figma链接一看,瞬间明白了。UI妹子为了方便,把好几个页面原型都画在了一个画板里,而且偷懒没给每个页面清晰地命名,好几个都叫“未命名-1”、“详情页-副本”。
AI,卒。
它再聪明,也顶不住上游数据源是“一坨屎”。Garbage in, garbage out,这个黄金定律在AI时代不仅没有失效,反而被无限放大了。
那一刻,我没有感到挫败,反而有一种奇妙的“果然如此”的快感。我意识到,AI并没有让我失业,它只是把矛盾给转移了。以前是我和前端老王吐槽UI不规范,现在是我,在给AI当“产品经理”,去和UI沟通:“美女,麻烦把Figma里每个独立的页面用Frame框起来,并给一个清晰的、唯一的英文名,拜托了。”
UI妹子估计也是第一次收到这种“需求”,回了我一个“猫猫探头”的疑惑表情,但还是照做了。
当她把规范命名后的新链接发给我时,世界清净了。
我重新执行了命令。这一次,丝般顺滑。目录结构、代码文件、资源图片,被AI安排得明明白白。它不仅下载了所有图片资源到正确的目录,还真的“学习”了我给的范例代码,无论是变量命名还是函数组织方式,都和我项目里其他代码的“气质”高度统一。
我把它生成的代码合进项目,npm run dev
。页面在浏览器里亮起,还原度95%以上。剩下的5%,是一些交互细节的微调。整个过程,刨去跟UI沟通和解决权限问题的时间,纯粹的“开发”时间,不超过十分钟。
我靠在椅背上,长舒了一口气。
今天,我没写几行代码,但我做了什么?
- 我诊断了问题:我明白了AI失败的原因是上游数据不规范。
- 我定义了标准:我向UI同事提出了AI能理解的、结构化的交付标准。
- 我配置了环境:我解决了AI工具在本地运行时的权限问题。
- 我指定了架构:我明确了技术选型,并提供了“代码范本”来约束AI的输出风格。
我干的这些活儿,听起来是不是很像一个……项目经理、或者一个架构师?我不再是那个搬砖砌墙的人,而是那个给AI画图纸、定标准、清路障,最后再来验收的“监工”。
那个经典的问题又一次浮现在我脑海里:我们还需要前端吗?
但今天,这个问题有了新的答案。也许,我们不再需要那么多“切图仔”式的前端,但我们比任何时候都更需要“前端架构师”或者“前端体验工程师”。
AI像一个能力超强、但心智为零的实习生。它能完美执行指令,但你不能指望它去理解“业务”,去定义“规范”,去进行“沟通”。它能帮你把砖头码得又快又好,但哪里该开窗,哪里该走门,还得你这个“人”说了算。
我们的价值,正在从“动手实现”,悄悄转移到“定义问题”和“设计流程”上。
当AI能完成80%的重复性编码工作,我们这些“老鸟”的职责,不就是去搞定剩下那20%的、充满混乱、沟通和不确定性的“人”的事情吗?去定义好那80%的工作,让AI能顺利接手。
这么一想,好像也没什么可焦虑的。毕竟,跟机器打交道,总比跟人打交道要简单点,不是吗?
嗯,至少AI不会在你提需求的时候,回你一个“猫猫探头”的表情包。
更多推荐
所有评论(0)