Hands-On #2

Screen 1 - Splash/Welcome:
"Design a welcome screen for a micro-investing app. Background with a violet-to-blue gradient, isometric illustration of a floating digital piggy bank with coins falling in. Logo centered at the top, headline 'Invest from $10' in bold typography, an explanatory subheadline, and a 'Get started' CTA button in neon yellow. Modern fintech style."

Screen 2 - Sign Up:
"Create a sign-up screen with minimalist fields: name, email, phone. Each input with icons on the left (person, envelope, phone). Progress bar at the top showing step 1/3. Small rocket illustration in the top-right corner. Continue button disabled until the fields are completed. Terms checkbox with a highlighted link."

Screen 3 - Investor Profile Selection:
"Design a screen with 3 vertical cards: 'Conservative' (green, shield icon), 'Moderate' (orange, balanced chart icon), 'Aggressive' (red, rocket icon). Each card shows estimated annual return and risk level with bars. Headline 'What kind of investor are you?' at the top. Continue button at the bottom."

Screen 4 - First Investment:
"Create a screen with a large central slider to select the amount ($10-$1000). The amount shown in extra-large typography. Below, a visual breakdown with 3 mini-cards showing the suggested allocation: tech stocks 40%, bonds 30%, crypto 30%. Colorful donut chart. 'Invest now' button in neon yellow. Small text 'You can change this later'."

Screen 5 - Success Confirmation:
"Design a success screen with a confetti animation in the background. Giant check icon in a green circle. Headline 'Your money is already working!'. Show the invested amount large. Estimated 1-year projection below. Two buttons: 'View my portfolio' (primary) and 'Invite friends' (secondary). Illustration of plants growing at the bottom."

Screen 1 - Home Dashboard:
"Design a main dashboard with typography of at least 18px. Header with the greeting 'Hi, María' and a large profile photo. 4 large cards with generous spacing: 'Next appointment' (calendar icon), 'My medications' (pill icon), 'Medical results' (document icon), 'Call doctor' (phone icon). Each card with a large icon on the left and descriptive text. Warm beige/soft blue palette."

Screen 2 - Book Appointment:
"Create a large monthly calendar screen with extra-visible numbers. Available days in soft green, unavailable in gray. Selected date with a solid blue circle. Below, a list of available time slots in large horizontal cards: '9:00 AM', '11:00 AM', '2:00 PM'. Each slot as a button at least 60px tall. Confirm button always visible at the bottom."

Screen 3 - Specialty Selection:
"Design a vertical list with 6 medical specialties. Each item as a large horizontal card with the doctor's photo, name in large bold, specialty below, and a rating with large gold stars. Specialty icon (heart for cardiologist, etc.) on the left. Generous spacing between cards. Header 'Which specialist do you need?' in clear typography."

Screen 4 - Appointment Confirmation:
"Create a summary screen with hierarchical information. At the top: a large calendar icon. Central elevated white card showing: doctor's photo (large), name, specialty, date and time in 20px bold typography, modality 'Video call'. Large green 'Confirm appointment' button (at least 56px tall). 'Change time' link below in underlined blue."

Screen 5 - Pre-Appointment Reminder:
"Design a preparation screen with a visual checklist. Headline 'Ready for your appointment?'. A list of 4 items with large checkboxes: 'Internet connection working', 'Camera and microphone active', 'Medical documents at hand', 'In a quiet place'. Each item with a large illustrative icon. Highlighted countdown timer '15 minutes until your appointment'. Pulsing 'Join consultation' button."

Screen 1 - Avatar Selection:
"Design a playful screen with 8 animal character avatars in a 2x4 grid: panda, lion, unicorn, dragon, etc. Each avatar in a colorful square card with a soft shadow and hover animation. Headline at the top 'Choose your adventure buddy!'. Rainbow palette. Selected avatar with a bright gold border. 'Next!' button shaped like a cloud with a happy face."

Screen 2 - Levels Map:
"Create a video-game-style progress map with a winding path. 10 levels as floating islands connected by bridges. Current level lit up and animated, previous levels with a gold check, future levels with a lock. Each island themed: beach, forest, mountain. At the top: XP bar with little stars and the child's avatar. Collected coins in the top-right corner with a shiny animation."

