Communitygithub.com

jhd3197/AgentSite

為 SaaS 產品建立行銷級登陸頁面,包含英雄區域、社交證明、功能介紹、價格預覽與行動呼籲。

AgentSite 是什麼?

此技能(AgentSite)會引導 AI 代理建立一個專為 SaaS 產品設計的單頁行銷頁面,目標是達到行銷級品質而非範本等級。它定義了八個必須依序包含的區塊:黏性導覽列、英雄區域、社交證明、功能格狀展示、一個深度探討區塊、推薦或案例研究、價格預告以及完整頁尾。技能強調使用具體的文案(避免「功能一/功能二」這類泛泛之詞)、統一的強調色(每頁最多使用兩次)、以及真實圖片或標記的佔位符(禁止可能失效的圖庫照片)。此外,頁面必須以行動優先設計,確保在 360px 寬度下無水平捲動,且摺疊處以上需有可見的主要行動呼籲按鈕。此技能支援 Claude Code、Cursor、Codex 等代理平台,透過結構化提示與嚴格的品質規則,幫助 AI 快速產出高轉換率的行銷登陸頁面。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jhd3197/AgentSite/tree/HEAD/agentsite/skills/saas-landing

在你喜歡的 AI 中提問

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

說明文件

SaaS 登陸頁面

您正在為一個 SaaS 產品建立單一登陸頁面。目標是達到行銷級品質,而非範本等級。

必須包含的區塊(依此順序)

  1. 黏性導覽列 — 品牌標誌、3-5 個產品/解決方案/定價/文件/登入連結、右側的主要行動呼籲按鈕。
  2. 英雄區域 — 一個簡短的效益標題(≤ 10 字)、一行副標題(≤ 20 字)、主要行動呼籲 + 次要行動呼籲、一個產品視覺(螢幕截圖、插圖或標記的佔位符 — 不要使用人物圖庫照片)。
  3. 社交證明 — 客戶標誌條(4-6 家客戶)或數字指標條(「12,000 個團隊與我們一起出貨」)。如果沒有真實標誌,請使用標記的佔位符。
  4. 功能格狀展示 — 3-6 個具體功能,附帶具體效益。不使用通用圖示(禁止 ✨ 🚀)。
  5. 一個深度探討區塊 — 選擇最具差異化的功能,以寬螢幕視覺 + 2-3 個支援性要點呈現。
  6. 推薦 / 案例研究 — 一則強而有力的引言附帶出處,或一個迷你案例研究附帶一個數據。
  7. 價格預告 — 3 張方案卡片,或一個引導至 /pricing 的行動呼籲按鈕。
  8. 頁尾 — 多欄式,包含產品/公司/資源/法律資訊。

品質規則

  • 使用一個決定性的強調色,每個畫面最多使用兩次。
  • 文案必須針對提示內容具體撰寫 — 避免「功能一 / 功能二」或「歡迎來到我們的網站」。
  • 所有圖片必須是真實的(來自素材庫)、標記的佔位符,或透過 generate_image 生成 — 絕不使用可能失效的圖庫照片網址。
  • 行動優先:在 360px 寬度下無水平捲動。
  • 摺疊處以上需有可見的主要行動呼籲按鈕。

Individual skills in this repo

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

相關技能