即刻App年轻人的同好社区
下载
习惯性早起🚶思考，总结一下最近一个月左右的时间在前端AI上做的事情，主要的精力和时间都在探索AI驱动的Design To Code，经过在实际项目中的初步运用，最终的结果是：
1）从布局样式来看，还原度可达到95%以上，相比较多模态AI驱动的 Image To Code，已经遥遥领先了。
2）从代码上来看，不是生成简单的div之类的粗暴代码，而是能够结合公司的代码组件库来生成代码，比如antd、mui、私有组件库等。
3）从时间上来看，比如针对一个页面，之前可能需要4个小时的时间来还原布局样式以及业务逻辑，现在借助Design To Code，花几分钟的时间生成样式和布局，再花几分钟的时间基于业务规则生成业务逻辑，整体10分钟左右，这种提效是很明显的，开发人员相当于直接拿D2C生成的页面来对接后台api数据就可以了。
一些思考和建议：
1）如果公司的研发工作流是相对规范的，有专业的UI设计人员，建议探索一下design to code，这件事带来得提效是巨大的，同时借助AI，这件事比常规的design to code简单，而且生成的代码质量也有过之而无不及。
2）推荐使用Figma作为设计工具，它的整个生态和设计理念跟前端的契合度是很高的（自动布局对应flex，main component 对应 code component），通过Figma插件，可以很好的收集页面元素信息。
3）前端人可以学习一下ui设计相关的知识，比如怎么用figma做设计稿，再配合d2c，相当于一个人可以快速搞定 ui设计、前端研发。
#前端ai
1）从布局样式来看，还原度可达到95%以上，相比较多模态AI驱动的 Image To Code，已经遥遥领先了。
2）从代码上来看，不是生成简单的div之类的粗暴代码，而是能够结合公司的代码组件库来生成代码，比如antd、mui、私有组件库等。
3）从时间上来看，比如针对一个页面，之前可能需要4个小时的时间来还原布局样式以及业务逻辑，现在借助Design To Code，花几分钟的时间生成样式和布局，再花几分钟的时间基于业务规则生成业务逻辑，整体10分钟左右，这种提效是很明显的，开发人员相当于直接拿D2C生成的页面来对接后台api数据就可以了。
一些思考和建议：
1）如果公司的研发工作流是相对规范的，有专业的UI设计人员，建议探索一下design to code，这件事带来得提效是巨大的，同时借助AI，这件事比常规的design to code简单，而且生成的代码质量也有过之而无不及。
2）推荐使用Figma作为设计工具，它的整个生态和设计理念跟前端的契合度是很高的（自动布局对应flex，main component 对应 code component），通过Figma插件，可以很好的收集页面元素信息。
3）前端人可以学习一下ui设计相关的知识，比如怎么用figma做设计稿，再配合d2c，相当于一个人可以快速搞定 ui设计、前端研发。
#前端ai
2 00
1 00
在美团点个肯德基疯狂星期四，需要修改一下订单，找商家沟通，发现背后应该是一个AI Agent客服，很丝滑的体验～
可以想象未来很多复杂的前端GUI交互都可以融入到这样一个体验丝滑的聊天窗口中…
#AI工作流
可以想象未来很多复杂的前端GUI交互都可以融入到这样一个体验丝滑的聊天窗口中…
#AI工作流
1 01
前端还真是个香饽饽，盯的人还真不少。
作为前端，如何保持核心竞争力？如何“反被盯”。
作为前端，如何保持核心竞争力？如何“反被盯”。
Claude 3.5 Sonnet Artifacts很牛逼，作为前端人的一些思考和探索
0 01
0 01
我的《AI赋能前端研发从0～1》开源小册也上线第一版啦～（还在持续更新中...）
小册会从头开始分享如何将AI融入前端研发工作流，体系化整理自从AI爆发以来，将AI融入前端研发工作流的探索历程。
小册的宗旨是打造一本适用于部分前端开发者的 AI 赋能指南，帮助前端开发者更好地将 AI 融入前端项目的研发工作流，从而「提升工作效能」，「拓展职业发展空间」。
链接：ai.iamlv.cn
希望能够帮助到大家，希望能够得到反馈和建议，谢谢～
小册会从头开始分享如何将AI融入前端研发工作流，体系化整理自从AI爆发以来，将AI融入前端研发工作流的探索历程。
小册的宗旨是打造一本适用于部分前端开发者的 AI 赋能指南，帮助前端开发者更好地将 AI 融入前端项目的研发工作流，从而「提升工作效能」，「拓展职业发展空间」。
链接：ai.iamlv.cn
希望能够帮助到大家，希望能够得到反馈和建议，谢谢～
3 00