Communitygithub.com

whoamnesia/cta-banner

为 astudio 制作高点击率 CTA 横幅和广告创意:基于品牌设计规范,针对转化进行优化。

cta-banner 是什么?

此技能旨在生成高点击率(CTR)的 CTA 横幅和广告创意,由资深数字工作室 astudio.one 设计,其标准参考 `<root>/reference/studio-bar.md`。它专注于广告转化,而非仅仅追求点击量,强调真实可信,禁止虚假稀缺、虚假评论或误导性声明。技能工作流程包括:分析产品、受众和认知阶段,制定策略,构思多个广告角度(如痛点、渴望、身份认同等),并根据角度撰写包含标题、副标题、CTA和证据元素的文案。最终,它会按照品牌规范和平台尺寸(如 Meta/Instagram、VK、Telegram、TikTok、YouTube、Google Display、Yandex Direct)输出可导出的 HTML 模板,并附带 A/B 测试矩阵,以衡量 CTR、CPC、CVR 和 CPA 等关键指标。该技能特别适用于用户提出制作广告、促销横幅、目标广告创意或高转化横幅等需求。

兼容平台~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 按钮或误导性声明——这些东西会提高点击率,但会毁掉转化率、信任度和广告账户。

共享:<root> = 此技能基础目录向上两级。生产(HTML 模板、导出、安全区域)来自 <root>/skills/banner-design/(references/production.md、art-direction.md),尺寸来自 search.py "<平台>" -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(动词 + 结果:「Получить расчёт」、「Забронировать」、“Start free trial”)、证明元素(真实评分、真实数字、保证)。确保与着陆页标题信息匹配。
  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. 交付:创意集、角度/文案表格、测试计划、以及衡量内容(点击率、每次点击成本、着陆页转化率、每次行动成本)——仅点击率不代表成功。

规则

  • 一条信息,一个 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.

相关技能