Claude Code
the missing design modefor Claude Code
Use Mowgli to scope out, specify, and design your product. Hand off the SPEC.md and React design references, and watch Claude build it flawlessly.
Built with Mowgli
Project 01
Off Menu
Mobile FirstChef Marketplace
Hyperlocal food delivery connecting you with vetted home chefs. Discover unique, neighborhood-exclusive dishes cooked within 3km of your door.
preview in mowgliWelcome
Hero section visible with primary and secondary CTAs, feature highlights, customer testimonials, and footer links.
Phone Number Input
Initial screen with phone number input field and country code selector.
SMS Verification
Screen showing 6-digit verification code input after SMS is sent.
Password Creation
Password and confirm password fields with strength indicator.
Personal Details
Form fields for first name, last name, and email address.
Location Permission
Location permission request dialog with explanation of 3km radius.
Address Input
Address form with autocomplete for delivery location.
Notification Preferences
Toggle switches for push, SMS, and email notifications.
Signup Complete
Success message with automatic redirect to DiscoveryFeed.
All Chefs
Shows all available chefs within 3km radius with no filters applied.
Available Now
Available now" filter is active, showing only chefs currently accepting orders.
Search Active
Search bar is focused with keyboard visible, showing recent searches and suggestions.
Not Following
Chef profile with prominent "Follow" button, showing all chef information and dishes.
Following
Chef profile with "Following" button and notification bell, user receives updates from this chef.
Schedule Expanded
Weekly schedule section is expanded showing detailed time slots for the week.
All Categories
Shows all available dishes from the chef with no category filter applied.
Category Filtered
A specific category (Mains, Sides, Desserts) is selected, filtering the dish list.
Cart Has Items
Floating cart button shows item count badge (e.g., "3") indicating items in cart.
Delivery Selected
Delivery option is selected, showing delivery fee and estimated time.
Pickup Selected
Pickup option is selected, showing available time slots from chef's schedule.
Preparing
Chef is preparing food, status shows "In Progress" with estimated time.
Ready for Delivery
Food is ready, driver is assigned and shown on live map with ETA.
Ready for Pickup
Food is ready for pickup, showing QR code and pickup instructions.
Completed
Order is complete with prompt to rate and review.
Active Orders Tab
Shows active orders with status badges and progress indicators.
Past Orders Tab
Shows completed orders with reorder options and review prompts.
Profile Overview
Shows profile photo, name, followed chefs count, and quick access to all settings.
Managing Addresses
Delivery addresses section is expanded showing list with add/edit/delete options.
Managing Payment Methods
Payment methods section is expanded showing saved cards with add/edit/delete options.
Notification Settings
Notification preferences section is expanded with toggle switches.
Selecting Rating
Star rating selector is active with no stars selected yet.
Writing Comment
Rating selected, text area is focused for writing review comment.
Subscription Overview
Shows current plan, billing date, payment method, and quick actions.
Billing History
Shows table of past payments and invoices.
Update Payment Method
Modal is open with credit card form for updating payment method.
Upgrade Plan Modal
Modal is open showing plan upgrade options with feature comparison.
Viewing Profile
Shows current profile information with no unsaved changes.
Editing Bio
Bio text area is focused with content being edited.
Uploading Photo
Photo upload section is active with preview and crop options.
Selecting Specialties
Cuisine specialties selector is open with tag selection interface.
Earnings Overview
Shows current week earnings, month-to-date totals, and key metrics.
Payout History
Shows detailed table of past payouts with dates and amounts.
Inventory Overview
Shows current inventory levels and monthly subscription status.
Low Inventory Alert
Shows warning for items running low with quick reorder options.
Weekly Calendar
Shows full week with day toggles and time slot editors.
Day Details Expanded
Specific day is expanded showing detailed time slots and capacity settings.
New Orders
Shows pending orders requiring acceptance with Accept/Decline buttons.
Preparing Orders
Shows accepted orders being prepared with "Mark as Ready" buttons.
Ready for Pickup/Delivery
Shows orders marked as ready awaiting pickup or driver assignment.
Completed Orders
Shows fulfilled orders with customer information and ratings.
Cancellation Reason Modal
Modal is open asking for cancellation reason with radio options and text input.
Project 02
Splitto
FintechReal-time
Eliminate shared expense awkwardness with virtual group cards. Automatically split purchases in real-time with no manual math or reimbursements.
preview in mowgliDefault
Full landing screen displayed with hero section, feature highlights, social proof, and primary/secondary CTAs visible.
Invitation Link Handler
Modal or sheet appears when user taps "I have an invitation", allowing them to paste or enter an invitation code/link.
Step 1: Phone Email
First onboarding step with phone number, email, and password inputs. Progress indicator shows step 1 of 3.
Step 2: Verify Contact
Verification step with code inputs for phone and email. Progress indicator shows step 2 of 3.
Step 3: Link Payment Method
Payment method linking step with Plaid integration. Progress indicator shows step 3 of 3.
Completion Screen
Success screen with celebration animation and "Create Your First Group" CTA.
Default with Groups
Home screen showing grid of group cards with transaction previews, member counts, and status indicators.
Empty State
No groups yet - shows friendly illustration with "Create Your First Group" CTA.
Step 1: Group Type Selection
Selection screen showing cards for Couple, Housemates, Trip, and Custom group types with descriptions.
Step 2: Group Details
Group configuration with name input and split ratio selector showing real-time amount preview.
Success Screen
Celebration screen with virtual card details displayed and options to add to wallet or invite members.
Default View
Full group dashboard with header, balance summary, and transaction feed visible.
Admin View
Same as default but with admin-only quick actions toolbar visible and card details unblurred.
No Transactions
Group created but no transactions yet - shows empty state with illustration.
Search Active
Search bar focused with query entered, showing filtered transaction results.
Filter: Pending Only
Filter toggle set to "Pending", showing only pending transactions.
Filter: Flagged Only
Filter toggle set to "Flagged", showing only flagged transactions requiring admin review.
Default View
Full transaction details with header, split breakdown, and appropriate action buttons based on user role.
Flagged Transaction
Transaction flagged by member - shows red status indicator and admin review notice.
Refunded Transaction
Transaction refunded - shows refund status and credit amounts per member.
Failed Payments
One or more member payments failed - shows error indicators and retry status.
Admin Actions Visible
Admin view showing "Adjust Split" and "Reverse Transaction" buttons.
Default Settings
Card settings screen showing card details, spending limits, and security options.
Card Inactive
Card status toggled off - shows inactive state and warning about declined transactions.
Replace Card Confirmation
Confirmation modal visible asking admin to confirm card replacement.
Default View
Payment methods list showing primary method highlighted and other methods with actions.
Pending Charges Alert
Warning banner visible about pending charges preventing method removal.
Remove Method Confirmation
Confirmation modal for removing payment method with settlement requirements.
Adding Payment Method
Plaid Link flow open for connecting new bank account or card.
No Payment Methods
No payment methods linked - shows prompt to add first method.
Default Settings
Group settings showing info, members list, permissions, and danger zone.
Member Actions Open
Action sheet open for selected member showing options to promote or remove.
Remove Member Confirmation
Confirmation modal showing settlement warning before removing member.
Leave Group Confirmation
Confirmation modal for member leaving group with settlement requirements.
Archive Group Confirmation
Admin confirmation modal to archive group with final settlement warning.
All Groups View
Activity feed showing transactions from all groups with date headers and stats.
No Transactions
No transactions in selected filter - shows empty state with illustration.
Default Account View
Account screen showing profile section, settings list, support options, and app info.
Edit Profile Modal
Modal open for editing profile name and uploading/changing avatar photo.
Notification Preferences
Screen showing detailed toggles for different notification types and delivery methods.
Security Settings
Security screen showing biometric settings and password change options.
Sign Out Confirmation
Confirmation modal asking user to confirm sign out action.
Step 1: Reason Selection
First step showing radio button list of flag reasons with optional text input for "Other".
Step 2: Confirmation
Confirmation step showing selected reason summary and warning about pausing charges.
Retroactive Application
Retroactive toggle enabled with date range selector and impact summary visible.
Impact Details Expanded
Detailed breakdown of credits/debits for retroactive changes shown.
Project 03
Soon
Video StreamingSocial
Speed dating reimagined: minimal profiles and immediate 5-minute video dates. Authenticity first—match, meet via video, then decide.
preview in mowgliWelcome
Welcome screen with hero section, value proposition, and primary "Get Started" CTA visible. No scrolling has occurred.
Step 1: Contact Entry
Phone/email entry screen with verification code input field. Step indicator shows 1/7 progress.
Step 2: Identity
Identity information entry with fields for first name, last name, age, gender, and dating preferences. Step indicator shows 2/7 progress.
Step 3: Profile Setup
Profile creation with photo upload control and one-liner input with live character counter. Step indicator shows 3/7 progress.
Step 4: Personality Traits
Personality configuration with sliders for own traits (Outgoing/Introverted, Adventurous/Homebody, Spontaneous/Planner, Active/Relaxed, Talkative/Listener) and ideal partner preferences on same dimensions. Step indicator shows 4/7 progress.
Step 5: Availability Setup
Weekly availability configuration with day toggles and time slot pickers. Step indicator shows 5/7 progress.
Step 6: Permissions
Permission request screen for camera, microphone, and notifications with explanations. Step indicator shows 6/7 progress.
Step 7: Complete
Profile summary screen with "Start Swiping" action button. Step indicator shows 7/7 progress.
Default View
Profile card prominently displayed with photo, distance, and one-liner. Pass and Like buttons visible at bottom.
Full-Screen Photo
Profile photo expanded to full screen with dismiss control. Distance and one-liner overlaid on photo.
Report Modal Open
Report modal overlay with selection of report reasons and confirmation button.
Match Confirmed
Both profiles displayed side by side with "Speed Date Now" and "Schedule for Later" options. 7-day countdown timer visible.
Unmatch Confirmation
Confirmation dialog overlay asking user to confirm unmatching action.
Mutual Yes - Chat Unlocked
Success animation showing that both users said Yes and chat is now unlocked with option to start chatting.
Active Match
Match with "Active" status showing "Speed Date Now" and "Schedule for Later" options with 7-day expiration countdown.
Scheduled Date
Match with scheduled date showing date/time, countdown to date, and "Reschedule" and "Cancel Date" options.
Awaiting Decision
Match showing "Awaiting Decision" status with 24-hour countdown timer for other user's decision.
Unmatch Confirmation
Confirmation dialog overlay asking user to confirm unmatching action.
Month View
Calendar showing current month with available dates highlighted. No date selected yet.
Date Selected
Date is selected and time slots are displayed below calendar. Available slots are visually distinct.
Default View
List of 7 days with some days enabled showing time slots, others disabled. Save and Cancel buttons visible.
Adding Time Slot
New time slot row being added with start and end time pickers open for selection.
Upcoming Dates
Tab showing list of upcoming video dates with countdown timers and reschedule/cancel options.
Past Dates
Tab showing list of past video dates with outcome status and options to view profile or start chat.
Cancel Confirmation
Confirmation dialog asking user to confirm cancellation of scheduled date.
Active Matches
Active tab showing matches needing scheduling with expiration countdowns, sorted by soonest expiration.
Scheduled Matches
Scheduled tab showing upcoming video dates with date/time information.
Awaiting Decision
Awaiting Decision tab showing completed dates where user is waiting for other's decision.
Connecting
Call is initializing with "Connecting..." status, showing own camera preview and waiting for other user to join.
In Call
Active video call with both users visible, 5-minute countdown running, and all call controls available.
Extend Time Prompt
At 4:30 mark, overlay appears asking both users if they want to extend by 2 minutes with countdown timer.
Report Modal
Report overlay with selection of reasons (inappropriate content, harassment, technical issues, other).
Request Received
Modal displayed with caller's profile, name, one-liner, and 60-second countdown. Join and Decline buttons available.
Request Received
Modal displayed with caller's profile, name, one-liner, and 60-second countdown. Join and Decline buttons available.
Decision Pending
Screen showing other user's profile with "Want to keep talking?" question and Yes/No options. 24-hour countdown visible.
Empty Chat
New conversation with empty message thread and icebreaker suggestions to help start the conversation.
Active Conversation
Message thread with multiple messages exchanged between both users, input field ready for new message.
Block/Unmatch Confirmation
Confirmation dialog asking user to confirm blocking or unmatching the other user.
View Profile
Current profile displayed with photo, one-liner, and read-only age/gender/preferences. Save and Cancel buttons visible.
Editing One-Liner
One-liner field is being edited with live character counter showing remaining characters.
Changing Photo
Photo selection interface open with options to take new photo or select from gallery.
Editing Traits
User is actively dragging a slider, with visual feedback showing the current value.
Let's deep dive
From idea to AI-ready package in minutes. Give Claude Code the context it needs to build your app right the first time.
Step 01
Brainstorm & Design
Describe your app idea. Mowgli walks you through a guided questionnaire, generates a first draft product spec, and creates an initial high-fidelity design for every flow and state.
Q1:Let's start with the basics. What kind of application are we building today?
Please choose one option
Mobile App
Web Dashboard
Landing Page
E-commerce Store
Q2:Got it. And who is the primary user you want to optimize for?
Please choose one option
Power Users
First-time Visitors
Enterprise Admins
Q3:Love the trust-focused angle. That makes me think about group dynamics—should everyone have equal control?
answeredPlease choose one option
Full democracy: anyone can change splits
Admin model: one person manages settings
Flexible rules based on the group type
Other...
+ Add note or additional context
Q4:How should we handle the 'settle up' experience? Smooth and invisible, or celebratory?
Please choose one option
Invisible / Auto-charge
Manual & Celebratory
Monthly Digest
Q5:What type of methods of payments would you like to integrate with?
Please choose one option
Bank details
Apple Pay
Direct debit
Q1:Let's start with the basics. What kind of application are we building today?
Please choose one option
Mobile App
Web Dashboard
Landing Page
E-commerce Store
Q2:Got it. And who is the primary user you want to optimize for?
Please choose one option
Power Users
First-time Visitors
Enterprise Admins
Q3:Love the trust-focused angle. That makes me think about group dynamics—should everyone have equal control?
answeredPlease choose one option
Full democracy: anyone can change splits
Admin model: one person manages settings
Flexible rules based on the group type
Other...
+ Add note or additional context
Q4:How should we handle the 'settle up' experience? Smooth and invisible, or celebratory?
Please choose one option
Invisible / Auto-charge
Manual & Celebratory
Monthly Digest
Q5:What type of methods of payments would you like to integrate with?
Please choose one option
Bank details
Apple Pay
Direct debit
Step 02
Iterate Visually
Polish your design on an intuitive canvas. Use natural language to make surgical or sweeping changes — get every screen looking exactly how you want it.
Screens
Sign up
Overview
Add Group
Group Details
Settings
Payment Methods
Disputes
Step 03
Export AI Package
Download a .zip optimized for Claude Code, Cursor, and other AI coding assistants — your detailed spec, pixel-perfect React code for every screen, and AI instructions to guide the build.
Export Project
Continue with AI coded assistance
Get the optimized master prompt with your full PRD spec and all screens, ready to attach in your favourite AI-native builder to launch in production.
Figma
Great for further design work or sharing. Export all of your screens and states to a Figma file using the Mowgli Figma plugin.
Mowgli package
Perfect for a developer or AI. Download a .zip package containing your specification, and React + Tailwind code for your screen designs.
Step 04
Build with Claude Code
Open Claude Code and say "help me implement this project". Claude reads your spec, references the screen designs, and builds your app — no back-and-forth.
Claude Code
key features
Everything you need to go from idea to production-ready design.
AI Design Generation
Generate complete, high-fidelity UI designs for your whole app or feature idea in seconds and iterate on it with a powerful AI assistant. Mowgli explores your product in depth and designs every possible screen, flow, and state.
Export to Code
Export your AI-generated or Figma designs as pixel-perfect React components, Figma files, or AI-ready packages with curated prompts for Claude and Cursor.
Spec-driven Design
Design and specifications should evolve in lockstep. Mowgli turns structured specs and product requirements into complete, high-fidelity UI designs, and lets you iterate on them with a powerful AI at the speed of thought.
Chat with Your Design
Select any element and say what to change. Mowgli edits your design through conversation - targeted tweaks or sweeping changes, all in plain English.
Figma Import
Bring your existing Figma designs into Mowgli and use chat to edit, iterate, and evolve them. Tweak layouts, update copy, restyle pages, or rethink whole flows - all with AI. When you're done, export to code for building, or back to Figma for tweaks.
claude thrives on context. give it some.
Do with 10 messages what you used to do with 100. Design your app in Mowgli, then let Claude Code build it.