前段时间给视频组的同事做测试,他们这期选题是测评国产AI编程工具,先得我们技术组测试,测的过程录素材,谈心得,做他们统一的素材备用。在这个过程中我发现了个宝藏AI编程工具文心快码,其他同事怎么想的不知道,我用着挺顺手。倒不是在于自然语言对话,这个现在基本算是国产AI编程工具重叠度比较高的一个功能了,区别只在于识别精准度。比较让我欣喜的是文心快码可以传图写代码,这功能有两种玩法。
一是直接上传图片:把你看到的网页设计图、界面草图,甚至手绘的布局拍个照传给它,它就能识别出里面的元素(比如按钮、表单、文字块)并尝试生成对应的HTML和CSS代码。
二是更厉害的F2C:如果你有更清晰的流程图设计,比如用专业工具画的,文心快码支持你粘贴F2C的地址和授权码进去。它能直接读取你的流程图结构,理解页面逻辑和跳转关系,然后自动生成更完整、更结构化的前端代码框架。
当时测试正好手头有个小需求,市场部同事想要一个简单的活动预告网页,就一页,放活动标题、时间地点、亮点介绍和一个报名按钮。设计稿?他们只有手机里随手拍的另一家活动页参考图,外加口述的几点要求。要在以前,我得对着参考图琢磨布局,然后吭哧吭哧写HTML搭结构,调CSS搞样式。知晓文心快码zulu有“传图写代码”功能,我便第一时间测试。
我把同事拍的参考图和自己用画图工具简单画的页面分区示意图,示意图标明了标题区、时间地点区、介绍区、按钮区,一起上传给了文心快码。我告诉它:“请参考这两张图的结构,帮我生成一个单页活动预告网页。页面包含:大标题、活动时间地点分行显示、活动亮点介绍用列表展示、一个醒目的报名按钮。风格简洁大气,主色调用蓝色系。”文心快码的响应很快。它分析了图片里的布局元素,结合我的文字描述,很快生成了我期待的页面。配套CSS样式文件,包含了基础的布局、字体大小、颜色,还给按钮加了个简单的鼠标悬停效果。
整个过程,从上传图片到得到一个基本可用的静态页面,大概也就1个小时左右,其中大部分时间花在我自己的微调和内容填充上。最终效果?市场部同事很满意,简洁明了,该有的都有,重点突出。
这次体验下来,文心快码的“传图写代码”功能,尤其是结合F2C流程图的能力,确实让我印象深刻。它解决了一个很实际的痛点,如何快速把视觉化的想法(草图、设计图、流程图)直接转化成可运行的代码框架。