Communitygithub.com

coastdigitalgroup/coastai-skills

稽核並優化網站的英雄區塊,以提升清晰度、參與度和轉換率。當網頁跳出率高、行動呼籲點擊率低或折頁以上資訊混亂時,觸發此技能。

coastai-skills 是什麼?

此技能提供一套系統性的框架,專門用於改善網頁中最關鍵的「折頁以上」內容區塊(Hero Section)。它專注於將訊息與使用者意圖對齊、減少認知摩擦,並確保有清晰的行動路徑。透過優化標題、副標題、視覺素材與行動呼籲(CTA),能直接提升轉換率和工作階段持續時間等可量化指標。此技能支援任何以轉換為目標的網頁,包括登陸頁、產品首頁與SaaS試用頁面,並會產出包含英雄區塊稽核報告、優化文案、視覺建議與版面配置指南的完整報告。其工作流程從進行「五秒測試」稽核現狀開始,接著定義價值主張、草擬文案、最佳化視覺階層,最後比對決策規則進行驗證。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/coastdigitalgroup/coastai-skills/tree/HEAD/website-growth/hero-section-optimization

在你喜歡的 AI 中提問

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

說明文件

英雄區塊優化

目的

英雄區塊優化技能提供一套系統性的框架,用於改善網頁中最關鍵的部分:折頁以上的內容。它專注於將訊息與使用者意圖對齊、減少認知摩擦,並確保有清晰的行動路徑。透過優化標題、副標題、視覺素材與行動呼籲(CTA),此技能能直接改善可量化的成果,例如轉換率和工作階段持續時間。

使用案例

  • 為付費廣告活動(PPC)優化登陸頁面。
  • 改善跳出率高的首頁。
  • 推出需要清晰傳達訊息的新產品或服務。
  • 優化SaaS登陸頁面以提高試用註冊率。

何時不應使用

  • 深層漏斗頁面: 請勿用於結帳頁面、說明文件或帳戶設定,因為這些頁面不適用英雄區塊模式。
  • 純資訊/長篇內容: 如果主要目標是閱讀文章(例如部落格文章),標準的英雄區塊可能會造成干擾。
  • 僅限品牌曝光: 如果沒有特定行動要使用者執行(這在以成長為導向的網站中較少見),以轉換為導向的英雄區塊可能不合時宜。

輸入

  1. 目標受眾: 此頁面是為誰而設?(例如:「尋找簡單記帳軟體的小型企業主」)。
  2. 主要目標/行動呼籲: 我們希望使用者做的一件事是什麼?(例如:「註冊免費試用」)。
  3. 目前的英雄區塊數據(如有): 跳出率、行動呼籲點擊率(CTR)、熱點圖。
  4. 核心價值主張: 產品/服務的主要益處是什麼?
  5. 現有素材: 現有的標題、圖片和文案。

輸出

  1. 英雄區塊稽核報告: 識別當前的摩擦點與錯失的機會。
  2. 優化後英雄區塊文案: 新的主標題(H1)、副標題和行動呼籲文字。
  3. 視覺建議: 有關支援訊息的圖片/影片選擇指引。
  4. 版面線框圖/指引: 改善資訊階層的結構性變更。

工作流程

1. 稽核目前的英雄區塊

進行「五秒測試」。是否清楚傳達:

  • 服務/產品是什麼?
  • 是為誰而設?
  • 使用者下一步該做什麼?
  • 主要益處是什麼?

2. 定義價值主張

將核心產品濃縮成一個「這對我有什麼好處?」(WIIFM)的陳述。使用以下公式: 目標受眾 + 問題 + 解決方案 + 獨特益處。

3. 草擬優化後的文案

  • 主標題(H1): 必須清晰勝過巧妙。陳述使用產品的主要益處或結果。
  • 副標題: 提供背景資訊,解決痛點,或處理常見的異議。
  • 行動呼籲: 使用以行動為導向、以利益為驅動的語言(例如:「開始我的免費試用」而非「送出」)。

4. 最佳化視覺階層

  • 確保行動呼籲是視覺上最突出的元素。
  • 使用顯示產品運作中或使用產品後的結果的圖片(社會證明或理想情境)。
  • 確保文字與背景之間有高對比度。

5. 對照決策規則進行審查

驗證新設計是否遵循以下定義的成長啟發法。

決策規則

  • 一個目標: 每個英雄區塊必須剛好有一個主要的行動呼籲。次要行動呼籲(例如「了解更多」)在視覺上應較不突出。
  • 清晰 > 創意: 如果一個標題「很有創意」但無法在5秒內解釋產品功能,請捨棄它。
  • 折頁以上: 主標題、副標題和主要行動呼籲必須在標準的行動裝置和桌面裝置視窗中無需捲動即可看見。
  • 社會證明: 如果空間允許,請在行動呼籲附近包含一個小的「信任訊號」(例如:「已有超過10,000位用戶加入」或五星評價)。

