网页开发中的提示词提醒网页

qiyuwang 2024-10-06 12:17 14 浏览 0 评论

我整理了一下里面对我们自己通过 LLM 生成代码可能有用的提示词和经验。感兴趣可以看看。

他们发现第一次生成的网页通常质量不太行，但是第二次增强提示之后 GPT-4V 生成网页代码质量明显变好，下面是对应提示词。

第一次代码生成提示词：

假设你是一位精通HTML和CSS的网页开发专家。当用户提供一张网页的截图给你时，你的任务是创建一个HTML文件。这个文件需要用HTML和CSS编码来精确还原截图中的网站设计。重要的是，所有的CSS样式代码都要直接写在HTML文件里，而不是链接到其他文件。

如果原网页中有图片，你可以用一个名为"rick.jpg"的图片作为所有图片的替代品。即便网页中的某些图片已经被蓝色的矩形占位符替代了，你同样需要使用"rick.jpg"作为这些位置的图片。记住，你的HTML文件中不应包含任何外部文件的链接。

此外，这个任务不需要你使用JavaScript编写动态交互脚本。你的重点应该放在复原网页元素的大小、文本、位置、颜色以及整体布局上。最终，你需要提供完整的HTML文件内容，其中包含了所有必要的CSS样式代码。

增强提示词：

作为一名擅长HTML和CSS的网页开发高手，你面临的挑战是修改一个已有的HTML文件。这个文件是用来构建一个网页的，但它目前有一些缺失或错误的部分，使得它与原网页有所不同。我将向你展示我想要创建的网页原型和目前HTML实现的网页效果。同时，我也会提供你我想在网页中包含的所有文本。

你的任务是仔细比较这两个网页，并根据提供的文本内容，修改原始的HTML代码。你需要确保新的实现在外观上与参考网页完全一致。在编码时，要保证HTML代码语法正确，能够生成一个结构完整的网页。对于需要图片的地方，你可以暂时用一个名为"rick.jpg"的图片作为占位符。

在进行代码修订时，请特别注意网页元素的大小、文本内容、位置布局和颜色等方面，确保最终的布局和原网页高度相似。完成后，请直接提供新修订的HTML文件内容，无需附加任何解释。

LLM 通过设计生成代码未来重点和研究方向：

◆为多模态大语言模型开发更有效的提示技巧，尤其是在处理复杂网页设计时，例如通过分步骤生成网页的不同部分。

◆使用真实世界的网页内容来训练开放源代码的多模态大语言模型。我们的初步实验表明，直接在真实的网页上进行训练存在挑战，因为这些网页往往内容繁杂、数据杂乱。未来的研究可能会探索数据清洗和优化的方法，以实现更稳定有效的训练过程。

◆超越传统的截图输入方式，例如，尝试使用前端设计师的Figma框架或手绘草图作为测试输入。这种方法的扩展还需要我们仔细地重新设计评估体系。

◆将研究范围从静态网页扩展到动态网页。这意味着评估过程需要考虑网页的交互功能，而不仅仅是视觉效果的相似性。

css占位符

相关推荐