设计稿到代码真的可行吗？
原创
背景：众所周知，在前端开发过程中，视觉搞到重构稿是一个不可忽略的过程，通常较为成熟而稳定的团队是配置了专门的重构开发团队来做这些事情，他们的职责是：
1、负责视觉搞对重构稿的还原，抽取基础公共组件。
2、和前端研发同事对接
3、维护整体前端页面框架
4、考虑响应式，解决浏览器样式兼容性问题
那么，有么假如团队规模比较小，没有配置重构团队，那么，这件事情毫无疑问会丢给前端研发同学，前端研发同学通常也具备一定的视觉稿到代码的转换能力，只不过可能对于css这块的熟悉程度远远不如专业的重构开发厉害，输出的页面框架代码以及样式的规范性上可能不如正规军，其优势在于和后端对接业务逻辑，处理页面间的交互。
所以，有没有一些工具是可以视觉搞生成代码的呢？答案是有的，我调研了几个，如下：就一一介绍一下。
https://www.imgcook.com/
这个是某宝系的一个老牌产品，在ChatGPT出来之前就做了，可以上传sketch文件，也可以通过figma插件，sketch文件只支持49以上版本，这个很不爽，下载了一个上传才告知，感觉被骗，figma的体验也是懵逼，真不知道怎么才可以，最终上传了一个sketch来做测试，sketch测试文件地址在此 https://www.freeuid.com/3575.html ，感兴趣的也可以测试一下。
生成的代码如下：
嗯，所有的代码几乎全部放在了 App.jxs 里面，可以看到右上角看到一个可以在codebox运行的按钮，点击，跳过去，不出意外，跑不起来。
在看看代码的问题：
1、全部放在App.jxs里面，维护性自然可想而知，一锤子买卖的项目可以考虑，长期维护，需求变更频繁的不推荐。
2、只有div，image，span，这三个基础的元素，很明显视觉稿上的checkbox没有体现，为什么没有，后面在调研figma 2 code时候，有源码分析。
3、样式，基本上都是 reletive,positive ,固定的 px 等方式，这个可维护行自己需要斟酌一下。
https://code.fun/
嗯，名字取得很响，体验的过程有一种蛋碎的感觉，怎么讲？
我从没见过如此傻逼的产品设计，没实现的功能呢放出来也就罢了，不能上传能不能给一个toast，找了半天没找到，这体验也是没谁了，插件上传也是懵逼，反正就是没体验成功。只能使用他的demo提供的看看效果。
其效果可想而知，基本上imgcook上提到的哪些问题，都存在，控件识别问题，样式写死问题。
https://www.locofy.ai/
这类产品在figma的插件体系里面比较多，随便搜搜 to code ，就可以收到，大家想试试的话，也可以体验这个locofy。
生成的代码如上，依然有上述提到的一些问题，作为一锤子买卖的，后期不维护的，这种直接从视觉搞到代码，太香了。但是如果是需要持续迭代的，那就要追求可维护行，上述提到的问题都还在。
https://github.com/bernaferrari/FigmaToCode
这个是一个开源项目，就不介绍了，其效果和上述几个类似。问题依然在。
https://github.com/cirediatpl/FigmaChain
FigmaChain 是一组基于 Python 脚本的工具，根据 Figma 设计生成 HTML/CSS 代码。利用 OpenAI 的 GPT-3 模型，FigmaChain 使开发人员能够从 Figma 设计输入快速生成 HTML/CSS 代码。它还包括基于 Streamlit 的聊天机器人界面，用于交互式代码生成。
这也是一个开源项目，其原理是将figma文件使用figma api都出来，解析为node结构，修改ChatGPT去更具结构生成网页代码。
代码相当好理解，一读便知道其原理，这也得益于langchain框架的清晰。生成的代码依然是div+image+text，样式的写死问题也没有解决，因为有源码，我们就可以分析下了。
这个图是figma的api中提到的关于通过figma文件获取的figma节点信息的描述，url在此，https://www.figma.com/developers/api#files
因此，这个开源库通过FigmaFileLoader拿到的信息就是这些节点信息，然后交给ChatGPT去生成网页代码，包含html+css，这就基本决定了生成的内容不可能出现基础控件，比如我基本都没看到过input，select，picker这些元素，因为ChatGPT也不可能凭空捏造出来，我理解技术往前一步，应该是figmaFile 提供足够多的冗余信息，让ChatGPT知道这是一个什么类型的控件，在此figma本身有组件的概念，是否可以要求设计师组件化设计，这样根据这些信息，以方便ChatGPT生成更加高质量，可维护的代码。
总结：
figma，sketch在代码生成路上，先驱有过不少探索，总体来讲，生成一次性活动页面，性价比可能很高，但是要生成长期维护型代码，尚处于不可用阶段，后续，可以走小组件路线，既不要寄希望于整体页面生成，而是，以一个组件的生成，然后开发者自己瓶装组合，一定程度上来解决一些机械的css+html。
整体来讲，我认为通过figma生成可以重用的代码，还有些路要走
1、figma组件化设计，提供更多的冗余信息，或者描述信息
2、ChatGPT prompt工程，让其找到哪些节点是一个最小合集，需要表达为一个组件，而不是把一个复杂控件大卸八块为一堆div+css的组合给你。
3、对设计师要求更高了，非标的figma几乎没法生成可重用的code，因此要建立标准？
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。