近日，蓝色泻湖推出了“Design to Code”功能，在原有设计稿标注功能的基础上，进一步提升了前端工程师的开发体验和效率，实现了像素级设计稿还原的效果。
在工程师的日常开发环节中，“沟通协作”和“编码”是两个时间成本较高的环节，主要有两个痛点:
设计师需要提前标注元素信息，下载剪切图给开发者使用。设计师和前端需要反复沟通，保证信息的一致性。
视觉稿还原后，设计师需要花费大量的时间去检查，不断的对齐和修改界面代码。
视图层代码技术难度大，但繁琐费时。有时候需要在短时间内推出大量的活动页面和描述页面来支持产品和运营活动。
低技术要求占用前端工程师太多时间。对于团队来说，基于资源的前端人力会成为产品需求迭代的瓶颈。
此次蓝泻湖推出的“design to code”功能，从“沟通协作”和“编码”两个维度入手，很好地解决了上述两个痛点，全面提升了Web应用的生产力。[按代码设计]功能地址:LanhuApp.com/dds
让我们深入了解一下blue lagoon的“按代码设计”的理念和实现过程:
沟通与合作
蓝湖独创的设计图纸标注功能，有效降低了设计师与前端工程师的沟通成本，优化了协作流程。“按代码设计”功能推出后，为了不增加设计人员的工作量，保持简单的工作流程:
1.对设计草图或设计组件的命名没有特殊要求。
2.设计师上传设计图纸的原有流程不变。
从产品层面来说，真正的效率提升是整个协同流程的效率提升，而不是把开发成本转移到流程的另一边。这也是对“设计到代码”这一功能的最大挑战，因为从理论上讲，“约束”和“规则”是所有自动化的关键，“灵活性”和“高效率”之间的权衡是不可避免的。但是，设计和创作的养分来自于想象和自由，不让规则扼杀设计的养分，是blue lagoon的原则和坚持。基于此，“Design to Code”的功能使用AI图像识别来处理多变的UI风格和组件的个性化应用。
AI赋能码的自动化生成
总的来说，写界面，还原UI草稿，对于前端学生来说，技术难度不算太大，但是效率相对较低。将蓝湖设计稿的图层信息与图像识别相结合，可以一键从0生成可用的视图图层代码。众所周知，操作越简单，隐藏的挑战越大。我们需要在UI还原和代码可维护性上做很多努力。例如，我们知道视图界面通常包括几个元素:
布局:合理的层次和嵌套关系，循环体的检测和生成，绝对定位和相对定位的转换。
构件:构件的类型识别、特征表达和生成。
风格:前景与背景的区分，线条、圆角、字体的还原等。
通过对各元素的不断优化调整，蓝色泻湖“按代码设计”功能的UI还原度最高达到了98%。对于简单的逻辑活动页面、描述页面等。，可以直接下载使用，无需二次开发。
同时，“设计到代码”对DSL的扩展也支持各种多样化的应用平台和场景。除了Vue、React等常见前端框架外，还支持生成微信小程序代码和uni-app。
Blue lagoon的“design to code”功能也从协作和编码两个维度进行了优化，可以大大缩短Web应用的开发时间，减少协作中的信息摩擦。代码的智能化和自动化，让工程师可以抛弃繁杂的工作，有更多的精力专注于更有趣、更有价值的事情。
代码自动化的前景
据了解，蓝色泻湖将在【自动代码生成】方面持续发力，并将继续在更多更深的领域为工程师赋能。
我们也相信，随着AI技术的不断成熟，未来基于人工智能的前端技术不仅可以完美实现从设计稿到应用的智能化生产，还可以根据需求模拟多种在线情况进行智能测试，形成全自动化迭代闭环。
让我们一起期待蓝泻湖接下来的黑科技。
