LandingRabbit/landingrabbit-skills

LandingRabbit 頁面格式技能

目的

當使用者在 Claude/ChatGPT/Gemini 中撰寫登陸頁面文案時，使用此技能可達成以下目標：

• 使用他們選擇的 LLM 服務進行內容腦力激盪與創作，之後再將該內容匯入 LandingRabbit。
• 取得 LandingRabbit 能可靠解析並轉換為頁面的 Markdown 格式文案。
• 僅使用 LandingRabbit 支援的區段類型和內容欄位，以便使用者輕鬆將準備好的頁面結構與文案文字匯入 LandingRabbit。

逐步任務

你的任務是閱讀使用者準備好的登陸頁面文案，並將其格式化為 LandingRabbit 就緒的 Markdown。

1. 如果對話中尚未討論，請要求使用者提供登陸頁面的準備好文案文字（例如：首頁、廣告登陸頁、電子報訂閱頁、鉛磁鐵頁、定價頁等）。
2. 審閱規劃好的文案文字和頁面結構。
3. 如果你對內容的任何部分或 LandingRabbit 中哪種區段類型最適合計畫的每個部分不確定，請向使用者詢問更多資訊。
4. 將文案與可用的區段和內容項目進行配對。
5. 依照範例答案，以 LandingRabbit 就緒的 Markdown 格式提供你的答案。

重要說明

• 將你的答案提供為一份易於複製貼上到 LandingRabbit 的單一文件。
• 避免更改使用者的文字和區段順序。
• 僅分享包含區段類型和建議佈局的 LandingRabbit 就緒 Markdown。請勿在答案中添加任何額外的評論或解釋。
• 本技能中的範例僅用於展示支援的結構。請保留使用者的內容和語氣。
• 你不需要使用所有可用的區段和內容項目。請尊重使用者準備好的內容。
• 在最終答案中，僅在區段之間使用 ---，切勿在區段內容區塊內部使用。
• 切勿發明任何可選的佈局配置。請參閱使用者的指示，並在需要時徵求使用者的指導。
• 如果使用者正在規劃一篇部落格文章、說明文件或任何其他標準文章格式的頁面，你可以使用單一的自訂區段搭配 Markdown。
• 不要將僅含 URL 的行（例如 /schedule-a-call、https://...）輸出為一般文案文字；僅將 URL 保留在 Markdown 連結 [text](url) 內。

可用的區段

• hero：主要區段，在多數頁面上呈現開場價值主張和主要轉換行動。
• trustedBy：用於標誌和信譽內容的社會證明區段。
• collection：結構化的「運作方式」、「優點」以及服務/功能區塊清單，包含可重複的項目。這些是任何登陸頁面上最典型的佈局。
• testimonials：客戶證明引述。
• pricing：單一服務方案或定價方案比較表。
• steps：流程、檢查清單、行動/結果的順序，或客戶遇到的問題。僅用於清晰簡單的清單和陳述，不用於描述更複雜、需要多個可重複項目的內容。
• comparison：之前/之後或當前/未來的對比比較。例如，顯示客戶在購買服務前後的感受。
• faq：問答區段，用於處理異議。
• cta：專注於轉換的區段，通常靠近結尾，但有時也穿插在頁面內容之間。
• custom：自由形式的混合內容（標題、文字區塊、圖片、嵌入、CTA）。通常用於「關於我們」、簡單的陳述（例如 H2 和文字區塊）或完整的文章頁面內容等區段。
• tabs：可點擊的分頁，每個分頁切換顯示自己的內容卡。例如，每個目標受眾或使用案例一個分頁。
• feed：來自工作區集合的動態貼文清單（僅配置）。例如，在首頁上顯示最新的部落格文章和新聞文章。

區段的回應格式

在你的答案中提供區段類型（例如，Section type: hero），並在使用者要求時，提供特定區段的佈局配置。

對於每個區段，使用如下 Markdown 原生結構：

• 眉題：[eyebrow]: ...
• 圖示（用於 collection + boxes-icons 項目）：[icon]: ...（當使用者應在 UI 中選擇圖示時留空）
• 細則文字：[smallprint]: ...
• 區段或項目標題：#、##、###
• 描述/主體：純 Markdown 段落
• CTA 連結：每行一個（各自獨立一行），例如： [Primary CTA](url) [Secondary CTA](url)
• 圖片：![Alt](url)
• 嵌入/表單/小工具：以 html 柵欄程式碼區塊包裹

在 hero、cta 和 collection（alternate 佈局）中，使用者可以添加：

• 一個方塊格線，例如顯示公司成就或服務細節。以 [boxes] 行開頭，然後每個方塊一個標題加段落（在 hero/cta 中使用 ###，在 collection-alternate 項目內部使用 ####）。
  • 欄位：[eyebrow]: ...（可選）、標題（###/#### 標題）、描述（段落）、CTA 連結（每行一個）
