Developed by Jad · AI Tooltip
How to use this guide
Run the prompts in order. Each stage hands the next one what it needs: brief, UI design direction, UX plan, then the build.
Use an AI coding tool that can create files and run your project locally, like Claude Code, Codex, or Cursor. Start in a new, empty project folder.
These are stages, not one-shot commands. Expect a few back-and-forth messages inside each stage before you move on.
Your job is to make the decisions and review what the AI produces. Let it handle the framework, code structure, and technical details.
Replace anything in [brackets] with your own details, and feel free to adjust the wording to fit your idea.
The whole workflow in five words: Define → Explore → Plan → Build → Test.
Prompt 1
Requirements
The goal
Turn a vague idea into a clear product brief. Instead of asking the AI to build right away, let it interview you about who the app is for, what they need, and which features actually matter.
What you get
From an idea to a clear product brief, saved in your project as PRODUCT_BRIEF.md.
Prompt
✦
Paste into your AI coding tool
Act as my product strategist and UX designer.
Here’s my app idea:
[PASTE APP IDEA]
Interview me to understand the users, their needs, and what the app should do.
Help me refine the idea into a simple, realistic MVP.
Ask questions in small batches and wait for my answers.
Once we’re done, create a PRODUCT_BRIEF.md file with the requirements.
Do not design or build anything yet.
What to do next
Answer the questions naturally. You don’t need perfect answers. When the brief is ready, read it and check that the essential features are the ones you actually care about.
Watch out for
If the AI starts designing screens or writing code, stop it. This stage is only about deciding what to build and who it’s for.
Prompt 2
Discovery
The goal
See a few genuinely different ways your app could look and feel before you commit to one. Accepting the first design the AI generates is one of the most common mistakes.
What you get
From no visual identity to a chosen design direction, saved as DESIGN_DIRECTION.md.
Prompt
✦
Paste into your AI coding tool
Using the product brief, explore 3 distinctly different creative UI/UX directions for the app.
Build a mobile-first homepage for each direction and present all 3 in one interactive interface where I can switch between them.
Make the differences meaningful, not just different colors.
Don’t build the full app yet.
Let me choose a direction, then save it in DESIGN_DIRECTION.md.
What to do next
Switch between the three options and compare the layout, navigation, how content is presented, and the overall personality. Pick one and tell the AI why in a sentence, for example: “I’m going with option B because it feels more engaging and presents the main content more clearly.”
Watch out for
If the options only differ by color, ask again. You want real contrast, like clean and minimal versus bold and playful versus dark and premium.
Prompt 3
User journey
The goal
Work out how the app actually works: what happens when someone opens it for the first time, how they complete the main task, and which screens you need to get them there.
What you get
From a single homepage to a complete experience plan, saved as UX_PLAN.md.
Prompt
✦
Paste into your AI coding tool
Using the product brief and selected design direction, plan the complete user experience for the MVP.
Define the main user journey, necessary screens, navigation, and key interactions.
Keep everything intuitive and as simple as possible. Identify and remove unnecessary complexity.
Present a clear user flow and screen-by-screen plan for my review, and save it in UX_PLAN.md.
Do not build the app yet.
What to do next
Walk through the flow from opening the app to finishing the main task, and correct anything that feels off. If the plan changes the homepage structure, that’s fine. The AI will adjust it during the build.
Watch out for
A beautiful design is useless if people can’t figure out how to use it. If the flow has more screens or steps than your MVP needs, ask the AI to cut it down.
Prompt 4
Build
The goal
Turn the brief, design direction, and UX plan into a working, mobile-first app. The AI already knows what to build, how it should look, and how it should work, so this prompt can stay short.
What you get
From plans and concepts to a functional app running on your computer.
Prompt
✦
Paste into your AI coding tool
Now build the complete functional MVP based on our product brief, design direction, and UX plan.
Implement all the screens, navigation, and core features. Make sure the interactions actually work, not just look functional.
Use a simple local setup without unnecessary services or complexity. Make the app responsive and mobile-friendly.
Test the implementation, fix any errors, and launch it locally so I can try it.
What to do next
Open the app in your browser and complete one full task from start to finish. Check that the buttons, navigation, and features actually do something, not just look right.
Watch out for
You don’t need to pick a framework or explain how each button works. Focus on the product and the experience. If something breaks, describe what you did and what happened, and let the AI fix it.
Prompt 5
Test
The goal
See how the app actually feels in your hand. Open it on your phone by scanning a QR code, without publishing anything online, then find and fix the issues you notice.
What you get
From an app that looks finished to an app you’ve actually used and improved.
Prompt
✦
Paste into your AI coding tool
I want to test this app on my physical phone.
Make the app accessible over my local Wi-Fi network and generate a scannable QR code that opens it directly on my phone. Use the correct local network address, not localhost.
Keep the server running and don’t publish the app online.
Give me a short mobile UX testing checklist. I’ll test the app and report any issues for you to fix.
Before you scan
Your phone and computer need to be on the same Wi-Fi network, the computer has to stay on, and the local server has to keep running. Firewalls and isolated guest networks can block the connection.
Quick mobile UX checklist
Can I immediately understand what this app does?
Is navigation clear and easy to use?
Can I complete the main task without confusion?
Are text, buttons, and touch targets comfortable?
Do I get clear feedback when I complete an action?
Fix what you find
✦
Paste into your AI coding tool after testing
I tested the app on my phone. [Describe the issue, e.g. the bottom navigation feels too small and the main button is hard to reach with one hand.]
Improve this without changing the overall design, and check that everything still works.
Watch out for
Describe what you experienced, not how to fix it. “The main button is hard to reach with one hand” gives the AI more to work with than “move the button.”
design review
This workflow gets you a working MVP fast. If you want it to look and feel truly professional, submit your project and Jad will review your UI and UX and help you upgrade it.
Submit your design
Code review
AI generated code can look fine and still hide security holes or performance problems. Taz is a software engineer who will review your code for any problems, so you know it is production ready before you launch.
Submit your code