限制條件

  • 真實陳述: 價值主張必須準確反映產品或服務所提供的內容 — 過度承諾會在最初印象消退後增加跳出率。
  • 品牌一致性: 視覺風格、語氣和訊息必須與更廣泛的品牌識別保持一致。
  • 折頁以上優先: 在常見的視窗尺寸中,主要行動呼籲必須無需捲動即可看見。

非目標

  • 重寫整體品牌訊息策略或產品定位。
  • 委託或建立新的視覺素材,例如攝影、插圖或影片。
  • 改善產品本身以兌現在英雄區塊中所做的承諾。

常見失敗模式

  • 「模糊的標題」: 諸如「歡迎來到未來」或「我們做得更好」這類無法解釋產品的標題。
  • 行動呼籲被埋沒: 將行動呼籲置於折頁以下,或使其與背景融為一體。
  • 圖片脫節: 使用與價值主張無關的通用圖庫照片。
  • 資訊過載: 試圖在英雄區塊中解釋每個功能,而不是專注於主要益處。

驗證標準

  • 五秒測試: 將新的英雄區塊展示給某人看5秒鐘,然後詢問他們該網站的主題是什麼以及他們應該做什麼。
  • A/B 測試: 將最佳化版本與原始版本進行比較,以衡量點擊率和跳出率的變化。
  • 捲動地圖: 使用 Hotjar 等工具,確保使用者在跳出前看到行動呼籲。
  • 清晰度評分: 根據價值主張被理解的速度,以1到10分為英雄區塊的清晰度評分。

Individual skills in this repo

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

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for progressive disclosure using accordions, ensuring structural integrity, visual affordances, and accessibility across different content densities and devices.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for long-form content, managing readability, vertical rhythm, and information density to ensure a superior reading experience.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for informational elements that communicate state (Badges) and categorization (Tags) with clarity and accessibility.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for non-overlay notifications, managing global announcements and contextual inline alerts to communicate system states without interrupting the user's flow.

coastdigitalgroup/coastai-skills

Design and implement a systematic, asymmetrical bento-grid layout framework to organize diverse content types cohesively while maintaining strict visual hierarchy, logical focus order, and responsive flexibility.

coastdigitalgroup/coastai-skills

Design a responsive, mobile-first bottom navigation bar and persistent action dock system for mobile websites and web applications, establishing spatial anchors, tab bar anatomy, badge indicators, thumb-zone ergonomics, safe area inset handling, active/inactive state contrast, and desktop responsive adaptation rules.

coastdigitalgroup/coastai-skills

Design a mobile-first bottom sheet overlay system with configurable detents, drag affordances, safe area padding, responsive desktop modal/popover adaptation, and WCAG AA accessibility compliance.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for secondary navigation trails that provide orientation, context, and one-click access to parent levels in deep information architectures.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for buttons and interactive triggers, managing visual hierarchy, variant logic, and action grouping to ensure clear intent and accessible interaction.

coastdigitalgroup/coastai-skills

Design a systematic framework for date and time selection, managing calendar grids, range pickers, and scheduling interfaces to ensure precision and accessibility.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for modular content containers that maintain hierarchy, structural integrity, and action alignment across variable content and responsive viewports.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for horizontal discovery components, managing navigation affordances, scroll behavior, and accessibility to ensure effective content density without compromising usability.

coastdigitalgroup/coastai-skills

Design a systematic, highly accessible, and developer-friendly UI layout framework for code blocks, snippet showcases, multi-file code tabs, line-highlighting, diff views, and syntax token contrast in technical documentation and developer platforms.

coastdigitalgroup/coastai-skills

Design a systematic framework for global command menus (Cmd+K panels) that combines keyboard-driven navigation, command execution, and shortcut discovery into an accessible, responsive overlay.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for threaded conversations, managing nesting depths, action hierarchies, and community signaling to foster engagement and readability.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for side-by-side comparison interfaces, managing high attribute density and responsive complexity to support informed decision-making.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for user privacy, managing consent banners, preference centers, and persistent privacy controls to balance legal compliance with user trust.

coastdigitalgroup/coastai-skills

Design and implement a systematic, highly accessible, and responsive visual layout framework for conversational chat widgets, live chat boxes, and chatbot panels that ensures clear message scannability, native focus flow, and seamless mobile keyboard adaptation.

coastdigitalgroup/coastai-skills

Design a systematic, accessible, and high-conversion framework for custom select dropdowns and comboboxes, defining anatomy, states, search-filtering, and responsive mobile-adaptive patterns.

coastdigitalgroup/coastai-skills

Design and implement a systematic color palette that ensures WCAG 2.2 accessibility compliance. Trigger this skill when asked to define brand colors, create UI themes, or establish a visual system for a website.

相關技能