Communitygithub.com

astudio · CTA 橫幅廣告

專為點擊與轉換設計的 astudio 號召性用語橫幅與廣告素材:包含提案與受眾分析、吸睛鉤子、角度變化、文案公式、轉換導向構圖、平台規格與安全區域,以及 A/B 測試矩陣。

astudio · CTA 橫幅廣告 是什麼?

這是一個專門為了設計高點擊率(CTR)的 CTA 橫幅廣告與廣告素材而生的 AI 技能。它能引導 AI 從提案與受眾分析(認知階段)開始,產出「停止滾動」的鉤子、多種角度變化(痛苦、渴望、見證、認同、逆向、急迫感),以及標題、副標與行動呼籲(CTA)的文案公式。 此技能的核心是轉換導向的設計原則:一個焦點、一個動作、高對比、視覺動線引導至按鈕。它支援 Meta/Instagram、VK、Telegram、TikTok、YouTube、Google Display、Yandex Direct 等平台的規格與安全區域,並內建 A/B 測試矩陣。所有素材都基於品牌的設計代碼,並以確切尺寸匯出。 技能參考了大量的文件,包括轉換心理學、測試方法論、文案規則與製作流程。它強調真實性:禁止虛假的稀缺性、評論或 UI 按鈕,以維護信任與廣告帳戶安全。輸出形式為 HTML 模板,可依規範渲染為 PNG。當使用者提及「廣告」、「廣告素材」、「推廣橫幅」、「高 CTR 橫幅」、「銷售橫幅」或「A/B 測試素材」時,即可啟用此技能。 此技能建構在 astudio-aio:banner-design 技能之上,是專業數位工作室為效能廣告打造的完整解決方案。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/whoamnesia/site-design/tree/HEAD/skills/cta-banner

在你喜歡的 AI 中提問

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

說明文件

astudio · CTA 橫幅廣告 是做什麼的?

角色:數位工作室 astudio.one 的資深績效設計師(15年以上經驗)— 每一組創意都是一份高報酬的委託;標準請見 <root>/reference/studio-bar.md。

高 CTR 的創意在最初半秒內就贏得勝利(停止滾動),用受眾在乎的語言說一件事,並讓下一步顯而易見。它必須誠實:不做虛假的稀缺性、虛假評論、虛假 UI 按鈕或誤導性聲明 — 那些東西雖然能提高 CTR,卻會摧毀轉換率、信任與廣告帳戶。

共享:<root> = 此技能基礎目錄的上兩層。生產(HTML 模板、匯出、安全區域)來自 <root>/skills/banner-design/(references/production.md、art-direction.md),尺寸來自 search.py "<platform>" -d banner。品牌套件/代碼來自專案。本地參考文件:references/conversion.md(認知階段、角度、鉤子、文案公式、轉換導向構圖、平台注意事項)、references/testing.md(A/B 測試矩陣、命名方式、衡量指標)。文案規則:<root>/reference/copy.md §6。

工作流程

  1. 提案與受眾(在一輪內詢問缺失資訊):產品、明確的提案(價格、折扣、試用、贈品 — 僅限真實的)、目標受眾及其處境、認知階段、平台/版位、目標(點擊、潛在客戶、銷售、安裝)、登陸頁面(訊息匹配至關重要)、品牌素材、合規限制(金融/健康/酒精法規、法律標示:例如俄羅斯廣告需依廣告標示法預留「Реклама」標籤及廣告主資訊/erid 的空間)。
  2. 策略:診斷認知階段 → 訊息規則(該說什麼、不該說什麼);選擇轉換動作與單一利益點;列出異議(價格、信任、時間、複雜度、過去失敗經驗)以及創意應回答哪些異議。
  3. 角度:撰寫 6-10 個不同的角度(痛苦、渴望/成果、見證、認同、逆向、機制、僅在真實時使用急迫感、價格/價值、前後對比),每個角度都帶一個鉤子句。選出 3-4 個最具差異性的角度進行製作。
  4. 各角度的文案:標題(≤ 7 個字,具體 — 數字、結果、時間)、副標(≤ 12 個字,移除主要異議)、CTA(動詞 + 結果:「取得報價」、「預約」、「開始免費試用」)、見證元素(真實評分、真實數字、保證)。訊息需與登陸頁面標題匹配。
  5. 轉換導向構圖(references/conversion.md §4):一個焦點視覺(臉部視線朝向 CTA、使用中的產品、成果),標題放在最強位置,CTA 作為對比度最高的元素並留有呼吸空間,視覺動線(Z/F 模式)終點在 CTA,品牌標誌小但可見,文字精簡,縮圖上仍可閱讀。 加入 2-3 個吸引目光的細節(帶有提案事實的貼紙、關鍵字上的手繪底線/圓圈、指向 CTA 的箭頭或視線、打破框架的裁切、對比框架 — conversion.md §4a),但不可過度。視覺素材:使用免費圖庫照片(Unsplash/Pexels/Pixabay,須標明出處)或程式碼生成圖形 — 絕不使用 AI 生成的圖片。 依橫幅設計模板於平台尺寸下使用 HTML 建構;保留品牌的代碼與字體。
  6. 變體與 A/B 測試矩陣(references/testing.md):每次測試只變動一個變數(鉤子/角度 → 視覺 → 標題 → CTA → 色彩),依角度與變數命名檔案,每個廣告組合 3-5 個創意。
  7. 匯出與品質保證:render.cjs element … --scale 2;開啟每個 PNG:縮圖測試(25% 尺寸)、安全區域/UI 重疊檢查、對比度檢查(CTA 文字 ≥ 4.5:1,按鈕與背景對比 ≥ 3:1)、法律標籤空間、檔案大小限制。
  8. 交付:創意組合、角度/文案表格、測試計畫,以及應衡量的指標(CTR、CPC、登陸頁面 CVR、CPA)— 單看 CTR 並不代表成功。

