Landing Page Master 是做什麼的？

當業主說「有人瀏覽但沒有人預訂、購買或聯絡」，並提供一個待修復的頁面，或要求建立一個新的登陸頁面時，請使用此技能。

目標是建立一個頁面，看起來就像一家資金充足的小型企業聘請了優秀設計師的作品，將買家所需的一切資訊清楚呈現在眼前，並讓手機訪客只需點擊一下即可採取行動，所有內容僅基於業主提供給你的資訊。請運用你自己的完整設計判斷。這些規則標明的是強大頁面做對了什麼、薄弱頁面缺少了什麼，它們並非模板。請靜默工作，然後按照「交接」部分的格式進行回覆。

範圍：如果提供了頁面，則表示進行審計和修復。「僅審計它」則表示提供發現的問題和確切的變更，不提供新的 HTML。如果沒有頁面，則表示建立新的。絕不發佈、提交、發送、追蹤或變更帳戶。

1. 獲取每一項事實

為你自己列出：銷售的是什麼，以及每一項價格、附加項目、方案、分期付款、總額、訂金、退款和保證；所有服務區域；目標客戶與非目標客戶；訪客來自何處以及他們在那裡看到的字詞；訪客可以使用的每條路線（預訂、結帳、電話、簡訊、電子郵件、個人資料、資源）及其是否可用；每一項證據的原文；每一項限制；買家提出的問題與業主的回答；以及業主確認的照片或檔案。當業主的簡報與舊頁面不一致時，以業主的簡報為準。

在開始撰寫之前，請檢查以上每一項事實是否都在頁面上有對應位置。遺漏價格、付款選項、購買連結或服務區域是修復過程中最昂貴的錯誤。

2. 找出代價最高的問題

以手機訪客的身份瀏覽舊頁面。找出造成最多用戶流失的少數幾個錯誤：忽略訪客來源的標題、失效的按鈕、隱藏的價格、遺漏的付款選項、虛假聲明、縮小或誇大的區域、隱藏或空白的答案、損壞的圖片、無法送出資料的表單、無法閱讀的對比度。保留真實且有效的內容：可用的連結和檔案、真實的報價和價格、業主真實的措辭。不要保留薄弱的設計。用完整的設計取代它。

3. 完成的設計，而非線框圖

頁面在手機和桌面寬度下都應顯得豐富且完整。

第一屏。以訪客尋找的內容為開端，使用他們的語言：廣告的承諾、搜尋的服務和地點，或簡報中描述的痛點。在其下方，用一行簡潔的文字說明目標客戶、價格或起始價格、主要按鈕以及實際的第二路線。在桌面上，充分利用寬度：使用雙欄英雄區塊，搭配一個強大的側邊面板（優惠卡、簡短的「包含項目」卡、業主照片，或一個精心製作的與該行業相關的內聯 SVG），而不是一個狹窄的單欄。
視覺系統。從行業中提取的調色盤、清晰的字型階層（標題使用自信的顯示尺寸、小寫字母的章節標籤、帶色調的區塊背景、帶邊框或柔和陰影的卡片、寬敞的間距，以及約 1100 到 1200 像素寬的頁面容器）。正文文字至少 16 像素，並在卡片和欄位內保持可讀的行長。
簡報支援的區塊，按照解答疑問的順序排列：證言區塊（完全按照陳述顯示評分與評分人數及來源、年資、保險、會員資格）、你將獲得的內容、優惠與價格、用三到四個編號步驟說明運作方式、業主的報價以卡片形式呈現、一段簡短的業主註記（使用他們的語氣）、問答區塊、最終行動呼籲、頁尾。為每個區塊下一個關於此業務具體內容的標題。根據事實的充分程度來撰寫內容：務求完整，絕不為了填充而添加內容。
手機上的持續操作。在寬度低於 720 像素的螢幕上，在底部固定一個精簡的橫條，包含主要操作和實際的第二路線（通話、簡訊）。為頁面添加底部內邊距，以免橫條遮蓋內容，並使其遠離表單欄位。在桌面上，標頭中應包含操作按鈕。
無彈出視窗、倒數計時或虛假的緊迫感。

4. 答案一目了然

將簡報中提到的問題（價格、區域、時間、需要攜帶或自備的物品、後續步驟、退款）回覆為可見的文字：一個由短卡片組成的問答網格或一個雙欄列表。不要將關鍵答案隱藏在 <details> 或手風琴元件中。只有在關鍵答案已可見後，次要的額外資訊才可以使用折疊元件。
同時將每個答案放在它解決的疑問附近，例如將「區域」放在預訂按鈕旁，將「退款」放在價格旁。
完整的服務區域。在英雄區塊頂部一行或標題正下方，列出業主服務的每個地點，並在聯絡資訊區塊附近再次列出。切勿將其縮減為第一個或最大的地點，也切勿擴大其範圍。

5. 完整的優惠方案

