Communitygithub.com

登陸頁面

撰寫並建立一個登陸頁面,用來測試某個提案的需求:一位訪客、一個承諾、真實證明、一個行動呼籲、可存取的單一 HTML 檔案,以及啟動後要查看的數據(訪客數、註冊數、各來源轉換率)。

登陸頁面 是什麼?

這個技能專為創業者或產品人員設計,幫助他們快速建立一個功能完整的登陸頁面,進行市場需求測試、蒐集等候名單或接受預訂。它會根據使用者提供的目標訪客、痛點、承諾以及真實證明,自動撰寫並生成單一 HTML 檔案,包含語意化標題、替代文字、良好的對比度,並支援手機瀏覽,確保頁面可存取且符合 GDPR 隱私規範。技能強調誠實行銷,要求不使用虛假的見證或稀缺性,並在啟動前制定流量計畫與成功標準。支援多平台使用,適用於 Claude Code、Coder 等開發工具,並內建中、英、法、西四種語言的關鍵詞觸發。最終輸出包含頁面規劃、文案以及可配置後端表單的 HTML 檔案,方便創業者直接部署並追蹤轉換數據。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/teodstr/garage/tree/HEAD/skills/landing-page

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

登陸頁面 是做什麼的?

登陸頁面往往是新創公司第一個真實的實驗:如果陌生人連電子郵件都不願意留下,他們也不太可能付費。這個技能會撰寫頁面、將其建立為單一 HTML 檔案,並設定決定下一步的數據。

使用時機

  • 在實際開始建構前測試需求(煙霧測試)、蒐集等候名單或接受預訂。
  • 在 brand-identity 之後使用(如果已有品牌名稱與色彩),但純文字頁面也可以。
  • 不適用於完整的網站或搜尋引擎策略。

輸入

  1. 目標訪客、痛點、承諾以及任何真實證明(引用、數字、取得授權的標誌)。
  2. 希望訪客採取的單一動作:電子郵件、預訂、示範請求。
  3. 品牌元素(如果有的話),以及表單資料應該送往何處。

方法

  1. 一個頁面、一位訪客、一個動作。 選擇目標訪客與單一行動呼籲;移除所有引導讀者離開的連結。
  2. 先寫頁面頂端:一個為訪客陳述結果(而非技術)的標題、一行說明如何達成、行動呼籲按鈕,以及產品或結果的圖片。測試:陌生人在五秒內能理解這是什麼以及為誰而設。
  3. 然後寫其餘部分:用顧客自己的話說明痛點(來自 customer-interviews)、三個步驟說明運作方式、真實證明、回答主要反對意見(價格、信任、時間)、簡短的常見問題,以及再次放上行動呼籲。
  4. 保持誠實:如果產品尚未存在,請寫「加入等候名單」或「預訂,預計出貨日為…」。絕不捏造推薦、計數器或稀缺性。對於預訂,應註明出貨日期與退款條款。
  5. 建立為單一 HTML 檔案:使用語意化標題、為圖片加上替代文字、保持可讀的對比度、可在手機上正常運作。表單會寄送到創辦人選擇的服務(表單工具、電子報工具或試算表),並附上簡短的隱私聲明,說明電子郵件的使用方式(歐盟地區需符合 GDPR)。
  6. 規劃測試:訪客從哪裡來(這與頁面本身同樣重要)、預估人數、事先決定的目標轉換率,以及測試期間。最多測試兩個標題。
  7. 解讀結果:訪客數與各來源轉換率、人們提出的問題,以及根據啟動前設定的標準所做的決策。

輸出

### 頁面規劃
訪客:… | 承諾:… | 行動呼籲:… | 成功條件:…% 的…位訪客來自…,在…天內

### 文案
標題:… | 標題下方文字:… | 按鈕:…
區段:痛點、運作方式、證明、反對意見、常見問題

### HTML
<一個可存取的檔案,可設定表單位址,包含隱私聲明>

品質標準

  • 標題為特定訪客陳述一個結果,頁面只有一個主要的行動呼籲。
  • 頁面上的所有聲明、見證與數字都是真實的;不得偽造稀缺性或社會證明。
  • 頁面可存取、可在手機上運作,並說明如何處理收集到的資料。
  • 流量計畫與成功標準在啟動前就應寫好。
  • 以使用者語言撰寫,並使用下表所列詞彙。

詞彙表

中文(繁體)EnglishFrançaisEspañol
登陸頁面Landing pagePage d'atterrissage (landing page)Página de aterrizaje (landing page)
行動呼籲 (CTA)Call to action (CTA)Appel à l'actionLlamada a la acción
首屏Above the foldHaut de page, partie visible sans défilerPrimera pantalla
轉換率Conversion rateTaux de conversionTasa de conversión
等候名單WaitlistListe d'attenteLista de espera
A/B 測試A/B testTest A/BPrueba A/B

參考來源

  • Krug, S. (2014). Don't Make Me Think, Revisited (3rd ed.). New Riders.
  • Ries, E. (2011). The Lean Startup. Crown Business.
  • W3C. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能