17 KiB
17 KiB
Tripz Stitch Prompts
Ready-to-use prompts for Google Stitch. Copy and paste these to generate each screen.
RIDER APP
1. Splash Screen
Design a minimal splash screen for a ride-hailing app called "Tripz". Centered logo (stylized "T" icon in blue #1A73E8) on solid white background. Subtle fade-in scale animation on the logo. Clean, modern, minimal. No text except the logo. Mobile app format (390x844).
2. Onboarding Slide 1
Design an onboarding screen for a ride-hailing mobile app. Title: "Request with one tap". Simple vector illustration of a hand tapping a phone screen with a car icon. Below: subtitle text "Enter your destination and get matched instantly". Page indicator (1 of 3), "Skip" button top-right, "Next" button at bottom (52px height, blue #1A73E8 filled, white text, 12px radius). Clean white background, modern minimal design. RTL Arabic layout. Mobile format.
3. Onboarding Slide 2
Design an onboarding screen for a ride-hailing mobile app. Title: "Track your ride live". Simple vector illustration of a phone showing a map with a moving car pin. Below: subtitle "Watch your driver approach in real-time". Page indicator (2 of 3), "Skip" button top-right, "Next" button at bottom. Clean white background. RTL Arabic layout. Mobile format.
4. Onboarding Slide 3
Design an onboarding screen for a ride-hailing mobile app. Title: "Pay your way". Simple vector illustration showing cash, card, and wallet payment icons. Below: subtitle "Choose cash, card, or wallet". Page indicator (3 of 3), "Skip" button top-right, "Get Started" button at bottom. Clean white background. RTL Arabic layout. Mobile format.
5. Phone Login
Design a phone number input screen for a ride-hailing app. Large friendly title "Welcome to Tripz" at top. Subtitle "Enter your phone number to get started". A phone input field (52px height, 8px radius, light gray border) with a country code dropdown showing Jordan flag +962. Below the field: a prominent blue filled button "Send Code" (52px height, 12px radius, white text). Clean white background, minimal design. RTL Arabic layout. Mobile format.
6. OTP Verification
Design an OTP verification screen for a ride-hailing app. Title "Verify your number". Subtitle showing the phone number "+962 7XX XXX XXXX" with an "Edit" link. Four large separate digit input boxes (56x56px each, 8px radius, 16px gap), centered. Below: "Resend code in 0:45" countdown text. Clean white background. When all digits filled, auto-submit indication. RTL Arabic layout. Mobile format.
7. Name Entry
Design a simple name entry screen for a ride-hailing app. Large title "What's your name?". Subtitle "Help us personalize your experience". Single text input field (52px height, 8px radius). Below: "Continue" blue filled button (52px height). Clean white background, centered layout. RTL Arabic layout. Mobile format.
8. Home Screen
Design a ride-hailing app home screen. Full-screen map background (edge to edge, no top bar). On the map: a pulsing blue location dot in the center. Floating re-center button (bottom-right, 48px circle, white background, shadow). A collapsed bottom sheet at the bottom third with: a search field saying "Where to?" (52px height, 12px radius, search icon on start side), below it: two pinned favorite places (Home with house icon, Work with briefcase icon) as list items. Top-left: hamburger menu icon (32px). Clean modern design. RTL layout.
9. Destination Selection
Design a destination selection screen for a ride-hailing app. Draggable bottom sheet over a map. The sheet has 3 snap states - show the medium state. Top of sheet: origin field (auto-filled with current location) connected to destination field by a vertical colored line with dots. Below: "Add stop" button with plus icon. Search field with autocomplete results showing place names and addresses. Below results: "Pick from map" option with map pin icon. Saved places section: Home and Work. Clean white background, modern design. RTL layout. Mobile format.
10. Route Preview
Design a route preview screen for a ride-hailing app. Map showing a blue polyline route from origin (blue dot) to destination (red pin), with numbered stop markers along the way. Bottom sheet showing: distance "3.2 km" and time "8 min" at top, then horizontal scrollable ride category cards (Economy, Comfort, XL) each showing vehicle icon, capacity, ETA, and price. At bottom: "Choose Ride" blue filled button. Clean modern design. RTL layout.
11. Category & Price Selection
Design a ride category selection screen for a ride-hailing app. Top section: route summary (from → to, distance, time). Below: horizontal scrollable cards for vehicle categories - Economy (4 seats, small car icon, $5.00), Comfort (4 seats, larger car icon, $7.50), XL (6 seats, SUV icon, $12.00). Selected card has blue border. Below cards: payment method toggle (Cash / Wallet), optional coupon code input field, "Schedule for later" option with calendar icon. Bottom: "Confirm Ride" blue filled button (52px). Clean white background. RTL layout.
12. Searching for Driver
Design a "searching for driver" screen for a ride-hailing app. Full-screen map with a pulsing blue circle animation at the pickup location. Below the map: bottom sheet with "Looking for your driver..." text and a subtle loading animation. "Cancel" text button below. Minimal, calm waiting state. Clean design. RTL layout.
13. Driver Accepted
Design a "driver accepted" screen for a ride-hailing app. Map showing: route to pickup location in blue, driver car icon moving along the route. Bottom sheet with driver card: circular driver photo (56px), driver name "Ahmad K.", 4.8 star rating with star icon, vehicle info "White Toyota Camry" with license plate "1234" prominently displayed in a bordered box. Live ETA "Arriving in 3 min" with countdown. Below: two action buttons - Call (phone icon, outlined) and Chat (chat icon, outlined). Clean modern design. RTL layout.
14. During Trip (Live Tracking)
Design a live trip tracking screen for a ride-hailing app. Full-screen map with: blue polyline route to destination, driver car icon moving along route with smooth animation, destination pin marker. Floating re-center button. Bottom sheet (collapsed): trip status "On the way to destination", ETA, driver name and photo, "Share trip" option. Clean modern design. RTL layout.
15. Trip Invoice
Design a trip invoice/receipt screen for a ride-hailing app. Clean white background. At top: "Trip Complete" with checkmark icon. Route map thumbnail showing the path. Fare breakdown in a clean list: Base fare $3.00, Distance (3.2 km) $2.00, Time (8 min) $0.50, Extra wait $0.00, Discount -$1.00, Total $4.50 (bold, large). Payment method: Cash. Below: "Pay Driver" or "Paid" status indicator. Bottom: "Rate your ride" blue button. Tabular/monospace digits for prices. Clean receipt-style design. RTL layout.
16. Rating Screen
Design a post-trip rating screen for a ride-hailing app. At top: driver photo (72px, circular) and name "Ahmad K." Below: 5 large star icons in a row (currently unselected, gray outline). Below stars: quick reason chips/tags - "Clean car", "Great driving", "Friendly", "On time", "Good music" (selectable, outlined). Below chips: optional text area "Add a comment..." Bottom: "Submit" blue filled button (52px). Warm, encouraging design. RTL layout.
17. Navigation Drawer
Design a navigation drawer (side menu) for a ride-hailing rider app. Top section: user profile with circular avatar (64px), user name "Mohammed Ali", phone number below. Menu items list with icons: My Trips (clock icon), Wallet (wallet icon), Coupons & Invites (gift icon), Settings (gear icon), Support (help icon). Each item is a row with icon + label. Clean white background, subtle divider between items. RTL layout (menu slides from right side).
18. Chat Screen
Design an in-trip chat screen for a ride-hailing app. AppBar with back arrow, driver name "Ahmad K." and "Online" status. Message list: sent messages in blue bubbles (right side in RTL), received messages in gray bubbles (left side). Timestamps between messages. Bottom: text input field with send button (blue circle with arrow icon). Clean messaging UI. RTL layout.
19. Trip History
Design a trip history list screen for a ride-hailing app. AppBar title "My Trips". List of past trip cards, each showing: route thumbnail map (small), from → to addresses, date and time, fare amount, status badge (Completed in green, Cancelled in red). Scrollable list. Empty state: illustration with "No trips yet" text. Clean white background. RTL layout.
DRIVER APP
1. Driver Splash
Design a splash screen for a driver-side ride-hailing app. Same style as rider splash but with slightly different styling to differentiate. Centered logo, clean background.
2. Driver OTP Login
Design a phone number login screen for a ride-hailing driver app. Title "Driver Login". Same OTP flow as rider but with professional driver-oriented styling. Blue theme. Mobile format.
3. Document Registration
Design a driver document registration screen for a ride-hailing app. Title "Complete your registration". Sections: Vehicle Photos (grid of upload areas for front, back, side views with camera icons), Personal Photo (circular capture area), Face Liveness Video (record button with instructions). Each section has a status indicator (pending/uploaded/verified). Bottom: "Submit for Review" button. Clean form design. RTL layout.
4. Driver Home
Design a driver home screen for a ride-hailing app. Full-screen map background. Top: prominent online/offline toggle switch (green when online, gray when offline) with status text. Map with location dot. Floating: balance card showing today's earnings "$45.20" (small card, top-right). Bottom: "No active trip" status or trip info card. Menu icon top-left. Clean, functional design. RTL layout.
5. Ride Offer Overlay
Design a ride offer overlay card for a driver app. Card floating over the map with: pickup distance "2.1 km away", destination "Downtown - King Hussein St", estimated fare "$8.50", ride time "12 min". Large green "Accept" button and red "Decline" button. Countdown timer ring (15 seconds) at top. Urgent but clear design. RTL layout.
6. Navigate to Pickup
Design a navigation screen for driver going to pickup. Map with route to pickup. Top: pickup address and distance. Bottom sheet: rider name "Sara M.", call button, chat button, "Arrived" blue button. Clean navigation UI. RTL layout.
7. Arrived at Pickup
Design a "driver arrived" waiting screen. Map showing driver at pickup location. Bottom sheet: "Waiting for Sara" with 5-minute free waiting timer (countdown), rider contact options. Timer changes color when approaching limit. Clean design. RTL layout.
8. Driver During Trip
Design a driver active trip navigation screen. Map with route to destination. Bottom: destination info, "End Trip" red button, fare estimate. Clean functional design. RTL layout.
9. Trip Complete (Driver)
Design a trip completion screen for driver. "Trip Complete" header. Fare earned: "$8.50" (large, bold). Route summary thumbnail. "Rate rider" option. "Done" button. Clean celebratory design. RTL layout.
10. Earnings Dashboard
Design a driver earnings dashboard screen. Title "Earnings". Today's earnings card (large number), weekly summary card with bar chart, trip count today. Below: recent trips list with earnings per trip. Clean data visualization. Dark or light theme. RTL layout.
11. Balance & Top-up
Design a driver wallet/balance screen. Current balance displayed prominently. Top-up options (buttons with amounts: $10, $20, $50, custom). Transaction history list. Warning banner when balance is negative (red background, freeze message). Clean financial UI. RTL layout.
12. Driver Drawer
Design a driver navigation drawer. Profile section at top (photo, name, rating). Menu: Earnings, Balance, My Vehicle, Documents, Settings, Support, Logout. Clean list with icons. RTL layout.
WEB DASHBOARDS
1. SuperAdmin Dashboard Overview
Design a SaaS admin dashboard overview page. Dark sidebar (240px, #1A1A2E) with navigation items. Top bar with search, notifications bell, user profile. Main content: 4 KPI cards in a row (Total Tenants: 12, Active Rides: 1,234, Revenue: $45,678, Active Drivers: 89). Below: two charts - line chart (revenue over time) and donut chart (rides by category). Recent activity feed below. Clean modern SaaS design. Dark sidebar, light content area (#F5F5F5 background, white cards).
2. SuperAdmin Tenant List
Design a tenant management table page. Dark sidebar. Top bar. Main content: search bar + "Add Tenant" button. Table with columns: Logo, Name, Country, Package, Status (active/inactive badge), Drivers, Rides, Revenue, Actions (edit/disable icons). Alternating row colors. Pagination. Clean data table design.
3. SuperAdmin Create Tenant
Design a tenant creation form. Dark sidebar. Two-column form layout: Left column - Name input, Logo upload area, Country dropdown, City input. Right column - Package selection (cards: Starter/Pro/Enterprise), Payment methods checkboxes, Feature toggles switches. Bottom: "Create Tenant" blue button, "Cancel" text button. Clean form design.
4. Admin Driver Management
Design a driver management page for tenant admin. Dark sidebar. Main: search + filters (status: pending/approved/rejected). Table: Photo, Name, Phone, Vehicle, Documents status (badge), Joined date, Status, Actions (approve/reject buttons). Document review modal with driver docs side by side. Clean admin UI.
5. Admin Trip Listing
Design a trip listing page for tenant admin. Dark sidebar. Filters: date range, status, driver. Table: Trip ID, Rider, Driver, Pickup → Destination, Distance, Fare, Status (badge), Date. Clickable rows for detail. Clean data table.
6. Admin Document Review
Design a document review page. Dark sidebar. Driver info card at top. Below: document images in a grid (vehicle front, back, side, license, insurance). AI-extracted data panel showing matched/unmatched fields. Approve and Reject buttons. Clean review interface.
7. Admin Payouts
Design a payouts management page. Dark sidebar. Summary cards: Total pending, Total paid this month, Driver count. Table: Driver name, Balance, Last payout, Amount, Status, Action (Pay button). Bulk payout button. Clean financial admin UI.
8. Customer Service Search
Design a customer service search interface. Dark sidebar. Two search modes: By phone number (input + search) and By trip ID (input + search). Results: user card with trip history, or trip detail card with all info. Clean service tool design.
LANDING PAGE
1. Hero Section
Design a landing page hero section for "Tripz" - a ride-hailing SaaS platform. Bilingual Arabic/English. Headline: "Launch your transport app under your brand in 30 days". Subheadline: "Data stays in your country. Transparent pricing. Full customization." Two CTA buttons: "Try the Demo" (blue filled) and "Contact on WhatsApp" (green outlined). Background: subtle gradient or illustration of city/map. Modern SaaS landing page style.
2. Features Section
Design a features section with 3 pillar cards side by side. Card 1: Shield icon, "Data Sovereignty", "Your data stays on your servers, in your country." Card 2: Dollar icon, "Transparent Pricing", "No hidden fees. Public pricing. Calculator included." Card 3: Rocket icon, "30-Day Launch", "From contract to app store in 30 days." Clean icon cards with subtle shadows. Bilingual.
3. Savings Calculator
Design an interactive savings calculator section. Title "Calculate Your Savings". Two input fields: "Daily Rides" (number) and "Average Fare" (currency). Results panel showing: Your current cost vs Tripz cost, savings amount, annual savings. Bar chart comparison. Clean interactive design.
4. Pricing Section
Design a pricing page with 3 tier cards. Starter ($299/mo): Up to 50 drivers, Basic features, Email support. Professional ($799/mo): Up to 200 drivers, Advanced features, Priority support, Custom branding. Enterprise (Custom): Unlimited drivers, All features, Dedicated support, White-label. Popular badge on Professional. Clean modern pricing table.
5. FAQ Section
Design an FAQ accordion section. Title "Frequently Asked Questions". Questions: "Who owns the data?", "What if I want to leave?", "How long does setup take?", "Do you support Arabic?", "What payment methods are supported?", "Can I customize the app?" Each expands to show answer. Clean accordion design.
6. Footer
Design a landing page footer. Logo on left. Navigation columns: Product (Features, Pricing, Demo), Company (About, Blog, Contact), Support (Help Center, Status, API Docs). Social media icons. Copyright text. Bilingual. Clean minimal footer.