Skip to main content

​
1. Set up your project foundation

Every superun project starts with a clear prompt. Here we’ll build an AI-powered travel planning tool. Example prompt
Build an AI travel planning web app with: • A home page, trip dashboard, and trip detail pages. • Inputs for destination, dates, budget, and travel preferences. • AI-generated itinerary suggestions with hotel, activity, and restaurant recommendations. • User accounts and saved trips, backed by Supabase. • A clean, responsive layout for desktop and mobile.
After superun generates the first version of your project:
  • Check the navigation flow (home → dashboard → trip details).
  • Confirm each page roughly matches what you described in the prompt.
  • If something is missing or the tone is off, refine the prompt and try again.
ℹ️ Tip In your prompt, say explicitly that you want to start with the UI. The sooner you spell out navigation structure, page types, and target users, the closer superun’s output will be to the product you want.

​
2. Refinement questions: turn ideas into a product blueprint

After you submit the initial prompt, superun asks a short series of follow-up questions to turn your ideas into a sharper product blueprint. You might see questions like:
  • Which product experiences do you want to reference? For example:
    • Linear (clean, fast dashboard)
    • Notion (intuitive, well-structured workspace)
    • Airbnb (visually friendly booking flow)
  • What makes your product unique in the market? Possible angles:
    • AI-driven planning or recommendations
    • Real-time monitoring or alerts
    • Full analytics and reporting
    • Deep integration with tools your users already use
  • What should this first version (MVP) include? For an AI travel planner, you might choose:
    • Dashboard + trip list + analytics
    • Dashboard + multi-trip overview + filters
    • Dashboard + collaboration tools + notifications
Your answers influence:
  • UI tone and visual style
  • The core pages and modules superun generates for you
  • Which data models and backend structures get created
  • Where AI and automation show up in the product
ℹ️ Why this matters Treat this step like a quick product interview. The more specific and honest your answers, the closer superun’s output will be to the product in your head.

​
3. Choose a direction with Design Options

Before you lock in a final layout, superun helps you explore several visual directions. After the prompt and refinement questions:
  1. superun generates design options for your app (first round defaults to 2, as shown in product).
  2. Each option includes a preview image showing overall layout and style.
  3. Open each preview and compare typography, spacing, hierarchy, and information layout.
  4. Pick one branch as your main design direction going forward.
  5. If you update the prompt later, you can generate fresh design options again.
Use different branches to test different moods for the same product:
  • Minimal, productivity-focused UI
  • Friendly, consumer-style UI
  • Bold, marketing-forward UI
  • Streamlined, dashboard-first UI
ℹ️ Tip While exploring branches, keep the prompt mostly the same so you’re comparing visuals and layout, not an entirely different feature set.

​
4. Design and edit the interface (Editable Design and Boxify)

superun uses a step-by-step design flow, a bit like building a house. Frame the structure first
  • superun lays out the main structure:
    • Home hero, value proposition, and calls to action (CTAs)
    • Trip search and filters
    • Dashboard for saved trips
    • Trip detail view
    • Account or settings pages
Add the first layer of detail
  • superun fills in basic components:
    • Cards, buttons, forms, navigation
    • Placeholder data for trips, destinations, and preferences
    • Consistent spacing and layout rules
Fine-tune last
  • Adjust fonts, colors, spacing, and imagery.
  • Edit copy so the tone fits your brand (e.g. “travel coach” vs “business trip manager”).
When you’re ready to tweak specific sections, switch to Editable Design：
  • Pages become an interactive canvas inside superun.
  • Click headings, paragraphs, sections, and cards to edit content or structure directly.
Then use Boxify for precise AI edits:
  1. Draw a box around the area you want to change (e.g. hero, trip card grid).
  2. Enter a prompt, such as:
  • “Make this hero feel more premium, like a travel agency.”
  • “Turn these cards into sample 3-day itineraries for different budgets.”
  1. superun updates only the boxed region; everything else stays the same.
ℹ️ Best practice Treat Editable Design + Boxify as a polish toolkit—adjust one section at a time instead of rewriting the whole prompt every time.

​
5. Feature list

In the background, superun reads your prompt and refinement answers and produces a feature list for your app under Build. For an AI travel planner, the list might include:
  • ✅ Real-time trip search and filters
  • ✅ AI-generated itinerary suggestions (hotels, activities, restaurants)
  • ✅ Saved trips and favorites
  • ✅ User sign-in and profiles
  • ✅ Trip analytics (budget breakdown, time allocation, etc.)
  • ✅ Reminders, notifications, or email hooks
  • ✅ Integration hooks for future booking or calendar services
