Design2Code：开源AI在前端开发中匹配商业巨头

前端工程是为 Web 应用程序创建用户界面的过程。它涉及设计、编码、测试和部署响应式、交互式和用户友好的网页。前端工程是一项复杂且耗时的任务，需要大量的技能和创造力。但是，如果我们可以使用人工智能自动执行部分或全部步骤呢？

这就是Design2Code背后的愿景。Design2Code是由斯坦福大学，佐治亚理工学院，Microsoft和Google DeepMind的研究人员团队开发的开创性系统。该项目证明了生成式人工智能的快速发展，在多模态理解和代码生成方面实现了前所未有的能力。开发该模型的主要动机是实现前端开发的新范式，其中多模态大型语言模型 （LLM） 可以直接将可视化设计转换为代码实现。该模型的开发试图探索自动化前端工程的可能性，并弥合设计和代码之间的差距。

Design2Code 是一个创新的 AI 模型和一个开源项目，能够将给定的设计图像转换为 HTML 和 CSS 代码。该模型将网页设计的图像作为输入，并输出相应的 HTML 和 CSS 代码，这些代码可以在浏览器中呈现相同的设计。它可以处理各种设计元素，例如文本、图像、按钮、图标、布局、颜色、字体和样式。此外，该模型可以生成响应式代码，以适应不同的屏幕尺寸和设备。

• 从设计图像生成代码：Design2Code 最令人印象深刻的功能之一是它能够在 snap1 中从设计图像自动生成 HTML 和 CSS 代码。该系统负责编码过程，为想要从设计草图或模型创建网页的 Web 开发人员和设计师节省了大量时间和精力。Design2Code 可以生成忠实于设计图像的代码，以及响应式和功能性代码。
• 与各种设计格式的兼容性：Design2Code 的另一个特点是它与不同的设计格式兼容，允许用户上传各种格式的设计文件或简单地将它们拖放到平台上2。这种灵活性使其成为使用不同设计工具（如 Photoshop、Sketch、Figma 或 Adobe XD）的 Web 开发人员和设计师的多功能且方便的工具。Design2Code 可以处理各种设计元素，例如文本、图像、按钮、图标、布局、颜色、字体和样式。

Design2Code 具有多种功能和潜在的未来用例，展示了其在自动化前端工程方面的价值。其中一些是：

• 前端开发民主化：Design2Code 有可能使前端 Web 应用程序的开发民主化。它允许非专家轻松快速地构建应用程序。通过将设计草稿转换为前端代码，大大减少了开发人员的工作量。对于那些对构建或设计什么有具体想法但缺乏将网站的可视化设计实现为功能代码所需的复杂技能的人来说，这个工具特别有用。
• 快速原型设计：Design2Code 可以帮助 Web 开发人员和设计师从他们的设计草图或模型中快速创建网页原型。这可以节省大量时间和精力，否则这些时间和精力将花费在手动编码网页上。Design2Code 还可以帮助验证设计理念的可行性和功能性，并从用户或客户那里获得反馈。
• 代码学习：Design2Code 还可以帮助新手 Web 开发人员和学习者理解和学习如何从设计图像编写网页代码。Design2Code 可以通过显示设计元素和代码片段之间的对应关系来提供一种可视化和交互式的学习 HTML 和 CSS 的方式。Design2Code 还可以通过提供生成代码的示例和解释来帮助提高学习者的编码技能和知识。
• 代码优化：Design2Code 还可能有助于优化网页的代码质量和性能。Design2Code 可以生成遵循 Web 开发的最佳实践和标准的简洁代码。Design2Code 还可以生成响应式代码，以适应不同的屏幕尺寸和设备，从而增强用户体验和网页的可访问性。

Design2Code 使用多模态大型语言模型 （LLM） 将可视化设计转换为代码实现。它采用了一套多模态提示方法，这些方法已在 GPT-4V 和 Gemini Pro Vision 上证明了它们的有效性。

该系统采用开源模型 Design2Code-18B，可与 Gemini Pro Vision 的性能相媲美。Design2Code-18B 模型旨在解决 Design2Code 任务，该任务包括将网页的可视化设计转换为功能代码实现。该模型基于 CogAgent-18B 架构构建，并使用合成生成的 Design2Code 数据进行微调。它支持高分辨率输入，并在广泛的文本图像对、合成文档、LaTeX 论文和少量网站数据上进行预训练。该模型的训练数据来自 Huggingface WebSight 数据集，其中包含网站截图和代码实现对。该模型使用 LoRA 模块进行微调，批处理大小为 32，学习率为 1e-5。在推理过程中，模型使用 0.5 的温度和 1.1 的重复惩罚。该模型的性能基于一组全面的自动指标（包括高级视觉相似性和低级元素匹配）来衡量，以评估其精确生成呈现到给定参考网页中的代码实现的能力。

Design2Code 是开源的，可在 GitHub 上访问。要使用 Design2Code，用户需要拥有一个 OpenAI 帐户并在设置对话框中输入他们的 API 密钥（特别是 GPT4 视觉访问）。项目详细信息显示在项目的网页上，用于项目的数据集可以位于 Hugging Face 上。

Design2Code 代表了前端开发领域向前迈出的重要一步。通过利用人工智能的力量，它有可能使 Web 应用程序开发民主化，使非专家也能访问它。虽然有需要改进的地方，但该系统目前的能力令人印象深刻，并且对未来有很大的希望。