Overview
How might we design ai feature spotlight so people can trust and act on AI output?
When this pattern fits
- Perfect for applications with multiple AI features, productivity tools, and platforms where users need guidance to discover AI capabilities.
When to skip or lighten it
- Power users who completed onboarding and disabled tips.
- Spotlight on features not yet available in their plan.
- Every minor release competing for attention at once.
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
Blocking modal on first login for five features.
Spotlight with no permanent path to the feature later.
Animation that repeats every visit.
Marketing copy with no concrete example action.
How products use it
| Product | Implementation |
|---|---|
| Figma | What's new and tool highlights on canvas first use. |
| Notion | AI feature callouts when selecting blocks. |
| Adobe Creative Cloud | Home screen spotlights on new generative tools. |
| Microsoft 365 | Copilot coach marks in Word and Excel. |
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "AI Feature Spotlight" AI interface design pattern.
Pattern Definition:Frequently asked questions
Spotlight vs feature discovery feed?
Spotlight is one feature in context. Feed is ongoing personalized discovery.
How long should spotlights show?
Until dismissed or first successful use, then archive in help.
New vs existing users?
New users get basics. Existing users get delta spotlights on shipped features.
Measure?
Try click-through and first success within session.