CodeFun设计稿转代码

在追求研发效率的今天，如果有一款工具能将设计师的界面稿直接变成高质量的代码，无疑是巨大的解放。光速软件推出的CodeFun，瞄准的正是这个痛点。它通过AI算法，能够一键将Sketch、Figma、Photoshop等主流工具的设计稿，转换成如同工程师手写般优雅的源代码。

这和我们过去从设计软件里直接导出的HTML可大不一样。传统的导出结果往往结构僵硬，而CodeFun的智能之处在于，它能深度分析页面布局，生成更具弹性的Flexbox代码，而不是写死宽高。更厉害的是，它还能识别出循环列表、九宫格、等比例分配这些常见的业务组件结构。最终生成的代码不仅简短、可读性高，而且语义化做得相当到位，整体质量基本能达到中级工程师的水准。实测下来，能让研发效率提升数倍。

设计稿格式与输出平台

需要特别注意的一点是，CodeFun目前无法处理PNG、JPG这类位图稿件，它的工作原理决定了它只支持基于矢量信息的设计稿格式。

设计稿格式

目前主流的UI设计工具，如Sketch、Photoshop、XD、Figma和即时设计，CodeFun已经覆盖了大部分。其中，Sketch、Photoshop、Figma和即时设计通过官方插件上传，已能获得完美支持。对于Adobe XD的用户，官方提供了一个过渡方案，只需先将XD文件转换为Sketch格式，即可正常使用。

设计稿格式	操作方式	支持程度	备注
Sketch	插件上传	✅ 完美支持
PSD	插件上传	✅ 完美支持
Figma	插件上传	✅ 完美支持
即时设计	插件上传	✅ 完美支持
XD	插件上传	? 即将支持	XD过渡方案入口

设备终端和平台

在输出平台方面，CodeFun当前的重点显然放在了移动端和混合开发领域。对于微信小程序、移动端H5以及混合App（如uni-app、Taro）的开发，它都能提供良好的代码生成支持。至于桌面Web端和原生iOS、Android应用，则还需要等待后续的版本更新。

设备平台	支持程度	框架/语言
微信小程序	✅ 支持	原生 / uni-app
移动端 H5	✅ 支持	Vue / React
混合 App	✅ 支持	uni-app / taro
桌面 Web	? 后续支持
iOS	❌ 暂不支持
Android	❌ 暂不支持