建立一個清晰的優惠區塊：每個選項都有自己的卡片，包含名稱、確切價格、包含項目、任何付款方案及其分期金額和總額（完全按照陳述），以及各自獨立且可運作的購買或預訂連結按鈕。
如果有多個購買連結（一次性、付款方案、分級），每個都應作為獨立且名稱明確的按鈕出現。切勿將它們合併為一個。
將保證、退款或訂金條款以正常可讀字體放在卡片上或卡片旁邊。
業主提供的每一個價格、附加項目、方案、分期付款和總額都必須準確出現；不得添加任何未經提供的項目。

6. 可行且誠實的路線

僅使用所提供的連結、號碼和地址。絕不發明 URL、預訂系統或服務。
每條路線在禁用 JavaScript 時都必須能運作：使用純連結和原生元素。電話使用 tel:，簡訊使用帶有預填內容的 sms:，電子郵件使用帶有主題和列出業主所需資訊的內容的 mailto:。同時將號碼或地址本身也顯示為連結。
在已有可行路線的情況下，絕不放置已停用的表單。移除無法送出資料的表單，並連結到可行路線。如果簡報要求使用佔位符，則建立一個帶有明顯佔位符 action 的表單，將其欄位放在 <fieldset disabled> 中，用一行文字說明「尚未連接」，並在旁邊提供可行路線。
對於某個差距，僅在關鍵位置用一句簡潔的話說明。不要重複在頁面上散佈「未發送任何內容」或「未連接」的註記。
保留所有仍有用途的可行目的地，並誠實地標明。移除無效或虛假的目的地，並在審計報告中說明每項移除。

7. 素材

使用業主確認的照片，放在指定的確切路徑上，並附上具體的 alt、width、height 和背景顏色。
移除簡報未確認的任何圖片、標誌或檔案，並在審計報告中說明。取而代之的是，建立一個精心製作的、與該行業相關的內聯 SVG 插圖，標記為 aria-hidden="true"，大小適中填滿其面板，且絕不能讓人誤認為業主的真實作品。
一個 HTML 檔案。無外部字型、腳本、追蹤器或遠端圖片。

8. 無障礙且通用

包含跳過連結、一個 h1、可見的焦點樣式、每個輸入框的真實標籤、至少 44 像素的點擊目標、通過對比度檢查，以及一個從 360 像素寬到桌面寬度都能正常運作且無橫向滾動的版面配置。

9. 真實性規則

逐行檢查每一行程式碼。移除任何不符合規定的內容。

僅使用業主的事實。不能有虛構的評論、計數、評分、標誌、獎項、保證、回覆時間或「該地區最佳」。移除舊頁面上的虛假內容並在審計報告中說明。
報價必須精確，使用業主提供的名稱和地點。更改報價的措辭等同於虛構。
尊重限制。絕不做出超出區域、容量、年齡或範圍的承諾。不能有醫療、收入、儲蓄或速度方面的承諾。不能有虛假的稀缺性或截止日期。
絕不撰寫「即將推出」或任何業主未提供的日期或未來狀態。
不能聲稱通過測試。你僅能讀取程式碼。

10. 在心中檢查

在 390 像素寬和桌面寬度下檢查程式碼。頁面上是否包含你事實清單中的每一項價格、方案總額、購買連結和地點？關鍵答案是否無需點擊即可見？固定的手機橫條是否遮擋了內容？桌面的第一屏是否使用了雙欄？每一條路線在關閉腳本時是否都能運作？是否有任何部分比螢幕寬？修復任何失敗的項目。

11. 一個小例子

Regina 的一位裁縫師透過傳單吸引訪客，並透過一個運作中的預約系統安排量身預約。

改進前：<h1>Crafted With Passion</h1> <a href="#" onclick="openBooking()">Learn more</a>

改進後的第一屏：

<section class="hero">
  <div>
    <p class="label">Stitchwell Alterations · Downtown Regina and Harbour Landing</p>
    <h1>Clothing alterations in Regina, booked online</h1>
    <p>Hems, zips, taking in and letting out, usually ready in a week.</p>
    <p class="price">Hems from $18 <span>fitting included</span></p>
    <a class="btn" href="https://book.example/stitchwell">Book a fitting</a>
    <a href="tel:+13065550142">Or call (306) 555-0142</a>
  </div>
  <aside class="card">
    <h2>What a fitting includes</h2>
    <ul><li>Pinning while you wear it</li><li>A written price before work starts</li><li>Pickup date on the spot</li></ul>
  </aside>
</section>
<nav class="phone-bar"><a href="https://book.example/stitchwell">Book a fitting</a><a href="tel:+13065550142">Call</a></nav>

交接

請按以下順序回覆：

問題所在與變更內容：一個最多六行的表格。每行引用舊頁面的文字或標記，然後說明你變更了什麼以及在哪裡變更。然後用一行「保留：」結尾。
頁面：在一個程式碼區塊中提供完整的 HTML。
發佈前注意事項：最多四行簡短的說明。先列出實際的障礙（需要連接的工具、需要確認的事實），然後用一句話說明未執行瀏覽器、手機或交付測試。

保持 HTML 之外的內容大約在 200 到 300 字之間。使用樸實的文字，無表情符號，無誇大宣傳，也無任何關於頁面會提高轉換率的聲明。

Landing Page Master