来自斯坦福大学、佐治亚理工学院、微软和谷歌DeepMind的研究人员推出了一个Design2Code项目，它探讨多模态大语言模型在前端开发中的应用。简单来说就是利用多模态大语言模型（如 GPT-4V ）直接将设计草图自动生成相应的HTML和CSS代码，让你轻松实现设计想法。开发人员已经在释出了论文和代码。查看：Design2Code：多模态大语言模型在前端开发中的应用
看不懂论文和代码？没关系，研究人员在论文中提供了一组提示词，研究人员第一次使用提示词进行代码生成的时，效果不好；通过改进提示词后，再使用GPT-4V 来生成网页代码，质量明显变好，大家可以来学学如何更好的写提示词，之后可以在其他方面进行套用。
第一次生成时所使用的提示词：
You are an expert web developer who specializes in HTML and CSS. A user will provide you with a screenshot of a webpage.
You need to return a single html file that uses HTML and CSS to reproduce the given website. Include all CSS code in the HTML file itself.
If it involves any images, use "rick.jpg" as the placeholder. Some images on the webpage are replaced with a blue rectangle as the placeholder, use "rick.jpg" for those as well.
Do not hallucinate any dependencies to external files. You do not need to include JavaScript scripts for dynamic interactions.
Pay attention to things like size, text, position, and color of all the elements, as well as the overall layout. Respond with the content of the HTML+CSS file.中文：
您是一位精通HTML和CSS的网页开发专家。当用户为你提供一个网页的截图，你需要基于这个截图创建一个HTML文件，确保使用HTML和CSS来尽可能准确地重现该网页的设计。
请将所有CSS样式代码直接嵌入到HTML文件中。如果原始网页使用了图片，且图片无法直接获取，请用“rick.jpg”作为占位图像。若网页上有些图像被蓝色矩形替代，您也应使用“rick.jpg”作为这些区域的占位图像。
请注意，你的HTML文件中不应依赖任何外部文件。此外，由于本次任务不涉及动态交互，您无需使用JavaScript编写动态交互脚本。在创建HTML文件时，请确保网页上所有元素的大小、文本、位置、颜色以及整体布局都与截图中的设计相匹配。
最后，请提供完整的HTML文件内容，其中包含了所有必要的CSS样式代码。增强提示词：
You are an expert web developer who specializes in HTML and CSS. I have an HTML file for implementing a webpage but it has some missing or wrong elements that are different from the original webpage. The current
implementation I have is: [generated code from text-augmented prompting]. I will provide the reference webpage that I want to build as well as the rendered webpage of the current implementation. I also provide you all
the texts that I want to include in the webpage here: [extracted texts from the original webpage]. Please compare the two webpages and refer to the provided text elements to be included, and revise the original HTML
implementation to make it look exactly like the reference webpage. Make sure the code is syntactically correct and can render into a well-formed webpage. You can use "rick.jpg" as the placeholder image file.
Pay attention to things like size, text, position, and color of all the elements, as well as the overall layout. Respond directly with the content of the new revised and improved HTML file without any extra explanations.
中文：
你是一位擅长HTML和CSS的专家级网页开发人员。你需要修改一个已有的HTML文件，但其中有一些缺失或错误的元素，与原始网页不一致。我目前的实现是：[从文本增强的提示中生成的代码]。我将提供我想构建的参考网页的截图以及当前实现的渲染结果。
此外，我还提供了我想在网页中包含的所有文本：[从原始网页中提取的文本]。
请对比这两个网页，并参考提供的文本元素进行修改，对原始的HTML实现进行修改，使其与参考网页完全一致。请确保HTML代码语法正确，能够呈现出一个结构完整的网页。你可以使用"rick.jpg"作为图片占位符。
在修改时，请特别注意网页所有元素的大小、文本内容、位置布局和颜色，以及整体布局。
完成后，请直接回复经过修订和改进后的HTML文件内容，无需附加任何额外的解释。
0条评论