文章图片

最近蓝湖重磅上线了「设计图转代码」功能 ， 在原有设计稿标注功能的基础上 ， 进一步提升前端工程师的开发体验和效率 ， 达到了像素级还原设计稿的效果 。
在工程师日常的开发链路中 ， “沟通协作”与“编码”是时间成本较大的两个环节 ， 主要有两个痛点：

• 协作效率低 ， 沟通成本高 ? 设计师需提前标记元素信息、下载切图以便开发人员使用 。设计师和前端 需要反复沟通才能确保信息一致性。? 视觉稿还原之后 ， 设计师需要花费大量时间走查 ， 不断对齐修改界面代码 。
• 大量低技术含量的需求 ? view层代码技术难度低 ， 但是较为繁琐耗时 ， 有时需要短时间内上线大量活动页、说明页以支持产品及运营活动 。? 低技术含量的需求过多占用前端工程师的时间 ， 对团队来说 ， 资源化的前端人力将会成为产品需求迭代的瓶颈 。

本次蓝湖推出的「设计图转代码」功能很好的解决了上述两个痛点 ， 从“沟通协作”与“编码”两个维度切入 ， 全面提升了 Web 应用生产效率 。
【设计图转代码】功能地址：LanhuApp.com/dds
下面我们来深扒蓝湖「设计图转代码」的理念和实现过程：
沟通与协作
蓝湖原有的设计图标注功能 ， 已经有效的减少了设计师和前端工程师之间的沟通成本 ， 优化了协作流程 。 此次推出「设计图转代码」功能后 ， 为了不额外增加设计师工作负担 ， 保持简单的工作流程：
1. 对设计稿或设计组件的命名不做任何特殊要求 。
2. 设计师原有上传设计图的流程不变 。

文章图片

AI 赋能代码自动化生产
? 布局：合理的层级与嵌套关系、循环体检测与生成、绝对定位与相对定位的转换 。
? 样式：前景和背景的区分 ， 线条、圆角、字体的还原等 。
经过不断对每个要素进行优化和调整 ， 蓝湖「设计图转代码」功能的UI还原度最高已达到 98% ， 对于逻辑简单的活动页、说明页等 ， 可直接下载使用 ， 无需二次开发 。

文章图片

同时「设计图转代码」对 DSL 的扩展也很好的支持了各种多元化的应用平台和场景 。 除了 Vue 与 React 等前端常用框架 ， 同时支持生成微信小程序代码与 uni-app 。

文章图片

蓝湖「设计图转代码」功能还同时从协作和编码两个维度进行了优化 ， 可以大大缩短 Web 应用的开发时间 ， 减少协作中的信息摩擦 。 代码的智能化、自动化让工程师抛弃繁复冗杂的工作 ， 有更多的精力关注更感兴趣、更有价值的事情 。
代码自动化的展望
据了解 ， 蓝湖仍在【自动生成代码】方面将持续发力 ， 会在更多更深的领域为工程师持续赋能 。
【蓝湖「设计图转代码」前端代码一键生成，UI 还原度高达 98%！】我们也相信随着 AI 技术的不断成熟 ， 未来前端技术基于人工智能不仅可以完美的实现从设计稿到应用的智能生产 ， 还可以根据需求模拟多种线上情况进行智能化测试 ， 形成全自动化的迭代闭环 。
让我们共同期待蓝湖的下一个【黑科技】 。