Screen 3 - Active Lesson:
"Design an exercise screen with a large illustration at the top (e.g., a giant red apple). The English word 'APPLE' in giant playful typography. 4 translation options in colorful candy-style buttons: each button a different color (red, blue, green, yellow) with the translated word. Visual hourglass-style timer in the top right. Remaining lives as hearts in the left corner. Music note icon to hear the pronunciation."

Screen 4 - Correct Feedback:
"Create a celebration screen with animated confetti and falling stars. The avatar character jumping happily in the center. Message 'Amazing!' in large bouncing letters. Show +10 points with a rising animation. The lesson progress bar filling up. 'Next word' button shaped like a large, colorful arrow. Visual sound effects: floating musical notes."

Screen 5 - Rewards Unlocked:
"Design an achievements screen with a treasure chest opening (animation). Show 3 prizes won: 1) New clothes for the avatar, 2) 50 coins, 3) 'Fruit Champion' badge. Each prize in a separate card with a detailed illustration. Headline 'You completed the level!' with fireworks. 'Equip' and 'Continue adventure' buttons. Background with permanent confetti falling."

Screen 1 - Landing/Feed:
"Design a brutalist-style feed with an asymmetric product grid. Bold Helvetica typography in black. Product images in black and white with a single element of color (the garment). Each card with a hover overlay showing the price large and a 'CO2 saved: 2kg' label. Minimalist header with logo, search, and cart. CTA banner at the top 'Plant a tree with every purchase' in neon green. Raw aesthetic, sharp edges."

Screen 2 - Product Detail:
"Create a split-screen layout: on the left a swipeable gallery of 4 photos with a dots indicator. On the right: product name in huge bold typography, highlighted price, size selector as large outline buttons (XS-XL). Expandable 'Impact' section with a chart showing water saved, CO2 reduced, trees planted. Material composition with icons. Reviews with user photos. Sticky solid-black 'Add to cart' button."

Screen 3 - Cart:
"Design a minimalist cart with a vertical product list. Each item: thumbnail on the left, info in the center (name, size, price), quantity selector on the right (- number +), trash icon. Below: subtotal, student discount (if applicable), shipping, total in extra-large bold. Visual progress bar 'Unlock free shipping at $75'. Dual CTA: 'Continue shopping' (ghost button) and 'Checkout' (filled black). Total impact counter: '3 trees planted'."

Screen 4 - Checkout:
"Create a clean form-style payment screen. Steps at the top: Shipping (complete, green check), Payment (active), Review (gray). Stacked fields: address autocomplete, payment method with visual cards (Visa, Mastercard, PayPal). Checkbox 'Carbon neutral shipping +$2'. Order summary sticky in the right sidebar on desktop, collapsible on mobile. Discount code input. Trust badges below: secure payment, easy returns."

Screen 5 - Confirmation:
"Design a minimalist success page. Large animated check circle at the top. Order number highlighted in a mono-space font. Delivery estimate with a 4-step visual timeline: Processing, Shipped, Out for delivery, Delivered. Environmental impact card: 'Your purchase saved 5kg CO2 and planted 2 trees' with an isometric illustration of trees growing. 'Track order' CTA primary, 'Share your impact' secondary with social icons. Email sent confirmation."

Screen 1 - Explore Menu:
"Design a categories screen with a horizontal scroll of collections: 'Breakfast Bowls', 'Power Lunches', 'Protein Boxes', 'Salad Bar'. Each collection as a card with an appetizing image, name, number of options, average prep time. Filters at the top: dietary (vegan, keto, gluten-free) as selectable chips. Search bar with smart suggestions. Quick actions: 'Repeat last order', 'Chef's special today'. Clean iOS style, lots of white space."

Screen 2 - Customize Bowl:
"Create a builder screen with collapsible sections: Base (rice, quinoa, greens), Protein (chicken, tofu, salmon), Veggies (6+ options), Toppings, Dressing. Each ingredient as a horizontal card with a mini photo, name, +/- quantity, extra price if applicable. Sticky right sidebar: visual preview of the bowl being assembled, calorie counter updating in real time, macros bar (proteins/carbs/fats). Allergies warning in red if applicable. Large total price at the bottom."