規則

  • 一個訊息、一個 CTA、一個焦點。利益重於功能。具體重於巧妙。
  • CTA 看起來可點擊(按鈕形狀,使用品牌風格),但絕不可模仿平台 UI 或系統對話框。
  • 僅使用真實見證;僅在具備真實截止日期時使用急迫感;價格必須完全依提供之資訊標示,必要時需顯示條件。
  • 品牌一致性建立記憶:同一組創意中使用相同的標誌位置、色板、字體;角度可以改變,品牌不能。
  • 行動優先:大部分曝光發生在手機上 — 優先設計 4:5 / 9:16 尺寸,再檢查 1:1 與 1.91:1 的裁切。

Individual skills in this repo

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

whoamnesia/brand

astudio brand kit and brand identity: positioning, messaging, voice and tone, visual identity (logo usage, colour system, typography, imagery, iconography, shape language), the design code handoff and a rendered HTML brand book. Use when the user asks for a brand kit, brand book, brand guidelines, identity system, фирменный стиль, брендбук, бренд-кит, дизайн-код бренда, tone of voice, messaging framework, or wants to audit whether materials are on-brand, extend an incomplete brand for screens, or apply a brand to a product. Usually runs after astudio-aio:logotype and before astudio-aio:design-system; part of the astudio-aio pipeline.

whoamnesia/design-system

astudio design system and design code: three-layer design tokens (primitive → semantic → component) in W3C DTCG 2025.10 format, CSS custom properties with light/dark themes, a Tailwind v4 theme, fluid type and spacing scales, component specs with every state (buttons, inputs, cards, nav, dialogs, tables, badges), and DESIGN.md - generated from a brand kit or reverse-engineered from an existing codebase or live site. Use when the user asks for design tokens, a token architecture, CSS variables, a Tailwind theme, theming/dark mode at system level, component specifications, "дизайн-код", "дизайн-система", "токены", "UI kit", DESIGN.md, or wants hard-coded values replaced with tokens. Part of the astudio-aio pipeline (after brand, before the site build).

whoamnesia/logotype

astudio logo design: from brief to a professional, ownable logo built as clean hand-written SVG - word map, 8-12 concepts across mark types (wordmark, lettermark, symbol, abstract, combination, emblem, mascot), three built concepts tested at 16px-billboard, in one colour, reversed, mirrored and in real contexts, then the full logo kit (lockups, small-size cut, one-colour/reversed files, favicon, app and web icons, usage guide). Use whenever the user asks for a logo, logotype, wordmark, monogram, brand mark, emblem, favicon or app icon, a logo redesign or refresh, or critique of a logo - "сделай логотип", "нужен логотип для кофейни", "лого для бренда", "фирменный знак", "иконка приложения из логотипа". Pulls in brand, banner-design or other astudio sub-skills when the request extends to a brand kit or applications.

whoamnesia/ui-ux

astudio UI/UX design intelligence for any interface task - designing, building, reviewing, auditing, critiquing, polishing or fixing pages, screens and components: hierarchy, layout, typography, colour, spacing, interaction, forms, navigation, states, accessibility (WCAG 2.2), responsive behaviour, motion and UX copy, backed by a searchable database (90 styles, 190+ product types with palettes and reasoning, 74 font pairings, 1900 Google Fonts with Cyrillic filter, 119 UX rules, landing patterns, chart guide, icons, GSAP presets, 22 stack guideline sets). Use when the user asks to improve or review a UI, "make it look better/premium/less generic/less AI", audit accessibility or UX, fix a layout, choose a style/palette/fonts for a product, "проверь интерфейс", "улучши UI", "сделай красивее", "аудит UX", or for any focused UI decision outside the full astudio-aio pipeline.

相關技能