• 來自滿意客戶或合作夥伴的推薦，用以支持區段文案並增加可信度。以 [testimonial] 行開頭。
  • 欄位：引述（第一行）、姓名、職稱、公司

（在 collection 中，[boxes] 和 [testimonial] 僅在 suggestedLayout: alternate 時適用。）

使用 --- 分隔區段。

描述中的項目符號清單

在任何描述或副標題欄位中，使用以下標記之一開頭來添加帶樣式的項目符號清單：

• ✅ 文字 - 成功（綠色勾勾）；優點、功能、正面成果
• ✓ 文字 - 成功（傳統純文字勾勾）；優點、功能、正面成果
• ☑ 文字 - 核取方塊（純文字勾勾）；檢查清單、「包含內容」
• ❌ 文字（或 ✗）- 破壞性（紅色叉叉）；問題、痛點、負面項目
• ⭐ 文字 - 星號；重點、精選項目
• → 文字（或 ➡️）- 箭頭；方向性流程、「下一步」
• - 文字（或 *、•）- 標準項目符號（點）；中性的清單
• :word: 文字 - 由一個單字自訂的圖示，例如 :rocket: 更快構建。如果找到高度匹配，該單字會解析為對應的圖示；否則會呈現為純點。

在同一欄位中混合使用標記類型和一般段落。具有相同標記的連續行會組成一個清單。

範例 - 帶有成功項目符號的 hero 描述：

# 你的頁面標題

✅ 頁面在 5 分鐘內上線
✅ 200+ 團隊喜愛使用
✅ GDPR 友善

[開始使用](/signup)

建議佈局

對於支援多種佈局的區段，請在區段內容之前，在其獨立的一行中添加 suggestedLayout:。

---

Hero

• horizontal （預設） - 文字置左，媒體置右
• horizontal-reversed - 媒體置左，文字置右
• vertical - 文字置中，無媒體或媒體在下方

根據使用者的要求，你也可以定義可選的佈局配置：

• style: <已儲存的樣式名稱> - 套用一個已命名的區段樣式
• mediaVisibility: all | desktop | mobile | none - 依裝置顯示或隱藏 hero 媒體（none 會隱藏）
• imageFit: fill | free-ratio - hero 媒體如何填滿其插槽

---

Steps

stepDecoration 控制每個項目旁邊顯示的圖示。請在區段內容之前添加。

• number （預設） - 數字編號；用於循序的流程步驟
• none - 無圖示；用於純內容清單
• check - 勾勾；用於功能檢查清單和「包含內容」清單
• star - 星號；用於重點和顯著成就
• arrow - 箭頭；用於方向性流程和「下一步」序列
• success - 實心圓圈勾勾；用於優點和正面成果
• destructive - 實心圓圈 X；用於問題和痛點

如果步驟項目的行已以表情符號標記開頭（例如 😩、✅、🚀），請設定 stepDecoration: none。 如果 stepDecoration 不是 none，請從步驟行中移除開頭的表情符號/圖示標記。

根據使用者的要求，你也可以定義可選的佈局配置：

• style: <已儲存的樣式名稱> - 套用一個已命名的區段樣式
• mediaVisibility: all | desktop | mobile | none - 依裝置顯示或隱藏區段媒體
• imageFit: fill | free-ratio - 區段媒體如何填滿其插槽
• mediaPosition: left | right - 媒體位於清單的哪一側
• stepIcon: <一個描述性單字或精確的 CamelCase 圖示名稱> - 每個步驟旁邊的自訂圖示（取代 stepDecoration）

---

Tabs

• top （預設） - 分頁列在卡片上方
• left - 分頁列在卡片左側的欄位中
• right - 分頁列在卡片右側的欄位中

根據使用者的要求，你也可以定義可選的佈局配置：

• cardStyle: stacked | split - 卡片為一個堆疊，或媒體在其自己的欄位中（僅 top 佈局）
• mediaSide: left | right - 媒體欄位位於哪一側（top 佈局搭配 cardStyle: split）
• tabContentMode: expand | show-all - 僅啟用的分頁顯示其描述，或全部分頁都顯示（僅 left/right 佈局）
• autoplay: <秒數> | off - 自動切換分頁
• autoplayProgress: on | off - 每個分頁上顯示移動進度條
• style: <已儲存的樣式名稱> - 套用一個已命名的區段樣式
• imageFit: fill | free-ratio - 卡片媒體如何填滿其插槽

---

Collection

• alternate - 敘述性的優點區塊（每個項目：標題 + 段落，交替側邊）→ 例如：優點、價值主張、解決方案、「為何選擇我們」、案例研究範例和客戶故事
• boxes - 功能格線，每個項目有圖片 → 例如：服務、功能、整合、技術能力
• boxes-text - 僅文字的功能格線，無圖片 → 例如：使用案例、能力清單、簡短功能摘要
• boxes-icons - 圖示格線（圖示與文字內容分開處理）→ 通常用於快速瀏覽的功能/服務重點或幾個步驟說明（數字作為圖示）

