UI2Code

[TOC]

背景

设计稿转代码

参考文档：如何将设计稿转成高度可维护的代码？

https://www.figma.com/community/plugin/1329812760871373657/codia-ai-design-screenshot-to-editable-figma-design

一、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

详见：codesign官网：智能生成页面代码

三、UI2Code 代码提取的验证

提取的代码可在下述在线网站中进行验证。

详见：OnlineCoding在线编码

End