背景
设计稿转代码
参考文档：如何将设计稿转成高度可维护的代码？
一、UI2Code 工具汇总
对于设计稿转代码的需求，在线产品设计工具 Pixso 提供了 以下3款设计插件：
| 插件 | 官网 | 代码水平 | 前端 | App | Flutter | 备注 | |
|---|---|---|---|---|---|---|---|
| 1 | Pixso to code | https://pixso.cn/app | 初级 | Tailwind、HTML | SwiftUI | flutter | 当前页直接可用 |
| 2 | Code.fun | https://code.fun/ | 中级 | H5、小程序等 | ❌ | ❌ | 需转网站 |
| 3 | coDesign | https://codesign.qq.com/ | 初？ | H5、？ | ❌ | ❌ | Code.fun翻版 |
与以往传统的从设计软件中导出 HTML 不同，CodeFun 插件不仅可以智能分析页面布局，生成非绝对高宽的 Flexbox 代码，而且还可以识别循环列表、九宫格、等比例分配等多种业务场景。
CodeFun 生成的代码简短可读，语义化程度高，基本上可以达到中级工程师的水准，实测研发效率至少提升 500%。
二、UI2Code 代码提取
1、Pixso to code
2、Code.fun
1、在Pixso上无法直接使用 Code.fun 将本应用中的设计稿转成代码。所以需要先将其上传到对应网站中
2、上传后，你将需要到所上传的指定位置查看设计稿及转码。进入指定页面的代码查看方法如下：
3、coDesign
三、UI2Code 代码提取的验证
提取的代码可在下述在线网站中进行验证。