Components: Trust Badges
Guides trust badge design and placement for conversion. Trust badges borrow authority from third-party organizations to signal legitimacy and reduce purchase anxiety.
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.
Initial Assessment
Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read it for key partners and certifications.
Identify:
- 1. Site type: E-commerce, SaaS, lead gen
- Available badges: Security, payment, reviews, guarantees
- Placement goals: Hero, checkout, product pages
Badge Types & Impact
| Type | Best Placement | Conversion Impact |
|---|
| Security (SSL, Norton, McAfee) | Checkout, payment forms | +15–10% for unfamiliar brands |
| Payment logos (Visa, PayPal, Stripe) |
Checkout, cart | +8→2% trust |
|
Money-back guarantee | Product, checkout | +6–10% |
|
Reviews/ratings (Trustpilot, BBB) | Product, hero | +12→8% |
|
Privacy/compliance (GDPR, CCPA) | Forms, checkout | Data-sensitive transactions |
"Trusted by" logos: Client/customer logos in hero or footer; social proof for B2B. "As Seen In" (press coverage): Publication logos; see press-coverage-page-generator for media mentions aggregation.
Best Practices
Quantity
- - 3→ badge types max; more can cause "badge bloat" and reduce conversions by 5→%
- Quality over quantity; use only legitimate, verifiable badges
Placement
- - Highest leverage: Cart and checkout (near payment fields)
- Product pages: Near add-to-cart button
- Hero: "Trusted by" logos for brand credibility
- Footer: Secondary trust signals
Authenticity
- - Use only real, verifiable badges
- Fake or irrelevant badges create skepticism
- Link to verification where appropriate
Design Guidelines
- - Consistent size and style; don't mix clashing visuals
- Image optimization: Alt text, format—see image-optimization
- Adequate spacing; avoid clutter
- Grayscale or muted for "Trusted by" logos (don't compete with primary content)
- Ensure badges are recognizable at display size
Accessibility
- - Provide
alt text for badge images (e.g., "Norton Secured") - Don't rely on badges alone for critical information
Output Format
- - Badge recommendations by type and placement
- Placement map (hero, product, checkout)
- Quantity guidance (avoid bloat)
Related Skills
- - landing-page-generator: Trust signals as step 2 (earn trust) in landing page flow
- hero-generator: "Trusted by" often in hero
- testimonials-generator: Complementary social proof
- cta-generator: Badges near CTAs increase conversion
- pricing-page-generator: Trust badges on pricing pages
- image-optimization: Badge image optimization (alt, format)
- press-coverage-page-generator: "As Seen In" publication logos; similar visual treatment; distinct (press = media coverage; trust-badges = security, payment, reviews)
- brand-protection: "Official website" badges to distinguish from impersonation sites
组件:信任徽章
指导信任徽章的设计与放置以提升转化率。信任徽章借用第三方机构的权威性来表明合法性,减少购买焦虑。
调用方式:在首次使用时,如有帮助,可先用1-2句话说明本技能涵盖的内容及其重要性,然后提供主要输出。在后续使用或用户要求跳过时,直接进入主要输出。
初步评估
首先检查项目上下文: 如果存在 .claude/project-context.md 或 .cursor/project-context.md,读取其中的关键合作伙伴和认证信息。
识别:
- 1. 网站类型:电子商务、SaaS、潜在客户生成
- 可用徽章:安全、支付、评价、保障
- 放置目标:首屏、结账、产品页面
徽章类型与影响
| 类型 | 最佳放置位置 | 转化影响 |
|---|
| 安全(SSL、Norton、McAfee) | 结账、支付表单 | 不熟悉品牌提升+15-10% |
| 支付标识(Visa、PayPal、Stripe) |
结账、购物车 | 信任度提升+8→2% |
|
退款保证 | 产品、结账 | +6-10% |
|
评价/评分(Trustpilot、BBB) | 产品、首屏 | +12→8% |
|
隐私/合规(GDPR、CCPA) | 表单、结账 | 数据敏感交易 |
受信赖标识:首屏或页脚的客户/合作伙伴标识;B2B的社会证明。曾亮相于(媒体报道):出版物标识;媒体提及汇总请参见press-coverage-page-generator。
最佳实践
数量
- - 最多3种徽章类型;过多可能导致徽章臃肿,使转化率降低5→%
- 重质不重量;仅使用合法、可验证的徽章
放置位置
- - 最高杠杆点:购物车和结账(靠近支付字段)
- 产品页面:靠近加入购物车按钮
- 首屏:品牌可信度的受信赖标识
- 页脚:次要信任信号
真实性
- - 仅使用真实、可验证的徽章
- 虚假或不相关的徽章会引发怀疑
- 在适当位置链接到验证页面
设计指南
- - 保持一致的尺寸和风格;不要混用冲突的视觉效果
- 图片优化:替代文本、格式——参见image-optimization
- 适当的间距;避免杂乱
- 受信赖标识使用灰度或柔和色调(不与主要内容竞争)
- 确保徽章在显示尺寸下可识别
无障碍性
- - 为徽章图片提供 alt 文本(例如:Norton Secured)
- 不要仅依赖徽章传达关键信息
输出格式
- - 按类型和放置位置的徽章建议
- 放置位置图(首屏、产品、结账)
- 数量指导(避免臃肿)
相关技能
- - landing-page-generator:信任信号作为落地页流程中的第2步(赢得信任)
- hero-generator:受信赖标识通常位于首屏
- testimonials-generator:补充性社会证明
- cta-generator:靠近CTA的徽章可提高转化率
- pricing-page-generator:定价页面上的信任徽章
- image-optimization:徽章图片优化(替代文本、格式)
- press-coverage-page-generator:曾亮相于出版物标识;视觉处理类似;有区别(press = 媒体报道;trust-badges = 安全、支付、评价)
- brand-protection:官方网站徽章,用于区分仿冒网站