整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
整理了一下里面對我們自己通過 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構造函數創建一個音頻播放器對象來在網站上使用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構造函數創建一個音頻播放器對象來在網站上播放通知聲音。
由于文章內容篇幅有限，今天的內容就分享到這里，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請別忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想獲取更多前端技術的知識，歡迎關注我，您的支持將是我分享最大的動力。我會持續輸出更多內容，敬請期待。
常提示看似是個不起眼的工作，但是這極大考驗產品和交互設計師的功底。清晰的思考路徑和明確的決策依據至關重要，今天就來梳理一下產品異常提示需要注意的關鍵點。
要根據不同的原因，“包裝”后展示給用戶的操作界面。原因可以簡要分為以下3種：
（1）前端沒有辦法把請求傳遞給后端；
（2）后端返回超時；
（3）后端返回的數據出現異常；
基于以上三種類別再進行細分：
（1）操作后，跳轉到新頁面，主要是搜索/展示類行為的結果反饋頁面——適合頁面相對獨立，且信息內容較多的頁面。舉例：點擊頂部/底部TAB欄，搜索結果頁等；
（2）操作后，仍停留在該頁面，但是會以抽屜式的側邊欄的形式進行展現——適合與當前的主界面有一定的關聯性，但所展示的信息不是太多，操作和交互較為簡單。舉例：視頻下載時的選集，火車票的日期選擇等；
（3）操作后，仍停留在該頁面，但是會基于用戶的行為進行反饋提示——適合操作后僅對狀態進行的改動，并不需要獲取更多信息的情況，如關注成功，加入購物車成功，優惠券領取成功等提示。
可以通過2種方式進行展現：
頁面的異常提示，取決于數據獲取的方式，采用全局提示或局部區域進行提示，不同頁面反饋的形式，彼此之間也有所差別。
不同類別的產品，用戶在體驗的過程中會有不同的關注點和敏感點，根據操作成本和敏感點的高低進行針對性地分析。
（1）當用戶在當前頁面的操作成本較高且進行提交時，如果出現異常情況，切記不要引導用戶刷新頁面或跳轉到404頁面，這都會造成當前頁面填寫的信息丟失。因此，建議停留在該頁面，以彈窗的形式告知用戶當前狀態，并將選擇權交給用戶。
（2）當用戶的行為涉及到敏感點時，如金錢交易。這時也是需要給用戶清晰明確的結果，如果此刻結果并未產生，也要告知用戶在哪個頁面可以查到對應結果，或進行客服咨詢等。這樣不僅可以緩解用戶的焦躁，也是讓用戶對產品產生信任感的關節環節喲~~
以上是我對異常提示的總結歸納，希望對你有用，也歡迎大家與我在評論區與我討論。這些細節往往是產品經理容易忽略的，或在設計時并沒有考慮到產品本身的特點，只是進行的盲目照搬，但是細節也往往是影響用戶體驗的關鍵因素。
本文由@黑心老巫婆 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
