MasterGo 设计工程化，设计稿一键转代码，前端开发效率提升120%

随着数字经济的高速发展，数字产业已逐步进入了成熟期，数字产品的复杂度不断增强，企业对生产效率的要求也越来越高。

然而在实际的数字交互界面生产流程中，由于设计与研发的标准化程度低、生产关系与生产力不匹配的问题，导致设计与研发团队的工作仍然处于两个完全割裂的环境中，生产与协作效率低下。

我们认为，让设计与研发标准同源、协作同频，是提升数字交互界面生产效率的关键。

为此，我们推出了“MasterGo设计工程化”，包含设计思维工程化（设计规范）、设计语料和物料工程化（设计系统）、设计方案工程化（D2C），兼具设计与研发双重视角，帮助设计和研发团队基于统一的规范和资产高效率生产协作。

“MasterGo设计工程化”致力于解决标准化程度低下和生产力工具与生产关系不匹配的问题，让设计与研发实现同源、同频协作。

点击此处了解详情 >>> mastergo.com/d2c?utm_sou…

在企业实际生产流程中，设计与研发使用着不同的工具语言规范，主要体现在设计师遵从设计组件库产出设计稿，而研发则是通过代码组件库来搭建数字界面。

如果双方在工作语言规范上缺乏统一的对齐标准，很可能会导致设计与研发团队协作不畅。

为了让设计与研发的协作更具高效性，MasterGo 推出了设计系统管理平台（DSM）。你可以理解为，它是一个设计师与前端共同生产、维护的界面，通过对规范的同源管理，弥合上述“语言差异”，打破设计与研发之间的协作壁垒，从而帮助设计师与开发者打造高质量产品。

MasterGo DSM 可以集中呈现团队组件库包含的样式和组件，过滤掉其他不相关的内容。通过别名系统，设计和研发团队可以共同建设和维护语义体系的映射关系。通过配置器，将缺失的、但对研发十分必要的参数与规则显化、固化下来，完成信息的补全。同时，我们还在开发站点能力，支持跨多个团队组件库文件集中管理 Design Token 和组件。

另外，MasterGo DSM 还将支持设计系统自动管理，通过智能算法自动填充别名、甚至自主分析和自动迭代。目前我们已经开始将 Design System 托管给算法，并且我们有信心在 1 年内实现人工介入率低于 3%

解决了标准对齐的问题，我们接着来看看 MasterGo 如何解决设计工具不统一，设计和研发岗位过度分化，以及生产链条断裂等生产力工具与生产关系脱节的问题。

我们认为，设计师完成创意和定义的那一刻，数字交互界面产品就应当能够立即交付给消费者，也就是定义即生产，设计即代码。

基于此，MasterGo设计工程化 提供 D2C 能力。它是一个能够百分百还原设计稿的代码生成引擎，可生成媲美手写的高质量代码。

并且，为了高质量地完成设计图转代码这件事，MasterGo设计工程化 还支持设计规范的 D2C 能力，我们称之为：DS2C。它不仅能够直接生成样式工具类，还能帮助研发团队打包好图标资源库。

对于 MasterGo D2C 的能力开发，我们大体上规划了这三个阶段：

• 通过预先配置、补齐设计缺失信息的配置模型
• 完全由设计工具定义的通用模型
• 开箱即用、又能自由修改的独立模型

目前，MasterGo设计工程化 D2C 的研发重心主要在于生成 Web 端代码，已经支持生成 VUE 和 React 代码。未来还将陆续支持 Android XML 和 Compose，以及 iOS SwiftUI 代码，并且将支持生成 Tailwind CSS 等流行的前端库，提供 NPM 资产托管能力，进一步整合工具链。

我们希望通过 MasterGo 的这些工具能力，将设计到研发的工作流真正地串联在一起，实现从“向研发交付高保真的、符合规范的设计稿”转变为“直接交付高保真的代码”，开启全新的数字生产模式！

MasterGo 未来也将对外分享 MasterGo设计工程化 的实践，以及 D2C 的技术方案，希望和更多同行一起多交流、共进步！

设计工具承载着产业标准，反过来，又影响、推动着标准的演进。同时，它还可以统筹产业链条上的各个环节，让标准化的生产资料、组件充分流通，以被高效复用。从而让整个产业的生产力和价值得到极大释放。

这是 MasterGo 的机会、更是使命。MasterGo 有决心、有恒心，并且，也会一如既往、积极地与各领域的头部企业一起，加速数字经济产业升级。