今天团队的前端同学跟我说写小程序写到怀疑人生,于是我探索实践了一下如何利用GPT4o将前端代码生产提速**一倍**以上:
1. 将figma的设计截图输入GPT4o,要求输出代码。这个时候可以得到层级结构基本正确的xml,基本正确的js接口,和基本错误的css。
1.1. 根据自己的业务知识做少量xml层级修正
2. 利用figma dev模式下的样式代码,和自己的知识,替换css中的样式。(颜色样式基本全要替换,直接用设计师figma的结果就可以;layout有的对有的错,需要仔细思考。)(figma的样式代码,能借用多少取决于设计师水平,主要是layout对设计师挑战比较大。)
3. 按照项目需要做好公共组件的维护和复用。
4. 进行真机调试并解决兼容性bug
因为这次写的是微信小程序代码,其实本来不太抱希望。但是得到的结果意外的很不错。如果是主流的前端框架效果应该会更好。
如果设计师严格&科学地按照auto layout的方式制作自己的设计稿,整个过程应该会进一步提升。
利用AI工具节省编程的机械劳动部分还是非常棒的,这可以让工程师把时间和精力放在更重要的业务逻辑、用户体验和性能效果上。
我认为未来比较有可能的生产环境下的静态前端工作流是基于figma等设计工具的输出文件,由ai修改生成可用的代码。而不是基于图片直接生成,因为截图相较于figma设计还是有非常巨大的信息丢失(不过ai也可以根据常识补充缺失的设计信息,但这会导致用户体验不可控)
之前我们在写Swift的时候
@DariusTopThx 也实践过类似工作流,这次算是强化了体感,特别是拓展到了微信小程序,这真的挺让我惊讶的…