Screen 3 - Delivery Time Slot:
"Design a time-slot selector with a weekly calendar view. Days as horizontal tabs, 30-min slots as a vertical grid. Color code: green (available), yellow (few slots), gray (full). Selected slot highlighted with a bold border. Info at the top: 'Your office: 123 Main St' with a link to change it. Estimate 'Ready in 25-30min'. Toggle 'Schedule for later' vs 'ASAP'. Delivery fee shown clearly. Small map preview with estimated time."

Screen 4 - Review Order:
"Create a summary screen with accordion sections: Order items (editable), Delivery details (address, time, instructions field), Payment method (saved cards with radio buttons). Expandable promo code input. Transparent subtotal breakdown: items, delivery fee, service fee, tip selector (15%, 18%, 20%, custom). Total in large bold typography. Nutritional estimate for the full order below. Large green 'Place order' CTA with a loading state."

Screen 5 - Order Tracking:
"Design real-time tracking with a large map at the top showing the restaurant, the driver (animated dot), and the destination. Vertical timeline below: Order placed (check), Preparing (in progress with spinner), Out for delivery (pending), Delivered (pending). Driver's photo and name, rating, 'Contact driver' button. Real-time ETA in large typography. Illustration of the ordered dish. Discreet 'Cancel order' button below."

Screen 1 - Search with Map:
"Design a split view: interactive map on the left with property pins, scrollable results list on the right. Filters at the top as chips: price range slider, distance to campus, roommates (0-3+), amenities (wifi, laundry, parking). Each listing card: main photo, price/month large, address, distance to the university with walk time, current roommates (small avatars), quick stats (beds, baths). Card hover expands it on the map. Toggle list/map view. Results counter '48 apartments found'."

Screen 2 - Property Detail:
"Create a screen with a full-width gallery at the top (swipeable, 8+ photos, counter '1/8'). Below: highlighted price with breakdown (rent + utilities), sticky 'Schedule tour' button. Tabs: Overview (description, amenities with icons, rules), Roommates (cards with photo, major, year, mini bio, compatibility score), Location (map with points of interest: campus, grocery, gym), Reviews (rating breakdown, comments with photos). Embedded 3D virtual tour if available."

Screen 3 - Schedule Visit:
"Design a scheduler with a dual calendar view: owner availability on the left, your calendar on the right (optional sync with Google Cal). Hourly time slots from 9am-6pm. Tour type: In-person or Virtual (video call). Input to invite a potential roommate to the visit. Questions for the landlord (textarea). Summary with: property, date/time, tour type, attendees. Confirmation via email/SMS toggle. 'Confirm tour' CTA with loading states."

Screen 4 - Roommate Match:
"Create a dating-app-style screen with cards of potential roommates. Large central card with: photo, name, age, university/major, short bio, lifestyle tags (early bird, social, quiet, clean freak), budget range, move-in date. Quiz compatibility score '85% match' highlighted. Swipe left (pass) or right (interest), or large 'Pass' / 'Connect' buttons. Mutual matches below as small avatars. Filter preferences: sleep schedule, cleanliness, socialness."

Screen 5 - Property Application:
"Design a multi-step form with a progress bar: Personal info (step 1/4), Student verification (step 2/4), Financial (step 3/4), References (step 4/4). Upload documents: ID, enrollment proof, income/guarantor info. Auto-save progress. Right sidebar with a summary of the property being applied to. Application fee $50 clearly shown. Background check consent checkbox. Estimate 'Hear back in 24-48hrs'. 'Submit application' CTA with security badges."

Screen 1 - Onboarding Goals:
"Design a goal selection screen with 6 illustrated cards: 'Lose weight', 'Tone up', 'Build strength', 'Flexibility', 'Stress relief', 'Postpartum recovery'. Each card with an empowering female illustration, bold title, short description. Multi-select allowed. Motivational pink/orange gradient background. Progress dots below '1 of 4'. Headline 'What do you want to achieve?'. Illustration of a woman meditating in the corner. Large 'Continue' button."

Screen 2 - Fitness Level Assessment:
"Create an interactive quiz with a large question: 'How long has it been since you exercised?'. 4 options as large buttons with emojis: '< 1 month 💪', '1-6 months 🤔', '6-12 months 😅', '1+ year 😬'. Next question on selection. Animated progress bar at the top. Background with a subtle dumbbell pattern. Illustration of a woman drinking water. Motivational tone, never judgmental. Smooth transitions between questions."

