昨天忙到半夜,今天早上起来就一直忙到现在,饭都没来得及吃。那么说创业就自由了的,一定是没有真正创过业😂
公众号通常每天都会发一篇文章,周末的时候 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 点半。。。我去吃个中午饭 哈哈~~