整理了一下里面对我们自己通过 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) 非常强大。 CSS 有一些惊人的隐藏提示和技巧，可以用来改善你的网站的外观。

在本文中，将介绍每个前端开发人员在开发出色且用户友好的网页时需要知道的一些很棒的 CSS 技巧。

1.首字下沉

可以在 CSS 中实现首字下沉。 它看起来很简单。 比如下面显示的图像和代码片段。

p:first-letter {
    font-size: 3rem;
}

2.给文字添加渐变

为文本添加渐变使文本提供了令人惊叹的颜色。

它还为你的设计添加了一些引人注目的功能。

要向文本添加渐变，它采用下面显示的代码片段的形式。

p {
  font-size: 48px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

3. 使用 SVG 遮罩图像

有了这个功能，我们可以在 SVG 中屏蔽图像。 检查下面显示的图像。

CSS 非常强大，为我们提供了许多可以实现的功能来实现此功能。

<svg>
<clippath id='clippath'>
/* Enter your svg here*/
</clippath>
</svg>

<style>
img:{
clip-path:url(#clippath)
}
</style>

4. 使用图像作为光标

我们可以在 CSS 中使用图像作为光标。 举个例子，你想在你的内容上提供一个图像光标。

要执行此操作，只需要提供如下代码片段所示。

h1{
    cursor:url("custom.gif"), auto;

}

5. 为列表标记设置样式

厌倦了普通无聊的列表？CSS 使列表的样式成为可能。

要自定义列表标记，只需要对 CSS 进行编码，如下所示。

::marker{
  color:#f548r9;
  text-shadow:2px 2px black;
    
}

6. 设计视频的字幕。

CSS 具有强大的提示伪元素，可用于设置视频中的字幕样式。

::cue{
    color:green;
    background:red;
}

7. 用文字剪辑视频

CSS 使剪辑带有文本的视频成为可能。

查看下面代码片段。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<stye>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 500px;
}

.container video {
  width: 100%;
  height: 100%;
}

.container .text {
  position: absolute;
  top: 0;
    line-height: 350px;
  width: 100%;
  height: 100%;
  text-align: center;
  background: #ffffff;
  mix-blend-mode: screen;
  font-size: 15em;
  font-family: 'Bebas Neue', sans-serif;
}
</style>
<div class="container">
  <video autoplay loop muted>
    <source src="https://res.cloudinary.com/dptgkdbjg/video/upload/v1623121486/video_iqbbwc.mp4" type="video/mp4">
  </video>
  <div class="text">
    <p>OCEAN</p>
  </div>
</div>

8.平滑滚动

虽然我们可以使用 JavaScript 实现平滑滚动，但 CSS 使我们可以更轻松地在我们的网站中实现平滑滚动。

要启用平滑滚动，需要将 smooth-behavior 设置为平滑。

检查下面显示的代码段。

html{
  scroll-behavior:smooth;
}

9. 过滤图像

图像构成了网络的很大一部分，可以使用过滤器来模糊图像。 也可以使用过滤器属性来模糊、饱和、添加亮度、添加其他属性中的饱和度。

查看下面的代码片段。

.blur {
  filter: blur(5px);
}

.grayscale {
  filter: grayscale(100%);
}

.brightness {
  filter: brightness(150%);
}

.saturate {
  filter: saturate(200%);
}

.invert {
  filter: invert(100%);
}

.huerotate {
  filter: hue-rotate(180deg);
}

10. 自定义移动浏览器标题中的地址栏。

看看下面显示的图像。 移动浏览器标题有多种颜色。 我们可以修改它并创建与我们网站的颜色主题相融合的颜色。

要更改或自定义移动浏览器标题中的默认地址栏，我们需要包含元标记，如下面的代码片段所示。

<meta name='theme-color' content='#0575e6' />

在元标记中，我们需要传入两个参数，即名称和内容，我们指定我们想要的颜色。 您可以在十六进制代码中包含颜色。

最后的想法

当想要构建交互式用户界面时，层级样式表非常强大。

这些只是我们可以在 CSS 中利用的一些提示和技巧。

人在校生一枚，希望可以找到志同道合的小伙伴一起进步，不定期的更新自己的收获，如果有大神的话可以指出我的不足，我用的是VS code软件来写代码的

什么是 HTML

HTML 是个缩写，全称Hyper Text Markup Language，译为超文本标记语言。它是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

HTML的结构

• html的后缀名有两种 一种是.html，另一种是.htm （两种并无区别）
• 快捷创建基本结构的方法：方法一：可以在开头打一个“!”号，方法二：打一个html，智能提示会出现html:5 选中即可。

HTML的头部

在<hard>头部标签中你可以 插入脚本（scripts）,样式文件（CSS），以及各种meta信息。可以添加在头部区域的元素有：<title>，<style>，<meta>，<link>等等

• ​ <title>定义网页标题</title>
• <meta>元素：描述了一些基本的元数据，元数据不显示在页面上，但会被浏览器解析，<meta>通常用于指定网页的描述，关键词，作者。

注释快捷键：CTRL+? （注释是不被运行的，作用就是帮助程序员记东西）

 <!--这是一个注释-->

HTML属性

• 通用属性：几乎所有元素都可以使用的属性，例如 id、name、style等
• 私有属性：某个一个/类元素所具备的属性
• 事件属性：为某个元素绑定事件（DOM学习）
• 自定义属性：开发者为某个元素设置的属性，一般都是在前端框架中使用
• 参考介绍https://developer.mozilla.org/zh-CN/

HTML完整结构

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
			<!--头部，js和css写在这里面-->
 </head>
 <body>
       <!--内容主体-->
 </body>
 </html>

可能我写的会有些不清楚，到后面有代码的时候就会清楚了