Screen 3 - Live Workout:
"Design a workout screen with the instructor's video taking up the top 60%. Transparent overlay below with: large circular countdown timer, current exercise in bold, next exercise in a small preview. Animated central rep counter (10... 9... 8...). Buttons: pause (large), skip exercise, adjust intensity. Music toggle. Progress bar of the full workout. Motivational quotes appearing every 30 secs. Heart rate zone if a wearable is connected."

Screen 4 - Workout Completed:
"Create a celebration screen with subtle confetti. Headline 'Workout completed! 🎉'. Highlighted stats in cards: duration, calories burned (with flame icon), personal record if applicable. Heart rate intensity chart during the workout. Selfie prompt 'Capture your post-workout glow' with camera. Workout difficulty rating (1-5 stars). Share to social with pre-designed templates. Dual CTA: 'Cool down stretch' and 'Back to home'."

Screen 5 - Weekly Progress:
"Design a progress dashboard with a calendar heat map showing completed workouts (color gradient by intensity). At the top: current streak '7 days 🔥', total workouts this month, total time. Charts: weight trend (optional), measurement changes, strength progression on key exercises. Before/after photo comparison with a slider. Next milestone with a progress bar. Personalized motivational quote. 'Schedule next week' button. Community feed with other users' achievements for motivation."

Screen 1 - Main Dashboard:
"Design a simple dashboard with 4 large cards: 'My plots' (list of plots with health status), 'Weather today' (temperature, rain, humidity with large icons), 'Alerts' (important notifications with a red badge), 'Recommendations' (suggested tasks today). Universal iconography that doesn't depend on text. Dominant green for good health, yellow for warning, red for critical. Header with the farmer's name and photo. Clear offline mode indicator."

Screen 2 - Plot Detail:
"Create a specific-crop screen with an aerial photo of the plot at the top (if available) or a large crop icon. Key info in cards: soil moisture (visual gauge like a filling tank), last rainfall, days since planting (visual counter), detected pests (list with icons and severity). Simple temperature chart for the last week. Large 'Water now' or 'Schedule irrigation' button. Growth status with illustrations of plants in stages."

Screen 3 - Weekly Forecast:
"Design a horizontal 7-day calendar with each day as a card: date, large weather icon (sun, clouds, rain), max/min temp, rain probability in %, recommendation ('Good day to fertilize'). Today highlighted with a border. Important alerts at the top with a warning icon: 'Frost expected tomorrow - protect crops'. Simple illustrations that don't require high literacy. Direct action buttons: 'See tips', 'Set up alert'."

Screen 4 - Irrigation Recommendations:
"Create a screen with a simple visual calculator: illustration of a plant with water drops. Large input for the plot's hectares, crop type (dropdown with icons), current moisture (visual slider). Result in a highlighted card: 'Water X liters' in a large number, 'Estimated time: Y hours', 'Best time: tomorrow 6am-8am'. Reason explained in simple text. 'Schedule reminder' button. Water-saving tips below with icons."

Screen 5 - Activity Log:
"Design a simple logging form: 'What did you do today?'. Large buttons with icons: Water, Fertilize, Spray, Harvest, Other. Visual plot selector (crop photos or icons). Amount used (large numeric input). Date/time with a visual calendar. Option to take a photo as evidence. Activity history below as a simple timeline. Auto-save with an indicator. Works offline, syncs when there's signal."

Screen 1 - Full Plane View:
"Design a visual representation of the plane from above. Clearly numbered rows, seats as squares with color coding: green (available), blue (your selection), gray (occupied), gold (premium available). Color legend at the top. Zoom controls for mobile. Flight info in the header: origin-destination, duration, date. Quick filters: 'Window only', 'Aisle only', 'Together' if multiple passengers. Base price 'Included' vs extras shown inline."

Screen 2 - Seat Detail:
"Create a modal/drawer with info about the selected seat: large number (12A), type (Window), section (Economy), pitch/recline specs with visual icons. Pros/cons: '✓ Extra legroom', '✗ Near bathroom'. User review rating and comments ('Quiet section', 'Good for sleeping'). Extra price if applicable, shown large (+$15). Photos of the actual seat if available. Nearby amenities (outlet, wifi). Compare with adjacent seats. Dual CTA: 'Select' or 'Choose different'."

