AI-Powered Prototyping: Building an Onboarding Flow with Cursor by Ivana Milicic
0 likes174 views
Modern AI tools are revolutionizing the UX design process, powering designers to create prototypes and iterate quickly based on user testing insights. In this hands-on workshop, participants will learn how to leverage AI to build and refine an onboarding flow - a critical component that shapes users' first impressions of a product. The workshop begins with hands-on experience in AI-powered prototyping, where participants will use tools like Cursor to generate and modify UI components rapidly. Attendees will learn how to leverage AI assistance for code generation, implement interactive elements, and create responsive behaviors while maintaining control over the design process. In the second part of the session, participants will explore how AI can accelerate the testing and iteration phase. Using AI tools for quick user feedback analysis, attendees will learn to identify usability issues, gather insights, and rapidly implement improvements to their prototypes. This practical experience will demonstrate how AI can compress the design-test-iterate cycle while maintaining the quality of the final product.
AI-Powered Prototyping: Building an Onboarding Flow with Cursor by Ivana Milicic
- 1. AI-Powered Prototyping Building an Onboarding Flow with Cursor UXPA Boston 23rd User Experience Conference May 9, 2025
- 2. Ivana Milicic Digital Product Designer
- 3. Objectives Build a functional onboarding flow prototype using AI assistance (Cursor) Experience quick iterations Develop strategies for integrating AI tools into your design workflow
- 4. Design + AI
- 5. Prototyping
- 6. Accelerated prototyping AI tools help designers create and modify prototypes in real-time, enabling more iterations within project constraints Reduced development time AI assistance compresses the design-test-iterate cycle while maintaining quality of the final product
- 7. Bridged design- development gap Designers can create high-fidelity, interactive prototypes without extensive coding knowledge Enhanced testing efficiency AI tools can quickly analyze user interactions and feedback, leading to faster, more informed design decisions
- 8. Streamlined workflow AI can generate code, suggest solutions, and accelerate development processes while designers maintain creative control Improveduser feedbackanalysis AI can help identify usability issues and gather insights from testing more efficiently
- 9. Expanded designer capabilities Designers become more self-sufficient in creating functional prototypes with interactive elements
- 10. AI BUILDERS https://lovable.dev/ https://v0.dev/ https://replit.com/ https://bolt.new/ https://windsurf.com/ https://www.cursor.com/
- 11. Intro to Cursor AI-powered code editor Writes, edits, and debugs code faster by leveraging natural language prompts, intelligent code suggestions, and a deep understanding of entire codebases. https://cursor.com/
- 12. Best Practices Use Cursor rules Write clear, detailed, and direct prompts Reference relevant files and documentation Keep prompts and context focused Keep conversations short and iterative
- 14. What are we building Boost is an intelligent, personalized fitness companion app that propels users' unique wellness journey forward. The app creates personalized workout plans based on fitness goal experience leve personal preference schedule availability Boost learns from users' progress, adjusts recommendations accordingly, and keeps them accountable with smart notifications and milestone celebrations tailored to their fitness path. https://uxpa-boston.netlify.app/ Onboarding flow
- 15. What are we building Establish the user's primary fitness goals (weight management, strength building, endurance Assess current fitness levels and any physical limitation Determine schedule availability and preferred workout time Capture equipment access and exercise preference Set accountability preferences (reminders, social sharing, challenges Onboarding requirements https://uxpa-boston.netlify.app/
- 16. What are we building 1. Welcome Clean, modern fitness branding with log Brief introduction to the fitness journey concep Two prominent buttons: "Start Journey" and "Log In" Progress indicator showing 8 total steps 2. Goal Selection Four visual selection cards for: Weight Loss, Muscle Building, Endurance, Wellness Each card should have an icon, title, and brief description Visual feedback when a card is selected Continue/Back navigation button Updated progress indicator 3. Physical Profile Form with height and weight inputs (with unit toggle Age input with appropriate validatio Activity level slider (Sedentary to Very Active Optional health conditions checklis Continue/Back navigation button Updated progress indicator 4. Schedule Preference Interactive week calendar for selecting workout days Time preference selector (Morning, Afternoon, Evening Workout duration slider (15-90 minutes Continue/Back navigation butto Updated progress indicator https://uxpa-boston.netlify.app/
- 17. What are we building 5. Equipment Access Visual selection of available equipment (Home basics, Full gym, No equipment) Checklist of specific equipment items based on initial selectio Continue/Back navigation button Updated progress indicator 6. Nutrition Setup Toggle for meal tracking option Nutrition goal selection (if tracking enabled Calorie target input with auto-suggestion based on goal Water intake goal slider Continue/Back navigation button Updated progress indicator 7. Summary Clean visualization of all selected preference Dynamic weekly calendar showing generated workout schedul Continue/Back navigation button Updated progress indicator 8. Completion Virtual coach selection optio Accountability preferences (notifications, sharing options Personalized motivational message based on goal Prominent "Start Your Journey" CTA butto Completed progress indicator https://uxpa-boston.netlify.app/
- 18. Let’s build Create project folder Set Cursor rules Rules thanks to 0xdesigner Start with the initial prompt Prompt Proceed with building step by step Keep reviewing and iterating
- 19. Let’s build Use screenshots for referencing and debugging Use MCPs to connect to other tools Figma MCP https://www.framelink.ai Use speech-to-text to speed up your process https://wisprflow.ai You can also use other tools to start quickly then open and keep iterating in Cursor
- 20. Version control Install Git https://git-scm.com/downloads Initialize Git repository for your project Open your terminal or command prompt Navigate to your project directory Initialize the Git repositor Add your project files to Git’s staging are Commit the files. cd path/to/your/project git init git add . git commit -m "Initial commit"
- 21. Version control Go to GitHub and sign in to your account / create an account Click on the "+" icon in the top-right corner and select "New repository" Name your repository (e.g., "Boost-Fitness-App") Add an optional description Choose repository visibility (public or private)
- 22. testing Deploy your prototype (website / app) GitHub pages https://pages.github.com/ Netlify https://app.netlify.com/ Vercel https://app.netlify.com/