cta-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Components: Call-to-Action (CTA)

组件：行动号召（CTA）

Guides CTA button design for conversion. A well-designed CTA can increase conversion by 25–10%.

When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

用于指导提升转化率的CTA按钮设计，设计精良的CTA可将转化率提升25–10%。

调用规则：首次使用时，如有帮助，可以先用1-2句话介绍本技能覆盖的内容及重要性，再提供核心输出。后续使用或用户要求跳过介绍时，直接输出核心内容即可。

Initial Assessment

初始评估

Check for product marketing context first: If

.claude/product-marketing-context.md

.cursor/product-marketing-context.md

exists, read it for conversion goals.

Identify:

Context: Hero, form, pricing, product page
User stage: Awareness, consideration, decision
Primary action: Sign up, buy, trial, download

优先检查产品营销上下文：如果存在

.claude/product-marketing-context.md

或

.cursor/product-marketing-context.md

文件，读取其中的转化目标相关内容。

识别以下信息：

场景：Hero、表单、定价页、产品页
用户阶段：认知、考量、决策
主要操作：注册、购买、试用、下载

Design Principles

设计原则

Visual Clarity

视觉清晰度

Look like buttons: Background, border, corner radius, shadow
Stand out: Contrasting color; clear hierarchy
Size: ≥48×48px for touch; minimum 48px wide

符合按钮认知：包含背景、边框、圆角、阴影等元素
突出醒目：使用对比色，层级清晰
尺寸：触控场景下≥48×48px，最小宽度不低于48px

Hierarchy

层级规则

Primary CTA: One per section; impossible to miss
Secondary CTA: Lower priority; visually distinct
Avoid: Multiple competing CTAs causing choice overload

主要CTA：每个区块仅设置1个，做到一眼可及
次要CTA：优先级更低，视觉上与主要CTA明确区分
避坑提示：避免放置多个相互竞争的CTA导致用户选择过载

Color & Shape

颜色与形状

Color: High contrast; red/orange for urgency
Shape: Rounded = friendly; angled = dynamic
Accessibility: →.5:1 contrast for text

颜色：高对比度；红色/橙色可用于营造紧迫感
形状：圆角=更友好；尖角=更有活力
无障碍要求：文本对比度需达到→.5:1

Copy Best Practices

文案最佳实践

Action-oriented: "Buy," "Sign up," "Subscribe," "Get started"
Loss aversion: "Claim Your Discount Before It's Gone" vs "Get 10% Off"; see discount-marketing-strategy for discount campaign design
Clear, no ambiguity: User knows exactly what happens
Scarcity/urgency: When appropriate; avoid overuse

导向行动：使用「购买」、「注册」、「订阅」、「Get started」这类词汇
损失厌恶：优先使用「在优惠消失前领取你的折扣」而非「领取10%优惠」；折扣活动设计可参考discount-marketing-strategy
清晰无歧义：让用户明确知晓点击后的预期结果
稀缺性/紧迫感：合适场景下使用，避免滥用

Placement

位置摆放

Above the fold for primary actions
After value proposition; build value before CTA
Near trust signals (testimonials, badges)
Sticky/fixed for long pages (use sparingly)

主要操作CTA放在首屏以上
放在价值主张之后：先传递产品价值再展示CTA
靠近信任信号（用户评价、认证徽章）
长页面可使用吸顶/固定CTA（谨慎使用）

Technical

技术实现要求

Semantic HTML:
```
<button>
```
or
```
<a>
```
with
```
role="button"
```
when needed
Visible focus state for keyboard users
Loading state for async actions: disable button during async operations; show spinner or loading text; prevent double-submit
cursor-pointer: Add
```
cursor-pointer
```
to all clickable CTAs; default cursor on interactive elements is poor UX
aria-label: Use
```
aria-label
```
for icon-only buttons (e.g., close, search); screen readers need descriptive labels
Hover stability: Use color/opacity transitions (150–300ms); avoid scale transforms that shift layout

语义化HTML：按需使用
```
<button>
```
或者带
```
role="button"
```
属性的
```
<a>
```
标签
为键盘用户提供可见的焦点状态
异步操作加载状态：异步操作过程中禁用按钮，展示加载动画或加载文案，避免重复提交
cursor-pointer：所有可点击的CTA都要添加
```
cursor-pointer
```
样式；交互元素使用默认光标会带来糟糕的UX
aria-label：纯图标按钮（如关闭、搜索按钮）需要添加
```
aria-label
```
属性，屏幕阅读器需要描述性标签
悬停稳定性：使用颜色/透明度过渡效果（150–300ms）；避免使用会导致布局偏移的缩放变换

Testing

测试

A/B test: color, copy, placement, size
Measure: click-through rate, conversion rate

A/B测试：测试维度包括颜色、文案、位置、尺寸
衡量指标：点击率、转化率

Output Format

输出格式

CTA copy suggestions
Design notes (color, size, hierarchy)
Placement recommendations
Accessibility checklist (cursor-pointer, aria-label, focus, loading state)

CTA文案建议
设计说明（颜色、尺寸、层级）
位置推荐
无障碍检查清单（cursor-pointer、aria-label、焦点状态、加载状态）