使用 boxes-icons 時，除非規劃好的文案中明確要求，否則不要在圖示上方添加項目 [eyebrow]: ...。對於每個 [icon]:，使用一個描述性單字（例如 [icon]: rocket）、一個精確的 CamelCase 元件名稱，該名稱最好包含一個或兩個語義單字（例如 [icon]: IconRocket 或 [icon]: IconArrowRight），或者留空（[icon]:）讓使用者在 UI 中選擇。精確的名稱和高度匹配的單字會解析為真實圖示。如果提供了片語，僅搜尋其第一個單字；未匹配的值會回退為空白。

根據使用者的要求，你也可以定義可選的佈局配置：

• style: <已儲存的樣式名稱> - 套用一個已命名的區段樣式
• imageFit: fill | free-ratio - 項目媒體如何填滿其插槽（僅 alternate 和 boxes 佈局）
• sectionHeaderPosition: above | left - 區段標頭位置（僅 boxes 佈局）
• dividers: on | off - 方塊之間的分隔線（僅 boxes 佈局）

---

Testimonials

• carousel （預設） - 水平滾動，最適合 3 個以上的推薦
• grid - 所有推薦同時可見，最適合 2-4 個

根據使用者的要求，你也可以定義可選的佈局配置：

• style: <已儲存的樣式名稱> - 套用一個已命名的區段樣式
• sectionHeaderPosition: above | left | right - 區段標頭位置
• imageFit: fill | free-ratio - 推薦媒體如何填滿其插槽
• carouselAutoplay: on | off - 自動旋轉輪播（僅輪播佈局）
• carouselAutoplayDuration: 2-30 - 每張投影片的秒數（允許小數；僅在自動播放開啟時）

---

Comparison

• boxes-text （預設） - 並排的純文字比較
• boxes - 每側帶有一張圖片的對比
• boxes-icons - 每側帶有一個圖示的對比（透過每側內部的 [icon]: ... 提供）

項目符號行圖示：開頭的標記會選擇該行的圖示並從文字中移除 — ✅ → 成功，✓ → 核取，❌/✗ → 破壞性，⭐ → 星號，→ → 箭頭。未標記的行使用側邊預設值（之前：破壞性，之後：成功）。每行一個標記；不要使用其他表情符號作為行標記。

imageFit: fill | free-ratio 控制側邊圖片如何填滿其插槽（僅 boxes 佈局）。

---

CTA

• default （預設） - 置中的標題、描述和按鈕
• embed - 標題和按鈕，旁邊有圖片或嵌入內容

根據使用者的要求，你也可以定義可選的佈局配置：

• style: <已儲存的樣式名稱> - 套用一個已命名的區段樣式
• mediaVisibility: all | desktop | mobile | none - 依裝置顯示或隱藏媒體（僅 embed 佈局）
• imageFit: fill | free-ratio - 媒體如何填滿其插槽（僅 embed 佈局）

---

Custom

• left （預設） - 靠左對齊，文章或部落格風格
• middle - 置中，登陸頁面風格

根據使用者的要求，你也可以定義可選的佈局配置：

• style: <已儲存的樣式名稱> - 套用一個已命名的區段樣式

---

Pricing

Pricing 沒有佈局選項。

根據使用者的要求，你也可以定義可選的佈局配置：

• style: <已儲存的樣式名稱> - 套用一個已命名的區段樣式
• pricingSwitch: billing-period=toggle, currency=tabs - 每個切換器的選擇器樣式（單純的 toggle 或 tabs 適用於帳單切換器；toggle 需要恰好兩個選項）

---

FAQ

FAQ 沒有佈局選項。

根據使用者的要求，你也可以定義可選的佈局配置：

• style: <已儲存的樣式名稱> - 套用一個已命名的區段樣式
• sectionHeaderPosition: above | left - 區段標頭位置

---

TrustedBy

TrustedBy 沒有佈局選項。

根據使用者的要求，你也可以定義可選的佈局配置：

• style: <已儲存的樣式名稱> - 套用一個已命名的區段樣式
• logosScroll: off | right-to-left | left-to-right - 自動滾動標誌行（預設為關閉）
• logosScrollSpeed: 5-120 - 每次滾動循環的秒數（僅在滾動開啟時）

---

Feed

• boxes （預設） - 貼文格線，每個貼文有圖片
• boxes-text - 僅文字的貼文格線，無圖片
• alternate - 敘述性的貼文區塊，交替側邊

Feed 配置在其獨立行中，位於 Section type: feed 之後：

• suggestedLayout: boxes | boxes-text | alternate
• style: <區段樣式名稱>
• collection: <精確的集合標題或 slug>
• imageFit: fill | free-ratio
• sectionHeaderPosition: above | left
• dividers: on | off
• maxPosts: <數字（最多 20）>