cta-patterns
npx machina-cli add skill Dragoon0x/Product-Skills/cta-patterns --openclawFiles (1)
SKILL.md
1.8 KB
CTA Patterns
Design calls-to-action that people actually click.
How to use
/cta-patternsApply CTA constraints to this conversation.
Constraints
Copy Rules
- MUST start with a verb ("Start", "Get", "Try", "See", "Create")
- MUST tell the user what happens next, not what they're committing to
- "Start free trial" beats "Sign up". "See pricing" beats "Learn more".
- NEVER use "Submit", "Click here", or "Learn more" as primary CTA text
- SHOULD include a benefit: "Get started free" not just "Get started"
- Secondary CTA should be a text link, not a competing button
Placement
- MUST be visible without scrolling on the primary landing surface
- MUST repeat after every major content section that builds intent
- MUST be the highest-contrast element in its container
- NEVER place two primary CTAs with different actions in the same viewport
- SHOULD add a low-commitment alternative near high-commitment CTAs
Progressive Commitment
- First CTA: lowest friction possible (no credit card, no forms)
- In-product: escalate commitment as the user experiences value
- NEVER ask for payment before the user has experienced the core value
- SHOULD show what the user gets before showing what it costs
Anti-Patterns
- Ghost buttons for primary CTAs (low contrast = low clicks)
- CTAs that navigate away without explaining the destination
- Identical CTA text across different page sections
- Pop-up CTAs that interrupt before the user has engaged
- Disabling the CTA while "loading" with no feedback
Source
git clone https://github.com/Dragoon0x/Product-Skills/blob/main/skills/conversion/cta-patterns/SKILL.mdView on GitHub Overview
Design CTA patterns that drive clicks by combining action-oriented copy, strategic placement, and progressive commitment. It enforces verbs that describe next steps, high-contrast primary CTAs, and showing value before costs. It also helps avoid common anti-patterns like ghost buttons and interruptive popups.
How This Skill Works
The approach starts with copy rules that require verbs and next-step benefits, then guides placement to keep primary CTAs visible and repeated after major content sections. It enforces progressive commitment from the lowest friction CTAs to in-product escalation, and prohibits CTAs that ask for payment before the core value is delivered.
When to Use It
- Reviewing a high traffic landing page for conversion potential
- CTA copy feels generic or underperforming
- Designing onboarding or in-app CTAs that guide users
- Optimizing pricing or signup flows
- Pages with multiple sections where behavior changes
Quick Start
- Step 1: Audit all CTAs and label primary versus secondary
- Step 2: Replace primary CTAs with verb-led, next-step text that shows value
- Step 3: Adjust placement for visibility, repeat after major sections, and verify no ghost buttons
Best Practices
- Start CTAs with a verb that describes what happens next
- Make the primary CTA the highest contrast element and visible without scrolling
- Repeat the primary CTA after major content sections that build intent
- Show value before costs and avoid asking for payment upfront
- Provide a low-commitment secondary text link near high-commitment CTAs
Example Use Cases
- Hero CTA uses Start free trial with no credit card required and high contrast styling
- Pricing page uses See pricing as the primary CTA with a nearby text link See features
- Signup flow uses Get started free to emphasize immediate value rather than Sign up
- In app onboarding uses Continue to setup as the first CTA to escalate commitment after value is shown
- Anti pattern avoidance by replacing ghost buttons with high contrast CTAs and non interruptive prompts
Frequently Asked Questions
Add this skill to your agents
