整理了一下里面对我们自己通过 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框架或手绘草图作为测试输入。这种方法的扩展还需要我们仔细地重新设计评估体系。

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

载说明：原创不易，未经授权，谢绝任何形式的转载

有时候，我们需要通过JavaScript在网站上播放通知声音。本文将介绍如何实现这一功能。

使用Audio构造函数在网站上播放通知声音

我们可以通过使用Audio构造函数创建一个音频播放器对象来在网站上使用JavaScript播放通知声音。

例如，如果我们有以下按钮：

<button>Play</button>

然后，我们可以通过编写以下代码来使用Audio构造函数，在点击按钮时播放音频剪辑：

const playAudio = (url) => {

const audio = new Audio(url);

audio.play();

}

const button = document.querySelector('#play-button');

button.addEventListener('click', () => {

const audioUrl = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';

playAudio(audioUrl);

console.log(`Now playing audio from ${audioUrl}`);

});

这段代码定义了一个名为`playAudio`的函数，它接受一个URL参数，用于指定要播放的音频文件的路径。当调用`playAudio`函数时，它会创建一个新的`Audio`对象并播放指定的音频文件。

接下来，使用`querySelector`方法获取网页中的一个ID为`play-button`的元素，并将其存储在`button`变量中。然后，使用`addEventListener`方法为`button`元素添加一个`click`事件监听器。当按钮被点击时，触发回调函数。在回调函数中，我们定义了一个名为`audioUrl`的常量，它存储了所需的音频文件的URL。然后，我们调用`playAudio`函数并将`audioUrl`作为参数传递给它，以便播放指定的音频文件。最后，我们将一条消息记录到控制台，指示正在播放哪个音频文件。

结束

我们可以使用JavaScript通过使用Audio构造函数创建一个音频播放器对象来在网站上播放通知声音。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

常提示看似是个不起眼的工作，但是这极大考验产品和交互设计师的功底。清晰的思考路径和明确的决策依据至关重要，今天就来梳理一下产品异常提示需要注意的关键点。

01 从原因角度分析梳理

要根据不同的原因，“包装”后展示给用户的操作界面。原因可以简要分为以下3种：

（1）前端没有办法把请求传递给后端；

（2）后端返回超时；

（3）后端返回的数据出现异常；

基于以上三种类别再进行细分：

1. 如果能明确知道是手机网络问题，可清晰明确地引导用户进行操作提示，如“网络断开，请检查网络”;
2. 如果是其他非用户本身导致的问题，需要再次分析是否能通过刷新页面进行解决。如果可以通过“刷新”来解决，需提供给用户“刷新重试”按钮，避免用户因为找不到解决方法，快速流失。当然也需要提供给返回或关闭的按钮，让用户有路可退。
3. 有很多问题无须直接反馈给用户，也无需根据每种情况进行针对性地提示，这时可以统一用“页面开小差or页面丢失”+错误码（下图荧光色）的形式展示给用户，错误码的作用是辅助相关人员（运维）进行问题的迅速定位和排查。

02 从页面获取的形式

用户做操作后的反馈状态主要为3种状态：

（1）操作后，跳转到新页面，主要是搜索/展示类行为的结果反馈页面——适合页面相对独立，且信息内容较多的页面。举例：点击顶部/底部TAB栏，搜索结果页等；

（2）操作后，仍停留在该页面，但是会以抽屉式的侧边栏的形式进行展现——适合与当前的主界面有一定的关联性，但所展示的信息不是太多，操作和交互较为简单。举例：视频下载时的选集，火车票的日期选择等；

（3）操作后，仍停留在该页面，但是会基于用户的行为进行反馈提示——适合操作后仅对状态进行的改动，并不需要获取更多信息的情况，如关注成功，加入购物车成功，优惠券领取成功等提示。

可以通过2种方式进行展现：

1. 采用全局提示的方法，多采用轻量级的toast对用户的行为进行反馈；
2. 采用多态按钮，根据按钮自身的状态变化进行直观展示，也是很好的方法；

3种状态对应的异常提示样式

页面的异常提示，取决于数据获取的方式，采用全局提示或局部区域进行提示，不同页面反馈的形式，彼此之间也有所差别。

03 从用户的操作成本和敏感点选择合适的提示方式

不同类别的产品，用户在体验的过程中会有不同的关注点和敏感点，根据操作成本和敏感点的高低进行针对性地分析。

（1）当用户在当前页面的操作成本较高且进行提交时，如果出现异常情况，切记不要引导用户刷新页面或跳转到404页面，这都会造成当前页面填写的信息丢失。因此，建议停留在该页面，以弹窗的形式告知用户当前状态，并将选择权交给用户。

（2）当用户的行为涉及到敏感点时，如金钱交易。这时也是需要给用户清晰明确的结果，如果此刻结果并未产生，也要告知用户在哪个页面可以查到对应结果，或进行客服咨询等。这样不仅可以缓解用户的焦躁，也是让用户对产品产生信任感的关节环节哟~~

小结

以上是我对异常提示的总结归纳，希望对你有用，也欢迎大家与我在评论区与我讨论。这些细节往往是产品经理容易忽略的，或在设计时并没有考虑到产品本身的特点，只是进行的盲目照搬，但是细节也往往是影响用户体验的关键因素。

本文由@黑心老巫婆 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自Unsplash，基于CC0协议