Components: Popup / Modal
Guides popup and modal design for conversion. Well-designed popups can achieve up to 25% conversion; poorly timed or intrusive ones hurt UX and SEO. Google penalizes intrusive mobile popups.
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 offers and audience.
Identify:
- 1. Goal: Newsletter, discount, lead magnet, demo
- Trigger: Time delay, scroll %, exit intent, click
- Mobile: Critical; smaller screens = easier to interrupt
Best Practices
Timing and Context
- - Avoid: Popup on page load; users hate it
- Prefer: After engagement (scroll 25-50%, time on page, exit intent)
- Personalize: Returning visitors, cart abandoners, discount users
- Value-first: Offer genuine value; act as "helpful teammate" not spam
Design
- - Short copy: Clear headline, one benefit, single CTA
- Visual hierarchy: Guide attention to CTA; don't distract
- Easy exit: Clear X, visible "No Thanks"; friction-free exit increases trust and conversion
- Brand consistency: Build instant comfort
Mobile
- - Size: Fit screen; thumb-friendly close
- Lightweight: Avoid heavy assets; affects LCP
- SEO: Google penalizes intrusive interstitials; avoid full-page takeover on mobile
Avoid
- - Dark patterns (fake close, hidden options)
- Too early or too frequent
- Multiple popups in one session
- Blocking content without clear value
Triggers
| Trigger | Use |
|---|
| Time delay | 5-15s typical; after some engagement |
| Scroll % |
25-50% read; user invested |
|
Exit intent | Mouse leaving viewport; last chance |
|
Click | User-initiated; least intrusive |
Output Format
- - Offer and copy
- Trigger (timing, scroll, exit intent)
- Design (size, CTA, exit)
- Mobile checklist
Related Skills
- - signup-login-page-generator: Full account signup → dedicated page preferred; popup for lightweight capture
- landing-page-generator: Lead capture popups on landing pages; popup as alternative to full-page form
- newsletter-signup-generator: Popup often contains signup form
- cta-generator: Popup CTA design
- top-banner-generator: Alternative to popup; less intrusive for announcements
- sidebar-generator: Alternative for CTAs; in-content often converts better
- brand-visual-generator: Popup styling
组件：弹窗/模态框
指导用于转化的弹窗和模态框设计。设计良好的弹窗转化率可达25%；时机不当或侵入性强的弹窗会损害用户体验和SEO。谷歌会对侵入性移动端弹窗进行惩罚。
调用时机：在首次使用时，如有帮助，用1-2句话说明该技能涵盖的内容及其重要性，然后提供主要输出。在后续使用或用户要求跳过时，直接进入主要输出。
初始评估
首先检查项目上下文： 如果存在.claude/project-context.md或.cursor/project-context.md，读取其中的优惠信息和受众信息。
识别：
- 1. 目标：新闻通讯、折扣、引流产品、演示
- 触发方式：时间延迟、滚动百分比、退出意图、点击
- 移动端：至关重要；屏幕越小越容易造成干扰
最佳实践
时机与上下文
- - 避免：页面加载时弹出弹窗；用户对此深恶痛绝
- 推荐：在用户参与后（滚动25-50%、页面停留时间、退出意图）
- 个性化：回访用户、购物车放弃者、折扣用户
- 价值优先：提供真实价值；扮演得力助手而非垃圾信息
设计
- - 简短文案：清晰标题、一个利益点、单一行动号召按钮
- 视觉层次：引导注意力到行动号召按钮；避免分散
- 轻松退出：清晰的关闭按钮、可见的不用了，谢谢；无摩擦退出可提升信任和转化
- 品牌一致性：快速建立舒适感
移动端
- - 尺寸：适配屏幕；拇指友好型关闭按钮
- 轻量化：避免重资产；影响最大内容绘制
- SEO：谷歌惩罚侵入性插页广告；避免在移动端全屏覆盖
避免
- - 暗黑模式（虚假关闭、隐藏选项）
- 过早或过频繁
- 单次会话中出现多个弹窗
- 无明确价值地遮挡内容
触发方式
| 触发方式 | 使用场景 |
|---|
| 时间延迟 | 通常5-15秒；在用户有一定参与度后 |
| 滚动百分比 |
阅读25-50%；用户已投入 |
|
退出意图 | 鼠标离开视口；最后机会 |
|
点击 | 用户主动触发；侵入性最低 |
输出格式
- - 优惠内容和文案
- 触发方式（时间、滚动、退出意图）
- 设计（尺寸、行动号召按钮、退出方式）
- 移动端检查清单
相关技能
- - signup-login-page-generator：完整账户注册→优先使用专用页面；弹窗用于轻量级信息收集
- landing-page-generator：落地页上的线索收集弹窗；弹窗作为全页表单的替代方案
- newsletter-signup-generator：弹窗通常包含注册表单
- cta-generator：弹窗行动号召按钮设计
- top-banner-generator：弹窗的替代方案；用于公告时侵入性较低
- sidebar-generator：行动号召按钮的替代方案；内容内嵌通常转化率更高
- brand-visual-generator：弹窗样式设计