Screen 3 - Upgrade Offers:
"Design an upsell screen with 3 comparative tiers: 'Current (Economy)', 'Comfort+' (+$45), 'Premium' (+$120). Each tier as a column with: seat visual (photo), benefits in a checklist, price delta. Highlight differences: visual legroom measurement, priority boarding, free drinks, checked bag. 'Most popular' badge on the middle tier. Toggle to view 'Per person' vs 'Total'. Subtle countdown timer 'Upgrade price valid for 10 min'. Clear skip option."

Screen 4 - Multiple Passengers:
"Create an interface to assign seats to multiple travelers. Passenger list on the left: 'John Doe (Adult)', 'Jane Doe (Child 8yo)'. Plane map on the right with already-selected seats numbered and visually connected. 'Auto-assign together' button that finds the best contiguous seats. Individual override allowed. Priority shown: children near parents, individual preferences remembered. Total cost updating in real-time below."

Screen 5 - Selection Confirmation:
"Design a final summary with a boarding passes preview. Each passenger as a card: name, assigned seat visual (12A, window icon), gate info placeholder. Mini plane map showing your highlighted seats. Changes allowed with the penalty shown. Added extras listed: seat selection fee, any upgrades. Add to calendar button. Download/email boarding pass. Reminder setup 'Notify me 24hrs before'. Large 'Confirm & continue to payment' CTA. Secure lock icon."

Screen 1 - Profile Showcase:
"Design a maximalist Bento-grid-style profile: header with an animated cover video/gif, large avatar with a customizable color border. Asymmetric portfolio grid: featured videos, image carousels, testimonials, case studies. Highlighted stats in floating cards: 1.2M followers, 4.5M engagement, $250 avg collab rate. Expandable bio with niche tags (#TechReview #Unboxing). Social links as large icons. Booking calendar integration teaser. Prominent verified badge. The creator's custom color theme."

Screen 2 - Analytics Dashboard:
"Create a stats dashboard with multiple widgets: follower growth chart (last 30 days), engagement rate by platform (IG, TikTok, YouTube as tabs), top performing posts in a grid with metrics overlay, demographic breakdown (age, location with a small map), best time to post heatmap. Revenue tracking this month. Collaboration requests counter with a badge. Export report button. Comparison with the previous period (+12% growth visual). Filters by date range."

Screen 3 - Collaboration Marketplace:
"Design a feed of collab opportunities with a filter sidebar: industry, budget range, content type (video, photo, story). Each opportunity as a card: brand logo, short brief, deliverables, compensation, deadline, current applicants. Quick apply button. 'Match score' based on your profile (85%). Status tags: Open, Applied, Under Review, Accepted. Sort by: newest, best pay, best match. Featured collabs at the top with a spotlight. Saved/bookmarked section."

Screen 4 - Content Calendar:
"Create a visual monthly calendar with color-coding by platform and content type. Each day with mini-cards of scheduled posts: thumbnail, platform icon, publish time, status (draft, scheduled, published). Drag-and-drop to reschedule. Multi-view: month, week, day. Quick add from any date. Template library sidebar. Bulk schedule option. Collaboration deadlines marked with a flag icon. Analytics preview on hover. Export the calendar as an image for the client."

Screen 5 - Collaboration Chat:
"Design a messenger for negotiations with brands. Conversation list on the left: brand logo, name, last message, unread badge. Chat on the right: messages with timestamps, file sharing (contracts, briefs), media preview. Quick actions: 'Send rate card', 'Share portfolio', 'Propose date'. Pre-built contract templates to send. Video call button. Payment request integration. Mark as paid/completed. Archive completed deals. Starred messages. Search conversations. Notification preferences per chat."

Screen 1 - Report Start:
"Design a reassuring screen with an isometric illustration of two cars gently colliding (not dramatic). A calming headline 'We're here to help'. Two large options as cards: 'Minor accident' (scratches, dents) and 'Major accident' (car not working, ambulance needed). Each card with a description and an estimated process timeline. Dominant reassuring blue. Small red emergency button at the top 'Do you need an ambulance?'. Progress saved automatically."

