❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发非常感兴趣，我会每日跟你分享最新的 AI 资讯和开源应用，也会不定期分享自己的想法和开源实例，欢迎关注我哦！

🥦 微信公众号｜搜一搜：蚝油菜花 🥦

🚀 快速阅读

1. 功能：根据设计图直接生成前端源代码，支持多端和多技术栈。
2. 技术：基于蚂蚁自研的百灵多模态大模型，具备细粒度UI理解能力。
3. 应用：适用于快速原型开发、中后台页面开发、移动端界面开发等场景。

正文

WeaveFox 是什么

WeaveFox是蚂蚁团队推出的AI前端智能研发平台，基于蚂蚁自研的百灵多模态大模型，能够直接根据设计图生成前端源代码。该平台支持多种应用类型，包括控制台、移动端H5、小程序等，兼容多种技术栈，如React、Vue等。

WeaveFox的目标是提升前端开发的效率和质量，支持二次调整以满足个性化需求，追求设计稿的精确还原。目前，WeaveFox正在闭源开发中，预计明年正式开放，为前端开发者带来革命性的开发体验。

WeaveFox 的主要功能

• 设计图转代码：根据设计图直接生成前端源代码，减少手动编码工作。
• 多端支持：支持控制台、移动端H5、小程序等多种应用类型的开发。
• 多技术栈兼容：支持React、Vue、less、scss等多种前端技术栈。
• 二次调整：支持用户对自动生成的代码进行调整和优化，满足更具体的需求。
• 高准确度还原：追求设计稿的一比一还原，确保设计意图得到准确实现。

WeaveFox 的技术原理

• UI智能优化：基于蚂蚁集团自研的百灵多模态模型构建的前端领域大模型，具备细粒度UI理解能力，能提供精准的代码生成和优化服务。
• 智能切分：输入设计图，前端领域大模型会进行整稿/局部块推理的自动切分识别，得到页面语法结构。
• 完备定义：建立的页面语法结构标准对UI信息原子组件定义本身也是合理完备的。
• 智能代码生成：基于页面语法结构的布局树作为上下文配合模型矩阵完成高可读性和可维护性的业务代码生成。

期待 WeaveFox

目前WeaveFox正在闭源开发中，预计明年正式开放。以下是使用WeaveFox的基本流程：

1. 切割图片，生成代码：将设计图切成几块，挑选出想要生成代码的部分，点击“生成代码”按钮。
2. 选择技术栈和框架：选择喜欢的技术栈和框架，比如React + AntD，WeaveFox会根据选择的技术架构生成代码。
3. 确认生成：点击“OK”，系统开始生成代码。
4. 效果预览：预览生成效果和代码。

资源

• 项目官网：https://weavefox.ai/

❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发非常感兴趣，我会每日跟你分享最新的 AI 资讯和开源应用，也会不定期分享自己的想法和开源实例，欢迎关注我哦！

🥦 微信公众号｜搜一搜：蚝油菜花 🥦