Design2Code

Design2Code是一个新的前端开发范式，它利用生成式人工智能技术，可以将视觉设计直接转换为代码实现，从而自动化前端工程流程。这项工作提供了首个系统性研究，名为Design2Code任务，对此进行了深入研究。研究团队手动策划了484个真实网页作为测试案例，并开发了一套自动评估指标，以评估当前多模态LLM（语言-视觉模型）能否生成直接呈现给定参考网页的代码实现。他们还展示了一系列多模态提示方法，并展示了它们在GPT-4V和Gemini Vision Pro上的有效性。研究团队还对一个开源的Design2Code-18B模型进行了微调，成功与Gemini Pro Vision的性能相匹配。人工评估和自动指标表明，在这项任务中，GPT-4V是明显的优胜者。在视觉外观和内容方面，评注员认为GPT-4V生成的网页在49%的情况下可以取代原始参考网页，并且令人惊讶的是，在64%的情况下，GPT-4V生成的网页甚至被认为比原始参考网页更好。详细的指标显示，开源模型在从输入网页中召回视觉元素和生成正确的布局设计方面大多落后，而文本内容和颜色等方面可以通过适当的微调得到显著改善。