Version: 0.2 (Hackathon Draft) Date: March 21, 2026 Author: Isaac Status: Draft Hackathon Track: Projects Leveraging AI, Machine Learning, or Data-Driven Insights
Building a mobile app today has two massive drop-off points:
- The Design Gap — Most non-technical founders and indie builders can't translate their idea into real, polished mobile screens. Tools like Figma have a steep learning curve, and AI tools like Lovable and Bolt skew heavily toward web and produce generic, non-mobile-native output.
- The Deployment Cliff — Even when someone manages to design their MVP, they have no affordable, trusted path to actually get the app built and shipped to the App Store. Freelance platforms are unreliable. Agencies are way out of budget.
The result: thousands of app ideas die between the design stage and the App Store.
Bubble is the end-to-end platform for turning a mobile app idea into a live App Store product — no technical background required. The name reflects the moment we're in: the AI bubble, where intelligence is being compressed into tools that make the impossible accessible.
Users chat with a purpose-built AI design agent to generate real, polished mobile screens — then refine them in a Figma-style editor — then with one click, hand it off to a vetted engineer from the MergeFund network who builds and ships the real app at accessible prices.
"Design it. Ship it. Own it."
- AI-generated UI/UX has matured enough for production-quality mobile screens
- There is a clear gap in the market: "Lovable for mobile" doesn't exist yet
- The MergeFund dev network provides a ready supply of affordable vetted engineers competitors cannot replicate on Day 1
- AI-assisted development has compressed build time dramatically — what cost $15K two years ago can be done for $150–$500 today
- A DGX Spark enables training a purpose-built mobile design model — not a generic LLM wrapper
- Has an app idea, no dev skills
- Has tried Figma or Canva, got frustrated
- Budget-conscious — can't afford a $15K agency build
- Wants to own their app, not be locked into a no-code platform
- Small founding team, no mobile dev in-house
- Needs a quick, cheap MVP to validate before hiring full-time engineers
- Values speed to market above all else
[1] Land on bubble.design
↓
[2] Chat with AI design agent — describe your app idea in plain language
↓
[3] AI generates mobile-native screens in real-time
→ Each screen appears progressively as it's generated
→ Rendered inside a realistic iPhone device frame
→ Follows Apple HIG, 8pt grid, proper color systems, mobile-native patterns
↓
[4] Iterate via chat
→ "Make the home screen darker"
→ "Add a weekly progress chart"
→ "Change the color scheme to something more premium"
↓
[5] Fine-tune in the Figma-style editor
→ Click any element to select it
→ Adjust colors, typography, spacing, border radius via side panel
→ Get it exactly right before handoff
→ Lock screens when ready
↓
[6] Click "Ship to the App Store"
↓
[7] AI Scoping Engine analyzes locked screens + feature set
→ Outputs estimated hours, price breakdown, scope summary
→ Platform fee + Apple/Google developer costs disclosed upfront
→ Minimum job: $150
↓
[8] User pays via Stripe — funds held in escrow
↓
[9] Job appears in engineer job board — vetted engineer claims it (Uber model)
→ Pre-scoped, pre-priced, pre-paid — no proposal writing needed
↓
[10] Engineer builds app (React Native / Flutter / Swift)
→ Status tracker: In Development → In Review → Submitted
↓
[11] User reviews → Approves → Payment released → App Store submission
↓
[12] User owns the codebase and the live app
↓
[13] For v2, scaling, or new features → warm handoff to MergeFund
- Conversational chatbot interface — left sidebar, message thread, input bar
- Purpose-built AI with deep knowledge of:
- Apple Human Interface Guidelines
- Material Design 3 (Android)
- Color theory — builds full color systems (primary, accent, neutrals, semantic colors)
- Typography scales — display, heading, body, caption; max 2 typefaces
- 8pt spacing grid — everything divisible by 8
- 44×44pt minimum tap targets
- Bottom navigation for primary actions (thumb zone awareness)
- Safe areas — notch, home indicator, status bar respected
- Hierarchy through size and weight first, color second
- Emotional language of color per app category (fintech ≠ fitness ≠ social)
- Generates multiple screens in one pass, each appearing progressively
- Iterative refinement via chat — only re-generates the affected screen
- Screen types: Onboarding, Home/Feed, Auth, Profile, Settings, Detail, Empty States, Loading States
- Light/dark mode toggle on canvas
- Click any element on a screen to select it (blue selection border)
- Side panel with property controls:
- Color picker (hex + opacity)
- Font size + font weight
- Border radius slider
- Padding/margin controls
- Background color
- Changes update in real-time
- "Lock Screens" button — freezes design, marks it as ready for engineer handoff
- Screens exportable as PNG
Reads locked screen specs + conversation history and outputs a transparent quote.
Pricing Rubric:
| Dimension | Options | Hours |
|---|---|---|
| Screen Count | 1–4 screens | 1–4 hrs base |
| 5–8 screens | 4–8 hrs base | |
| 9–12 screens | 8–14 hrs base | |
| 13+ screens | Custom quote | |
| Auth | None | +0 |
| Email/password | +0.5 | |
| Social login (Google/Apple) | +1.5 | |
| Biometric / 2FA | +1.0 (stacks) | |
| Backend | Local only | +0 |
| Simple CRUD | +2 | |
| Real-time features | +5 | |
| Complex logic | +8 | |
| Integrations | Push notifications | +0.5 each |
| Payments (Stripe/Apple Pay) | +1.5 | |
| Maps / location | +1.0 | |
| Camera / media | +1.0 | |
| External API | +1.0 each | |
| Platform | iOS or Android | ×1.0 |
| Both | ×1.4 | |
| App Store Submission | Always included | +1 hr flat |
Pricing formula:
Total Hours = (Base + Auth + Backend + Integrations) × Platform Multiplier + 1
Dev Cost = Total Hours × $30/hr
User Price = Dev Cost × 1.25 (20% platform fee)
Minimum = $150
Platform fee disclaimer shown on every quote:
Apple Developer Program ($99/yr) and Google Play ($25 one-time) are paid directly to Apple/Google — not included in this price. We'll guide you through setup.
- Stripe checkout (test mode for hackathon)
- Escrow record created in Supabase on payment success
- Milestone structure: 50% released at engineer kickoff, 50% on App Store submission approval
- Funds held if dispute raised
- Engineer signup: name, stack (RN / Flutter / Swift), portfolio, rate confirmation
- Job board: list of available jobs showing app name, screen count, price, deadline
- "Claim Job" — locks job to engineer, user status updates automatically
- Engineer job view: locked screens, scope doc, timeline, Stripe payout info
- Engineer marks job as "Ready for Review" when complete
- Rating system: users rate engineers, engineers rate clients
- "Matched to Engineer [Name]" → "In Development" → "In Review" → "Submitted to App Store"
- Messaging thread between user ↔ engineer for change requests
- Push/email notifications on status changes
- Internal PM dashboard: all active jobs, statuses, flagged issues
- Dispute flow: user raises dispute → PM notified → job enters "Dispute" status → escrow held
- PM actions: release escrow, issue refund, reassign job to new engineer
- This layer is the human safety net — PM is the Bubble team initially
- Post-delivery nudge: "Your app is live. Ready to scale? MergeFund handles v2, new features, and long-term development."
- Warm lead passed to MergeFund with full project context
- Internal + demo-facing dashboard showing:
- Average scoping accuracy (estimated vs. actual hours)
- Most common app categories
- Average revision count before lock
- Engineer turnaround times
- Model improvement metrics over time
- This is the "data-driven insights" story for judges
- Real-time collaboration / multiplayer editing
- Full self-serve engineer marketplace
- In-app code editor or preview
- Custom component uploads
- Android Play Store submission (iOS first)
Bubble does not use a generic LLM. It runs a LoRA fine-tuned model on an NVIDIA DGX Spark — purpose-built for mobile UI design. This is what gives the design agent genuine taste rather than generic output.
| Source | What It Contributes | Collection Method | Training Pairs |
|---|---|---|---|
| Apple Human Interface Guidelines | Design rules, component specs, accessibility standards, navigation patterns | Scrape developer.apple.com/design/human-interface-guidelines |
~500 Q&A pairs |
| App Store Top Charts (iOS + Android) | Real screens from apps millions of people use — ground truth for production quality | iTunes Search API + App Store page scraping. Top 100 across 15 categories | ~400 screen specs |
| Dribbble (mobile/iOS/Android tags, 1000+ likes only) | Aspirational, award-winning mobile UI — pushes toward premium aesthetics | Dribbble API or scrape. Quality filter: likes ≥ 1,000 | ~2,000 screen specs |
| Mobbin | Best single source — real app screenshots organized by pattern (onboarding, empty states, settings, etc.) | mobbin.com/screens — scrape with pattern labels |
~1,500 flow specs |
| Xcode Documentation | SwiftUI components, UIKit behavior, SF Symbols, native iOS component library | Scrape developer.apple.com/documentation |
~600 component rules |
| React Native Documentation | Cross-platform component vocabulary matching what engineers actually build in | reactnative.dev/docs + React Native Paper + NativeBase |
~400 component rules |
| Material Design 3 (Android) | Android-native patterns, Material You color system, motion guidelines | Scrape m3.material.io |
~300 pairs |
| Total | ~5,700 pairs |
Every pair maps to production input/output format:
INPUT: "Design a meditation app home screen. Calm aesthetic, dark mode,
daily streak and featured session card."
OUTPUT: {
"screen": "Home",
"theme": "dark",
"primaryColor": "#1A1A2E",
"accentColor": "#7B68EE",
"components": [
{ "type": "header", "content": "Good morning", "style": "display" },
{ "type": "streak_card", "value": 14, "label": "Day streak" },
{ "type": "featured_card", "title": "Morning Calm", "duration": "10 min" },
{ "type": "tab_bar", "items": ["Home", "Explore", "Progress", "Profile"] }
],
"spacing": "8pt_grid",
"typography": { "primary": "SF Pro Display", "secondary": "SF Pro Text" }
}
- Base model: Llama 3.1 8B
- Method: LoRA (Low-Rank Adaptation) — parameter-efficient, fast
- Hardware: NVIDIA DGX Spark
- Estimated training time: 4–6 hours at ~5,700 pairs
- Started: Hour 0–2 of hackathon sprint, runs in background
- Integration: Hour 8–10, evaluate against Claude baseline, swap in if better
- Fallback: Claude API with design constitution system prompt if model needs more tuning
Every screen generated, every scope estimate, every completed build becomes training data. The scoping engine's accuracy improves with every real project. Competitors cannot buy this advantage.
| Layer | Choice | Rationale |
|---|---|---|
| Framework | Next.js (React) | Fast to build, great for chat UI + marketing pages |
| Styling | Tailwind CSS | Rapid UI development |
| Component lib | shadcn/ui | Pre-built, accessible components |
| Animations | Framer Motion | Smooth transitions for screen renders |
| Layer | Choice | Rationale |
|---|---|---|
| Design agent (primary) | LoRA fine-tuned Llama 3.1 8B on DGX Spark | Purpose-built mobile design model |
| Design agent (fallback) | Claude API (claude-sonnet-4-6) + design constitution prompt | Best general LLM for structured generation |
| Scoping engine | Fine-tuned model or Claude with pricing rubric prompt | Analyzes screens → outputs hour/cost estimate |
| Training hardware | NVIDIA DGX Spark | Owned, on-premise ML training |
| Layer | Choice | Rationale |
|---|---|---|
| Backend/DB | Supabase | Auth, DB, storage — fast to set up |
| Payments | Stripe | Standard, reliable, escrow-friendly |
| File storage | Supabase Storage | Screen exports, assets |
| Model serving | FastAPI on DGX Spark | Serve fine-tuned model via API |
- Vercel (frontend hosting)
- Supabase (managed backend)
- DGX Spark (model training + inference)
- GitHub (version control)
- AI scoping engine outputs transparent price with full breakdown
- Internal dev rate: $30/hr
- Platform fee: 20% (baked into user price)
- Minimum job: $150
- Platform fees (Apple $99/yr, Google $25 one-time) always disclosed separately
- Maintenance & scaling: handled by MergeFund (post-launch referral)
- Design / prototyping: free (top-of-funnel acquisition)
- Development jobs: 20% platform fee
- MergeFund referral: revenue share on converted clients
- Future: premium plan for priority engineer matching + unlimited projects
Goal: Everything scaffolded and training running before writing a single feature.
- Initialize Next.js project + deploy to Vercel
- Set up Supabase project: auth, DB schema, storage buckets
- Create DB tables:
users,projects,screens,jobs,engineers,disputes,messages - Install Tailwind + shadcn/ui + Framer Motion
- Write the Design Constitution — the system prompt encoding all color theory, HIG rules, 8pt grid, typography scale, thumb zone awareness, component vocabulary. This is 1–2 hours of careful writing and the most important AI artifact in the project.
- Simultaneously: prep training dataset
- Pull RICO dataset (66,000 Android UI screens — publicly available)
- Pull Dribbble top mobile UI shots
- Scrape Apple HIG, Xcode docs, React Native docs, Material Design 3, Mobbin patterns
- Convert to training pairs (natural language prompt → JSON screen spec)
- Launch LoRA fine-tune on DGX Spark — runs in background for the next ~6 hours
Goal: Chat → screens working end to end. The heart of Bubble.
- Build chat interface: left sidebar, message thread, progressive typing indicator, input bar
- Wire up Claude API with Design Constitution as system prompt (fine-tuned model not ready yet)
- Build screen JSON spec → React component renderer:
- iPhone 15 Pro device frame wrapper
- Component library: headers, tab bars, cards, buttons, list items, modals, nav bars
- Components render from JSON spec deterministically
- Multi-screen generation: AI generates all screens in one pass, each appears as it's ready (Bolt-style progressive reveal)
- Iterative refinement: user sends follow-up message → only affected screen re-generates
- Light/dark mode toggle on canvas
- Save project to Supabase on each generation
Goal: Swap in purpose-built model, demonstrate ML differentiator.
- Training job should complete around hour 6–8
- Evaluate fine-tuned model outputs against Claude baseline
- Set up FastAPI endpoint on DGX Spark to serve the model
- If outputs are stronger on mobile-native design → swap in as primary generation engine
- If scoping is the better use case → use fine-tuned model for scope estimation
- Prepare side-by-side comparison of generic LLM output vs. fine-tuned model output for judge demo — this is your ML moment
Goal: Direct manipulation layer that separates Bubble from Bolt/Lovable.
- Click-to-select any element on canvas — blue selection border appears
- Right-side property panel:
- Color picker (hex input + color wheel)
- Font size slider + font weight dropdown
- Border radius slider
- Padding controls (top/right/bottom/left)
- Background color
- Property changes update component JSON in real-time → screen re-renders instantly
- "Lock Screens" button — marks project as ready, enables "Ship to App Store" CTA
- Export locked screens as PNG (for engineer brief)
Goal: The business model comes alive.
- "Ship to App Store" CTA — only active on locked projects
- Scoping engine prompt: send locked screen specs + chat history → Claude or fine-tuned model → structured JSON with hours, cost breakdown, scope summary
- Quote modal UI:
- Estimated hours range
- Itemized breakdown (base screens, auth, backend, integrations, platform multiplier)
- Final price (bold)
- Platform fee line item
- Apple/Google developer cost disclaimer with "we'll guide you through setup"
- User accepts quote → Stripe checkout (test mode)
- On payment success:
- Escrow record created in Supabase
- Job created and posted to engineer board
- User redirected to status page: "Finding your engineer..."
Goal: The Uber-for-devs experience.
- Engineer signup flow: name, preferred stack (RN / Flutter / Swift), portfolio URL, agreement to $30/hr rate
- Engineer dashboard:
- List of available jobs: app name, category, screen count, price, estimated hours, deadline
- "Claim Job" button — locks job, status updates for user, engineer sees full brief
- Engineer job view:
- All locked screens displayed
- Scope summary doc
- User contact thread
- "Mark as Ready for Review" button
- User notification (email) when engineer claims job and when job is marked ready
- User review options: "Approve & Release Payment" / "Request Changes" / "Raise Dispute"
Goal: Trust and safety layer that makes this a real platform.
- Admin PM dashboard (password-protected internal route):
- All active jobs with statuses
- Flagged disputes
- Escrow balances
- Engineer performance (jobs completed, avg rating)
- Dispute flow:
- User raises dispute → form: describe the issue
- Job status → "In Dispute", escrow locked
- PM gets notified
- PM can: release escrow to engineer / issue refund to user / reassign to new engineer
- Simple messaging thread on every job (user ↔ engineer, PM can see all)
- Basic rating system: 1–5 stars, short text review, shown on engineer profile
Goal: Make it look like a real product. Win the room.
- Landing page: hero with tagline, 3-step how-it-works, "Start Building for Free" CTA
- Seed platform with 2–3 completed example projects so it doesn't look empty
- Data insights dashboard: average scoping accuracy, top app categories, model metrics (even if partially mocked with realistic numbers)
- Run full demo end to end. Target: under 3 minutes.
- Fix any blockers in the demo flow
- Open Bubble, type: "I want a calorie tracking app with a home dashboard, photo capture, meal details, and analytics screen"
- AI generates 4 mobile screens progressively in real-time (like the Bolt screenshot)
- Iterate: "Make the home screen dark mode and more premium" — home screen regenerates
- Click the home screen, change the accent color from orange to purple in the editor — instant update
- Click "Lock Screens" → "Ship to App Store"
- Scoping engine returns: 4 screens + camera + simple backend = 8 hrs → $300 (platform fee included). Apple Developer Program $99/yr paid separately.
- Show Stripe checkout (don't complete)
- Switch to engineer dashboard — show the job sitting in the board
- Switch to PM dashboard — show the admin view
- Show the ML slide: DGX Spark fine-tune, RICO dataset, generic LLM vs. Bubble model side-by-side
- Close: "After the app ships, one button sends them to MergeFund for v2. Bubble is the top of the funnel."
| Feature | Status |
|---|---|
| AI screen generation | Real |
| Design Constitution system prompt | Real |
| Fine-tuned model on DGX Spark | Real (trained during hackathon) |
| Screen editor (Level 1 properties) | Real |
| AI scoping engine | Real |
| Stripe payment | Real (test mode) |
| Engineer job board | Real |
| User status tracker | Real |
| PM dispute dashboard | Real (manual resolution) |
| App Store submission | Described, not triggered in demo |
| Data insights dashboard | Real UI, some seeded data |
| MergeFund handoff | UI prompt, manual warm intro |
| Metric | Hackathon Goal | 30-Day Goal |
|---|---|---|
| Screen generation sessions | 20+ demo sessions | 500+ |
| "Ship to App Store" click-through | — | >15% of sessions |
| Paid development jobs | 1 post-hackathon | 10 |
| Scoping accuracy (est. vs. actual hrs) | Baseline established | Within 20% |
| Engineer time-to-claim | — | <2 hours avg |
| User NPS | Positive judge feedback | >50 |
| Risk | Likelihood | Mitigation |
|---|---|---|
| Screen renderer is too complex to finish | Medium | Hardcode one beautiful demo flow (calorie tracker) as fallback — always works |
| Fine-tuned model underperforms Claude | Medium | Use Claude + design constitution as primary, fine-tuned model as scoping engine |
| Scoping engine prices wildly off | Medium | Add human PM review step before quote is final |
| Developer supply at launch | Low (MergeFund network) | Pre-onboard 5 engineers before hackathon ends |
| Users take designs and leave | High | That's fine — free design is the funnel. "Ship to App Store" is the business. |
- Do users need to create their own Apple/Google developer accounts, or does Bubble manage initially?
- Do users receive the full source code or just the live app?
- What's the exact refund policy window after delivery?
- What do we name the AI design agent within the product?
- Android at launch or iOS only?
- Level 2 screen editor: drag-and-drop, layer panel, resize handles
- Fine-tune model v2 on real Bubble-generated + approved projects (data flywheel active)
- Self-serve engineer onboarding + vetting pipeline
- Android / Play Store support
- Premium plan: priority matching, unlimited projects
- MergeFund deep integration: one-click handoff with full project context
Bubble — Design it. Ship it. Own it. This PRD is a living document. Update as scope evolves during the hackathon.