7年了,前端终于不用当切图仔了?

0 阅读6分钟

昨天忙到半夜,今天早上起来就一直忙到现在,饭都没来得及吃。那么说创业就自由了的,一定是没有真正创过业😂

公众号通常每天都会发一篇文章,周末的时候 Xiaomi miclaw 发布了,多好的话题呀,结果一直忙到现在。得,也别写了。

不过今天跟两位同学沟通的时候,聊到了一个挺有意思的事情,那就是 D2C,也就是 Design to Code 的缩写,表示为:设计稿转代码

说实话,这个话题我挺有感触的。

倒不是因为我最近在做什么 D2C 相关的东西,而是因为这玩意儿 ---- 太特么能勾起回忆了。

我还记得 2019年那会儿,imgcook 刚出来的时候,那时候应该是第一次 “前端意思的言论出现”,不知不觉已经说了 7 年了

不过最初看到这个项目的时候我就在想,这玩意有想法呀~

完全想要解决前端被称为切图仔的问题。

而现在的这个 D2C 本质上就是想要把这个事情往前再推一步~

第一代的 D2C

传统的前端开发流程是这样的:设计师给个 Figma 或者 Sketch 文件 -> 前端同学打开 -> 看着那个花里胡哨的界面 -> 然后开始 -> 手撸代码。。。

有过这个经验的同学应该都知道 设计稿 和 实际开发是完全不一样滴。 设计稿标注的颜色和实际输出是不一致滴,间距是永远差那么几个像素滴,响应式完全要靠我们自己脑补滴。。。请不要怀疑出现这种问题是因为你们公司太小,大厂也是这样子滴。。。

听着多难受啊。。。 不过这确实也反映了前端开发中一个很现实的问题,那就是:大量重复、低价值的 UI 还原工作,占据了前端太多的时间和精力。 并且还要别人的冷嘲热讽 -- 切图仔...

所以当 imgcook 这类工具出来的时候,大家的反应分成两派。

  • 一派觉得:终于来了!解放了!以后设计稿上传,代码自动生成了
  • 另一派(包括我)持观望态度:这玩意儿真的能生成能用的代码吗?

事实证明,我们的观望是对的。

早期 D2C 工具的输出,用一个词形容就是 灾难现场

它生成的代码结构是这样的:

嵌套 18 层的 div,各种 inline style,语义化为零,可维护性为负数。你拿过来一看,好家伙,每一行代码是人能看的懂得。更别说什么组件化了。它就只是生成一堆看起来能跑的 HTML 而已。

所以第一波 D2C 浪潮,最后的结果是:大家试了一圈,然后默默回去继续手撸了。

第二代的 D2C

但事情在 2023 年之后开始变了

为什么?因为 AI 来了。

之前的 D2C 工具,本质上是规则驱动的。它靠一堆工程师写死的规则去解析设计稿,然后按模板输出代码。

但现在不一样了。AI 可以理解设计图了。

它知道这个区域是个导航栏,那个区域是个商品列表。它能根据上下文推断出某个元素应该是按钮还是装饰。它甚至可以根据你的项目结构,生成符合你团队规范的代码。

举个真实的例子。

前段时间我在折腾一个项目,需要把 Figma 设计稿转成 React 代码。我试着用了一下 Claude Code + Figma MCP 的组合。

具体流程是这样的:先把 Figma 设计稿的节点信息传给 AI,然后 AI 理解整个布局结构,最后生成符合项目规范的代码。

效果怎么样? 说实话,有点惊艳。

它知道什么时候该用 flex,什么时候该用 position。他甚至知道哪些元素应该抽成单独的可复用组件。

现在的 D2C 已经完全可用了吗?

但别高兴得太早

AI + D2C 真的完美了吗?

还差得远呢。

举个最简单的例子:你的 UI 设计图中如果存在交互动画的逻辑。比如:鼠标移入之后,展示不同的动画设计。

这些东西,甚至设计稿里都没有,AI 更猜不出来了。

所以 D2C 的本质问题从来不是能不能生成代码,而是 能生成多少有价值的代码

业内有个说法,前端开发的工作可以粗略分成两部分:

  • UI 还原(切图、写样式、调整布局)
  • 业务逻辑(数据交互、状态管理、复杂逻辑)

D2C 想要替代的,是第一部分。

但问题是,这两部分的边界并不清晰。

很多时候,UI 和业务逻辑是紧密耦合的。比如一个动态表单,UI 结构和数据结构互相依赖。比如一个复杂的数据可视化图表,展示逻辑和业务逻辑混在一起。

这种情况下,D2C 能做的就非常有限了。

写在最后

今天跟那两位同学聊完,我最大的感触是:技术的演进,从来不是非黑即白的。

D2C 不是救世主,也不是洪水猛兽。它就是一个工具。一个在特定场景下能帮你提效的工具而已。

就像当年的 Sass、Webpack、TypeScript 一样。

而 AI + D2C,我相信也会走同样的路。

未来的开发模式,一定是人机协作的模式。AI 负责处理重复、机械的工作,人负责决策、创造、把控质量。

而在这个过程中,前端程序员的核心竞争力,会从写代码的速度转向:理解业务的能力 + 设计架构的能力 + 把控质量的能力。

所以,与其焦虑,不如多思考下目前你手中的业务~

代码的终点不是代码,而是解决问题。

这个道理,放在哪个时代都不会过时。


这篇文章不知不觉的写到现在了,本来想上午发的,结果忙着忙着就拖到现在了。

创业嘛,就是这样。

有时候你想按计划来,但计划赶不上变化。有时候你想好好写篇文章,结果一堆事儿等着你处理。

好了,现在晚上 10 点半。。。我去吃个中午饭 哈哈~~