Communitygithub.com

tonone-ai/tonone

用於規劃著陸頁資訊架構、設計轉換優化版面,或安排 SaaS 等產品的頁面結構。

tonone 是什麼?

本技能專門協助開發者或 AI 代理快速規劃高轉換率的著陸頁資訊架構(Information Architecture)。當使用者需要為已知或可發現的產品類型設計著陸頁結構、章節順序或佈局時,此技能會先透過 CLI 指令搜尋 Landing Page 與產品推理的已知模式,再針對每個章節執行「那又怎樣?」(so what?)測試,確保每一區塊都有明確的轉換目的。輸出採用緊湊的箱型表格,標示章節名稱、目的與 CTA 類型,並附上轉換策略與 CTA 文案建議。它支援在 Claude Code、Cursor 或 Codex 等 AI 代理環境中執行,並內建反模式檢查(例如不允許主 CTA 低於摺疊線)。若輸出超出 40 行限制,會自動呼叫 `/atlas-report` 生成完整 HTML 報告,CLI 僅作為摘要收據。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/tonone-ai/tonone/tree/HEAD/skills/draft-landing

在你喜歡的 AI 中提問

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

說明文件

draft-landing — 著陸頁資訊架構

請依照 docs/output-kit.md 定義的輸出格式 — CLI 最多 40 行、箱型骨架、統一嚴重性指標、緊湊文體。

使用時機

使用者需要著陸頁結構、章節順序或轉換優化版面,且產品類型已知或可發現。

工作流程

  1. 從使用者請求或專案上下文確認產品類型
  2. 搜尋著陸頁模式:
    python3 -m draft_agent.uiux search --domain landing --query "{product_type}" --limit 3
    
  3. 搜尋產品推理以取得受眾與轉換脈絡:
    python3 -m draft_agent.uiux search --domain product --query "{product_type}" --limit 3
    
  4. 對每個章節執行「那又怎樣?」測試 — 每個區塊都必須證明其存在的價值
  5. 輸出章節順序與 CTA 放置標記

輸出格式

┌─ Landing Page IA — {product_type} ──────────────────────────────────┐
│ #  │ Section            │ Purpose                    │ CTA?          │
├────┼────────────────────┼────────────────────────────┼───────────────┤
│  1 │ {section_name}     │ {purpose}                  │ Primary CTA   │
│  2 │ {section_name}     │ {purpose}                  │ —             │
│  3 │ {section_name}     │ {purpose}                  │ Secondary CTA │
│  … │ …                  │ …                          │ …             │
└────┴────────────────────┴────────────────────────────┴───────────────┘

Conversion strategy: {strategy}
CTA copy guidance:   {cta_guidance}

反模式

  • 永遠不要跳過每個章節的「那又怎樣?」測試 — 如果某個區塊無法回答此問題,就刪除它
  • 永遠不要在沒有明確轉換目的的情況下添加章節
  • 永遠不要在主畫面將主要 CTA 放在摺疊線以下
  • 永遠不要在不了解主要受眾及其待完成任務的情況下進行頁面結構規劃

交付方式

若輸出超出 40 行 CLI 預算,請呼叫 /atlas-report 並附上完整結果。HTML 報告即為最終輸出。CLI 為收據 — 箱型標頭、一行結論、前三項發現與報告路徑。切勿將分析內容傾倒至 CLI。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相關技能