Screen 2 - Location and Photos:
"Create a screen with a large map showing the current location (GPS auto-detected) with a draggable pin to adjust. 'Use current location' vs 'Enter address manually' button. Below: photo upload with an illustrated visual guide (4 angles of the damage, license plates, the other vehicle if applicable). Native camera interface with an overlay guide showing how to frame the shot. Preview thumbnails with the option to retake. Counter '3/6 photos'. Tips: 'Include context references'."

Screen 3 - Incident Details:
"Design a conversational form with one question per screen, smooth transitions. Q1: 'When did it happen?' (large date/time picker). Q2: 'Were you driving?' (Yes/No buttons). Q3: 'Was anyone injured?' (radio buttons with illustrations). Q4: 'Other vehicles involved?' with the option to add third-party info. Q5: 'Reported to police?' with report upload if yes. Animated progress bar at the top. Back button allowed. Constant auto-save."

Screen 4 - Chat with Adjuster:
"Create a live chat interface with the photo and name of the assigned adjuster. Messages with timestamps. The adjuster sends: 'I reviewed your case, I just need to confirm...'. Quick reply options as selectable chips in addition to a free input. Status at the top: 'Estimated response: 2hrs'. File sharing for additional docs. Video call option if the adjuster requests it. Automatic translation if needed. Notification when the adjuster is typing. Chat history saved."

Screen 5 - Status and Timeline:
"Design case tracking with a vertical timeline: Report received (green check), Review in progress (active with spinner), Approval (pending), Payment authorized (pending). Each step with an estimated date. Highlighted card at the top: 'Repair estimate: $1,200-$1,500', 'Recommended shop' with map/address, 'Deductible: $500'. Option to choose an alternative shop. Status notifications toggle. Generated documents (claim number, authorization) downloadable. 'Contact adjuster' CTA always visible."

Screen 1 - Pet Profile:
"Design an adorable profile with a giant circular photo of the pet in the center (custom upload or choose from illustrations). Name in playful typography at the top. Basic info in cute cards: species (dog/cat icon), breed, age (with a birthday cake icon), current weight (with an up/down trend arrow). Health summary card: vaccines up to date (green check), next appointment, chronic conditions if applicable. Background with a subtle paws pattern. Color scheme based on the type of pet (orange/cats, blue/dogs)."

Screen 2 - Vaccine Timeline:
"Create a medical history view as a vertical timeline with important milestones. Each vaccine as a card: vaccine name, date administered (with a green check if completed), next booster with a countdown ('In 45 days'), the vet who administered it. Pending cards with a subtle yellow alert. Filters: 'All', 'Vaccines', 'Deworming', 'Checkups'. Large floating add-event button (+). Export the full history as PDF. Configurable automatic reminders. Illustrations of syringes and doctors that are friendly, never scary."

Screen 3 - Medication Reminders:
"Design a meds management screen with a list of active medications. Each med as an expandable card: name, dose, frequency, time(s) of day with icons (morning sun, night moon). Toggle to mark a dose as given with a confetti micro-animation. Push notifications preview. Small monthly calendar showing treatment days. Stock counter '12 pills left, reorder in 4 days'. Link to pharmacy/purchase. Special instructions (with food, etc.). Photo upload of the medication for easy identification."

Screen 4 - Book Vet Appointment:
"Create a scheduler with a list of nearby vet clinics (map view toggle). Each clinic with: star rating, distance, photo, specialties, next availability ('Today 4pm'). Filters: 24/7 emergencies, specialties, price range. Select a clinic → calendar with slots. Visit type: checkup, vaccine, emergency, grooming. Add notes/symptoms. Photo upload if there's a visible wound/problem. Reminder preferences. Add to calendar with the address. Virtual consultation option if available."

Screen 5 - Personalized Tips:
"Design a curated tips feed based on the pet's profile: age, breed, conditions. Content cards: 'Exercise for [breed]' with video, 'Senior diet' article, 'Dental care' checklist. Each tip with a custom illustration, source (verified vet badge), save/bookmark. Categories: nutrition, exercise, behavior, health. Integrated quiz 'Test your pet knowledge'. Community tips from other owners with the same breed. Seasonal reminders (heat, cold). Product recommendations with affiliates. Vet AMA section."