Based on that list, superun:
  • Builds matching UI modules (trip cards, timelines, analytics blocks).
  • Defines initial database structure (users, trips, destinations, AI suggestions, and related tables).
  • Configures basic backend APIs and service bindings.
  • Decides where AI calls run and how results are shown.
ℹ️ Tip If the feature list feels too heavy or too light, tell superun directly: “Build an MVP with only trip search + AI itineraries + saved trips,” or “Add paid plans, team workspaces, and collaboration—make it a Pro tier.”

​
6. Backend and sign-in with Supabase

When the UI and feature list are in good shape, connect the backend.
  1. Create a Supabase account and start a new project.
  2. In superun, use Supabase integration to link your project.
  3. superun generates SQL tables from the feature list, for example:
  • profiles: user info and preference settings
  • trips: trip data tied to each user
  • Optional destinations, ai_suggestions, favorites, and related tables
superun can also set up basic auth:
  • Sign up, sign in, sign out
  • Password reset
  • Restrict dashboard and trip pages to signed-in users
ℹ️ Security note Enable Row-Level Security (RLS) in Supabase so users only see their own trips. superun can generate sensible default policies; you can refine them later.

​
7. Smart planning with superun AI

The core value of this app is AI-generated travel itineraries. Steps to add AI:
  1. Get your superun API key from the account dashboard.
  2. Set the key as a project environment variable, or bind it in the AI settings panel.
  3. superun attaches that key to the AI flows defined in your feature list.
Common AI flows:
  • Create a trip
    • Input: destination, dates, interests, budget.
    • Output: a structured itinerary with days, times, activities, and notes.
  • Refine an existing trip
    • For example:
    • “Make this trip more family-friendly.”
    • “Emphasize food experiences.”
    • “Shorten to a 3-day weekend trip.”
  • Summarize and share
    • Generate short summaries for email, messaging, or internal notes.
For more stable results, ask for structured responses:
  • Have superun call the model with a JSON Schema returning fields like day, time, location, and description.
  • superun can then write that data straight into Supabase tables.
ℹ️ Testing tip Start with a simple case, like a 2-day trip to a nearby city. Once structure and fields look right, expand to longer trips and richer requirements.

​
8. Paid plans with Stripe

If you want to monetize the travel planner, add subscriptions or paid tiers.
  1. Create a Stripe account.
  2. Create a product, e.g. “superun Travel Planner Pro – $12/month.”
  3. Configure Stripe credentials and price IDs in superun.
  4. Wire upgrade blocks or pricing pages in the app to Stripe Checkout.
  5. Gate features (unlimited AI itineraries, team spaces, etc.) to paying users.
You can also use Stripe’s built-in customer tools:
  • Customer Portal for subscription management
  • Receipt and invoice emails
  • Test mode to validate checkout safely
ℹ️ Tip In Stripe test mode, use official test card numbers to exercise the flow repeatedly before going live.

​
9. Testing and debugging

Errors during development are normal; superun is meant to help you fix them faster.
  • When a build fails, use Auto Fix so superun reads the error and suggests a fix.
  • For backend issues, check Supabase logs and confirm tables, policies, and env vars match superun’s setup.
  • For deploy issues, check your host (Netlify, Vercel, etc.), copy key error messages, and ask superun for help.
You can also:
  • End-to-end test the core path: sign up → create a trip → generate itinerary → save and edit.
  • Have colleagues or friends use the app and report confusing or awkward steps.
ℹ️ Recovery tip If a change breaks the app badly, roll back to a stable version. Use superun’s version history and restore features to keep iterating safely.

​
10. Deploy your application

When you’re happy with the experience, ship it to real users. You have two main paths:
  1. Deploy directly from superun
  • Use superun’s deploy options on the default domain.
  • Good for quick tests, demos, or internal reviews.
  1. Deploy via a host (e.g. Netlify or Vercel)
  • Connect your GitHub repository to the host.
  • Set build commands and environment variables (Supabase keys, AI keys, Stripe keys).
  • Configure a custom domain and update DNS.
Before you go public, double-check:
  • Favicon and app name.
  • Meta tags and Open Graph (OG) images so shared links look professional.
  • If you charge or handle personal data, publish privacy policy, terms, and contact info.
ℹ️ Launch checklist At minimum, one full path should feel smooth: land on the home page, create an account, generate a trip, refine it with AI, and save it. When that flow feels natural, you’re ready to share your superun-powered travel planning app with the world.