Download PDF
For the best experience stay on the web to copy prompts
Usage guide · AI-powered UX
4 AI UX Prompts
Usage guide for implementing AI-powered UX in any product.
The AI interprets intent and organizes what your product already has.
Developed by Jad · AI Tooltip
Start here
How to use this guide
These prompts are for AI coding tools working inside an existing product. The goal is to add controlled, AI-powered UX layers that use your product’s real data, routes, components, and context.
Core principle
User context + product data + strict UI rules = useful AI UX
The AI interprets intent and organizes what your product already has. It never invents.
The two bracket types, read this before you paste
The prompts use two kinds of brackets. They are not the same, and mixing them up will break the feature.
[square brackets] are yours to fill in. Replace them with your product info before you paste. Only Adaptive UI needs this.
{{DOUBLE_CURLY}} are runtime variables. Leave them exactly as they are. Your code fills these in automatically each time the feature runs. Do not type into them.
How to run any prompt
Works with any AI coding tool.
Paste the prompt into your AI coding tool inside the existing project.
Fill in [square brackets] only. Leave {{curly}} variables alone.
Start with one screen or workflow. Test the edge cases. Then expand.
Prompt index
Prompt
End result
Best for
Magic Mouse
Turn the cursor into a contextual help layer for complex UI.
Complex dashboards. Settings and billing pages.
Adaptive UI
Personalize the interface based on what the user is trying to do.
Landing pages that adapt to visitor intent. Dashboards that surface different widgets by role.
Onboarding Agent
Create a personalized path to the user’s first win.
First login after signup. Empty dashboard states.
Smart Search
Let users search by meaning, not exact keywords.
Help centers and docs. Product navigation and settings.
1
Prompt 01
Magic Mouse
Turn the cursor into a contextual help layer for complex UI.
The UX promise
Use this when users need help understanding labels, settings, forms, charts, empty states, or features without reading a full tutorial.
Formula
Current screen + hovered element + user context = contextual help
Where it helps
Complex dashboards, analytics tools, and admin panels
Settings, billing, and setup flows
Products with many features or unfamiliar terminology
Be careful about
Do not turn it into a chatbot panel.
Only activate it when the user chooses help mode or shows strong confusion signals.
Debounce hover events so the AI is not called too often.
Keep tips short enough to fit in real UI.
The prompt
✦
Paste into your AI coding tool
Add a contextual AI help mode to this existing UI.
The goal is to replace generic tutorials with a helper that gives users tips based on what they are looking at, hovering, clicking, or struggling with. It should feel like an invisible UX layer, not a chatbot.
Core behavior:
1. Add a small “AI Help” button in a sensible spot (top bar, bottom-right, or near existing help controls).
2. When activated, the cursor becomes a glowing AI pointer.
3. While active, interactive elements become detectable on hover.
4. On hover or click, collect context from the current UI and generate a tip.
5. Show the tip in a floating card anchored to the element, with a small connector arrow. Reposition if space is tight.
6. The user exits by clicking the button again or pressing Escape.
Cursor and highlight:
- Custom pointer with a subtle pulse and smooth movement. Not distracting, not oversized.
- On hover, highlight the element with a soft outline that does not shift layout.
- Works on buttons, inputs, cards, nav items, form fields, charts, empty states, and error messages.
Tip card content:
- Short title
- One clear contextual explanation
- One suggested next action
- Optional “Why this matters” line if space allows
Build a context helper, getAIHelpContext(element), that returns a structured object. Collect what is available, grouped as:
- Page: product name, current route, page title, section name
- Element: label, type, nearby text, placeholder, button text, current value, validation state, error text, empty state text
- User: role, plan, device type, recent actions
- Trigger: hover, click, error, inactivity, repeated failed attempt, time on screen
Do not ask the user to enter any of this manually.
Use this fixed AI prompt at runtime:
You are a contextual help layer inside a digital product.
Replace generic tutorials and static tooltips with short, screen-aware guidance.
You receive a JSON context object. Use only what is provided. Do not ask for missing info. If something is unknown, make the safest useful assumption.
Generate help for the exact element or state the user is focused on.
Return only valid JSON:
{ “title”: “Short title”, “tooltip”: “Under 20 words”, “expanded_help”: “Under 40 words”, “suggested_action”: “One short next action”, “confidence”: “high | medium | low” }
Rules:
- Be specific to the current screen and situation.
- Do not sound like documentation. Do not mention AI.
- Match the user’s level: plain language for beginners, direct and efficient for advanced.
- If the user made an error, explain the fix. If they are hesitating, reduce friction.
Context: {{AUTO_USER_CONTEXT}}
Implementation:
- Build as a reusable module, easy to remove or extend. Name it something like SmartHelpLayer.
- Add a loading state (“Generating help…”) and a fallback for when the AI fails.
- On failure, show a basic static explanation built from the element label and nearby text.
- Cache tips per element and context. Debounce hover. Support keyboard and Escape.
Styling:
- Match the existing design system first. Use its tokens for the card, highlight, and pointer.
- Only if the product has no strong visual identity, default to: dark translucent card, soft blur, subtle glow accent, rounded corners, small assistant icon.
- Never look like a generic chatbot.
Acceptance criteria:
- User can activate and exit Help Mode.
- Hovering or clicking an element generates a contextual tip in an anchored card.
- Tips use automatically collected context. No manual entry.
- The UI stays clean and usable when Help Mode is off.
What you should see
A help toggle in the UI. When on, hovering any element pops a small card explaining that exact element in context, styled to match your product.
If it goes wrong
If it became a chatbot or clashes with your theme, paste this:
This looks like a chatbot panel and the colors clash with my product. Rebuild it as an anchored tip card only, and use my existing design system tokens for all colors and styling instead of the default glow.
2
Prompt 02
Adaptive UI
Personalize the interface based on what the user is trying to do.
The UX promise
Use this when different users need different experiences, but you do not want to build separate pages or flows for every audience segment.
Formula
User intent + product data + predefined UI rules = adaptive UI
Where it helps
Landing pages that adapt to visitor intent
Dashboards that surface different widgets by role
Directories, marketplaces, and ecommerce pages that recommend relevant paths
Learning platforms that build a custom starting point
Be careful about
Do not let the AI redesign the whole page. Limit it to existing components and a predictable JSON schema.
Use your product data as the source of truth.
Include a fallback state for when the data match is weak.
If your product data is large, filter it to the relevant subset before sending it to the model. Do not send the full dataset on every request.
The prompt
✦
Paste into your AI coding tool
Add an adaptive UI feature to this product.
The feature should personalize the interface based on the user’s intent.
Use this formula:
User intent + product data + predefined UI rules = adaptive UI
The user expresses intent by: [Describe how the user selects or types their intent]
The product data source is: [Describe the data source]
The adaptive UI should generate: [Describe the output, for example: recommendations, dashboard, onboarding path, product suggestions, action plan, content feed, setup guide]
The AI must only use the provided data and must return structured JSON.
Do not invent products, features, links, prices, claims, or content.
Use this fixed AI prompt at runtime:
You are an adaptive UI engine inside a digital product.
Generate a personalized UI from the user’s intent, the available product data, and the allowed UI format.
Return only valid JSON.
Context: {{AUTO_CONTEXT}}
User intent: {{USER_INTENT}}
Allowed UI format: {{UI_OUTPUT_RULES}}
Rules:
- Use only the provided product data.
- Match the user’s intent to the most relevant available content.
- Follow the predefined UI format. Do not redesign the product.
- Keep the result concise, useful, and scannable.
- If product data is large, use only the relevant subset.
- If there is not enough relevant data, return a helpful fallback state.
Build the frontend so the user can enter or select intent, generate the UI, edit intent, regenerate, and reset.
Include loading, error, empty, retry, and responsive states.
Match the existing product’s design system.
What you should see
An input where the user states their intent, and a section of the page that rebuilds itself around that intent using your real content. Two different users should never get the same view.
If it goes wrong
If the tool redesigned your page or invented content, paste this:
You redesigned the page and added content that does not exist. Revert all visual changes. Re-implement the feature using only existing components, only my product data, and the JSON contract above.
3
Prompt 03
Onboarding Agent
Create a personalized path to the user’s first meaningful win.
The UX promise
Use this when new users arrive with different goals, experience levels, or setup needs, and a generic product tour is too broad.
Formula
User goal + product context + available features = personalized onboarding path
Where it helps
First login after signup and empty dashboard states
Trial activation and feature setup moments
Products with multiple user types or plans
Be careful about
Keep the path to 3 to 5 steps. No long modal tours, no blocking popups.
Save completed steps so onboarding does not repeat.
Never recommend features that do not exist.
The prompt
✦
Paste into your AI coding tool
Add an Onboarding Agent to this existing product.
Personalize onboarding based on each user’s goal, context, experience level, and current product state.
Inspect the current codebase, routes, components, user data, features, and design system first. Do not redesign the product. Do not build a chatbot. Add a lightweight layer that gets users to their first outcome faster.
Core idea:
User goal + product context + available features = personalized onboarding path
What to build:
1. Detect what the product already knows about the user.
2. If the goal is unknown, ask one question: “What are you trying to accomplish today?” Offer a few preset options plus an “Other” field. Keep it light.
3. Generate a personalized path.
4. Render it with existing UI components.
5. Track progress and suggest the next best action after each step.
Use this fixed AI prompt at runtime:
You are an onboarding agent inside a digital product.
Create a personalized path that gets the user to their first meaningful outcome as fast as possible.
Use only the provided context, features, routes, and user state.
Do not invent features, pages, integrations, pricing, claims, or actions.
Return only valid JSON.
Context: {{AUTO_CONTEXT}}
User goal: {{USER_GOAL}}
Available capabilities: {{AVAILABLE_PRODUCT_CAPABILITIES}}
Current user state: {{CURRENT_USER_STATE}}
Return this JSON:
{
“welcome_message”: “Short personalized welcome”,
“summary”: “One sentence explaining the path”,
“steps”: [
{
“title”: “Step title”,
“description”: “Short explanation”,
“why_it_matters”: “Why this helps”,
“action_label”: “Button label”,
“action_target”: “Existing route, feature, section, or action”,
“status”: “not_started | in_progress | completed”,
“priority”: “high | medium | low”
}
],
“primary_cta”: { “label”: “CTA label”, “action”: “CTA action” },
“fallback_message”: “Message if there is not enough context”
}
Rules:
- 3 to 5 steps maximum. Prioritize the fastest path to value.
- Plain language. Do not mention AI. Do not sound like documentation.
- Only recommend features that exist.
- If context is limited, build a useful default path from existing routes and features.
Preferred UI: use whatever fits the product best. A setup checklist, dashboard widget, onboarding card, guided path, empty-state guidance, or next-best-action banner. Avoid long modal tours and blocking popups.
Implementation:
- Render the response with existing components. Save completed steps.
- Let users skip, reset, edit their goal, and regenerate.
- Do not show onboarding after it is completed or dismissed. Bring it back only when useful, such as empty states, setup gaps, or repeated errors.
Frontend states: loading (“Creating your setup…”), error with retry, fallback default path, empty-state guidance, completed, responsive.
Feature-specific controls: add a character limit to the custom goal input, and rate-limit regeneration.
Acceptance criteria:
- Works inside the product without manual product descriptions.
- User can select or type a goal.
- The AI returns a path using only existing capabilities, rendered from JSON.
- User can complete, skip, reset, or regenerate. Completed steps persist.
- The design matches the existing product.
What you should see
On first login or an empty state, a short “what are you trying to do” prompt, then a 3 to 5 step checklist built for that goal, using your real routes and features.
If it goes wrong
If it built a long tour or invented steps, paste this:
This is too long and includes steps for features I do not have. Cut it to 3 to 5 steps, use only existing routes and features, and render it as a lightweight checklist, not a modal tour.
4
Prompt 04
Smart Search
Let users search by meaning, not exact keywords.
The UX promise
Use this when users need to find pages, features, products, templates, settings, docs, or actions without knowing your exact terminology.
Formula
Search query + user context + product data = intelligent results page
Where it helps
Help centers and documentation
Product navigation and settings
Catalogs, directories, and template libraries
Be careful about
Never show results the user cannot access.
Do not let the AI invent pages, links, products, or claims.
Explain why each result matches, to build trust.
Fall back to keyword search when the AI fails.
The prompt
✦
Paste into your AI coding tool
Add Smart Search to this existing product.
Let users search in natural language and get a helpful results page based on their query, user context, and your existing data. Understand what the user means, not just exact keywords.
Users should be able to search things like:
- “How do I set up my first project?”
- “Show me templates for landing pages”
- “Where do I change my billing?”
- “Find the best option for beginners”
Inspect the product and use available routes, pages, docs, CMS records, products, templates, settings, and features. Do not invent pages, features, links, prices, products, or claims.
Use this fixed AI prompt at runtime:
Understand the user’s natural language query and return a helpful results page using only the provided product data and user context.
Return only valid JSON.
Context: {{AUTO_CONTEXT}}
Search query: {{SEARCH_QUERY}}
Searchable product data: {{SEARCHABLE_DATA}}
User context: {{CURRENT_USER_CONTEXT}}
Return this JSON:
{
“interpreted_intent”: “What the user is trying to do”,
“answer”: “Short helpful answer”,
“results”: [
{
“title”: “Result title”,
“description”: “Short description”,
“type”: “page | feature | product | article | template | setting | action | other”,
“url”: “Existing route or URL”,
“reason”: “Why this matches”,
“action_label”: “CTA label”
}
],
“suggested_actions”: [ { “label”: “Suggested action”, “target”: “Existing route or action” } ],
“related_searches”: [ “Related 1”, “Related 2”, “Related 3” ],
“confidence”: “high | medium | low”
}
Rules:
- Use only existing product data. Match intent, not just keywords.
- Return at most 8 results, ranked by relevance.
- Keep the answer short. Explain why each result matches.
- If there are no exact matches, show the closest ones plus suggested refinements.
- Do not mention AI. Do not expose internal logic. Do not show results the user cannot access.
Implement the UI as a full results page with: search input, interpreted intent summary, short answer, ranked results, suggested actions, related searches, a helpful no-results state, and loading, error, retry, and fallback states.
Match the existing product design system.
What you should see
A search box that accepts messy, natural questions and returns a ranked page of real results from your product, each with a short reason it matched.
If it goes wrong
If it invented links or returned too many results, paste this:
Some of these results link to pages that do not exist, and there are too many. Return at most 8 results using only real routes from my product, and drop anything you cannot verify against my data.
Before you ship
Launch checklist
Before any of these go to production, treat the feature like a product feature, not just a prompt. The experience should be useful, controlled, measurable, and safe from abuse. This is the single home for security and cost. You can copy the following as prompts:
Rate-limit AI requests per user, session, or IP address.
Add character limits to free-text inputs and search queries.
Sanitize user input before sending it to the model.
Cache repeated outputs for the same context to reduce token usage.
Debounce hover, search, and regenerate actions.
Use fast, affordable models for structured UX responses.
Send only the data the feature needs. Filter large datasets first.
Respect user permissions before returning routes, docs, or account data.
Use structured JSON responses so the UI can validate output safely.
Always include fallback states for low-confidence or failed AI requests.
Production rule
If the feature can call an AI model, it needs rate limits, input limits, caching, fallback behavior, and permission checks before launch.
Closing
One more thing
These prompts are universal. They work on any product by leveraging your data and your UI. Go through them, understand what they do, then customize if you want.
If you find a loophole in any prompt or a case where it breaks, I want to hear it. That feedback makes the next version better.
Watch the full walkthrough
▶
Video link
Developed by Jad · AI Tooltip