Best Practices

Get the Most Out of
GenMB

Master vibe coding techniques that power users rely on to build better apps faster.

These best practices come from thousands of apps vibe coded with GenMB. Apply them to get better results on your first generation, iterate more effectively, and create apps that truly meet your needs.

Writing Effective Prompts

The quality of your prompt directly impacts the quality of your app. Clear, detailed descriptions give the AI the context it needs to generate exactly what you want.

  • Start with the app type and purpose: "Create a todo app for managing daily tasks" or "Build a tip calculator for restaurant servers"
  • Describe the complete user experience: "Users can add items with titles and due dates, mark them complete with a checkbox, and delete by swiping left"
  • Specify visual style and branding: "Modern dark theme with purple accents, rounded corners, and subtle shadows on cards"
  • Include edge cases and empty states: "Show a friendly message with an illustration when there are no items" or "Display error toast if form validation fails"
  • Define data structures: "Each expense has an amount, category, date, and optional note"
  • Be iterative: Start with core features, then add complexity through chat conversations

Choosing the Right Framework

Each framework has strengths. Match your choice to your project complexity and what you plan to do with the code afterward.

  • Vanilla JS: Best for simple tools, calculators, landing pages, and single-purpose apps. Generates the fastest load times and smallest bundle.
  • React: Best for complex state management, interactive dashboards, and multi-component architectures. Component reusability makes maintenance easier.
  • React + TypeScript: Best for large multi-page apps where type safety and IntelliSense matter. Ideal for SaaS dashboards and production apps.
  • When unsure, start with Vanilla JS—you can always regenerate with React later if you need more structure

Using Agent Mode

Agent Mode is GenMB's autonomous building capability. It breaks complex requests into steps, executes them sequentially, and handles errors automatically.

  • Enable Agent Mode for multi-feature apps with 5 or more distinct features, multiple screens, or complex logic
  • Agent Mode creates a plan first, then executes step-by-step. Watch the task list to track progress and understand what's being built.
  • The AI automatically retries failed steps up to 3 times with different approaches. You don't need to intervene on transient errors.
  • Checkpoints are created after each successful step, allowing rollback to any point if something goes wrong
  • Use standard mode for quick prototypes, single-purpose tools, or when you want fast results without the planning phase
  • For very complex apps, consider building in stages: generate the core, refine it, then add features incrementally

Iterating with Chat

Chat is your tool for refining generated apps. Specific requests get better results than vague ones.

  • Use chat immediately after generation to refine—don't wait until the app is "done"
  • Be specific and actionable: "Change the header background color to #1a365d" instead of "make it look better"
  • Reference existing elements clearly: "Add a logout button in the top right corner next to the user profile icon"
  • Ask for one change at a time for best results. Multiple changes in one message can cause the AI to miss some.
  • Use version history to experiment fearlessly—you can always rollback if a change doesn't work out
  • If the AI doesn't understand, rephrase with more context: explain what you see and what you want to see instead

PWA Configuration

Progressive Web Apps work offline and can be installed on mobile devices like native apps.

  • Enable PWA for any app you want users to access repeatedly, especially mobile users
  • PWAs cache content for offline access—users can use your app without internet after the first load
  • Users can install your app directly from the browser to their home screen, no app store required
  • Customize the app name, short name, and icon in settings before enabling PWA
  • Test PWA functionality on actual mobile devices—the install experience varies by browser and OS
  • Consider which pages truly need offline access and structure your app accordingly

Deployment Tips

GenMB provides instant deployment to custom subdomains with SSL included.

  • Choose a memorable, professional subdomain (yourproject.genmb.com) that reflects your app's purpose
  • SSL/HTTPS is configured automatically—no certificates to manage or renew
  • Test your app thoroughly in the preview before deploying. Check all features, forms, and edge cases.
  • Share the URL directly with users—no app store submission, no review process, no waiting
  • Update deployments anytime with one click. Changes go live immediately.
  • For production use, consider exporting the code and deploying to your own infrastructure

Database and Backend

GenMB auto-provisions databases and backend infrastructure. Describe an app that needs data, and the AI sets everything up.

  • GenMB auto-detects your database type: Firestore (NoSQL) for document-based apps, PostgreSQL via Data Connect for relational apps with foreign keys and joins
  • Use the Schema Designer to visually design your database tables before generation—the AI uses your schema to generate consistent code
  • The Database Browser lets you browse records, create/edit/delete data, sort, filter, and paginate—for both Firestore and PostgreSQL
  • For backend apps (Express or FastAPI), GenMB deploys a Dev Sandbox with real server execution so you can test APIs in the preview
  • Environment variables can be managed in the Env Vars panel—they are automatically injected into deployments and sandboxes
  • Backend apps auto-generate package.json or requirements.txt from your code imports—no manual dependency management needed

Using Integrations

GenMB has 45+ plugin integrations. Add Supabase, Stripe, Clerk, and more from the Integrations panel. The AI automatically generates code that works with your configured services.

  • Enable integrations before generating—the AI uses your config to generate properly integrated code
  • Supabase: Add your Project URL and anon key for database, auth, and storage. GenMB will generate proper Supabase client setup and queries.
  • Stripe: Add your publishable key for payment forms. The AI generates checkout flows with proper error handling.
  • Clerk: Add your publishable key for user authentication. GenMB generates sign-in/sign-up flows and user session management.
  • Use the Env Vars panel to manage API keys and secrets securely—they are injected into deployments and sandboxes automatically
  • Integrations are per-app—different apps can use different services or configurations

App Analytics

Track how users interact with your deployed apps using built-in analytics. Monitor visitor counts, referral sources, and top pages without any third-party setup.

  • Access analytics from the Analytics panel in your app—no third-party scripts or configuration needed
  • View visitor data across 7-day, 30-day, and 90-day periods with comparison metrics to spot trends
  • Top referrers show where your traffic comes from—use this to understand which marketing channels work best
  • Top pages reveal which parts of your app users visit most—focus your refinement efforts on high-traffic areas
  • Analytics data updates daily—check regularly after launching to understand user behavior patterns

Custom Branding

Make your deployed apps look fully professional with custom branding. Set logos, brand colors, metadata, and SEO settings so your apps represent your brand, not GenMB.

  • Open the Branding panel from your app sidebar to configure custom logos, colors, and metadata for deployed apps
  • Upload your logo and set brand colors—deployed apps will display your branding instead of GenMB defaults
  • Configure SEO metadata (title, description, Open Graph images) for better search engine visibility and social sharing
  • Custom branding persists across deployments—update once and all future deploys use your settings
  • Combine with custom domains for a fully white-labeled experience: yourdomain.com with your branding

RBAC and Permissions

Add role-based access control to your apps. Define user roles like admin, editor, and viewer, and GenMB generates architecture-aware code that enforces permissions throughout your app.

  • Enable RBAC from the app settings to add role-based access control to your generated code
  • Define roles (admin, editor, viewer) and permissions—GenMB generates code that checks permissions on every protected action
  • The RBAC SDK integrates with your chosen authentication provider (Clerk, Supabase Auth, or custom)
  • Architecture-aware generation means permission checks are added to routes, components, and API calls automatically
  • Test different roles in the preview to verify permission boundaries work correctly before deploying

Common Mistakes to Avoid

Vague prompts lead to vague results. Here's how to be more specific.

Instead of

“Make me an app”

Try this

“Create a habit tracker where users can add daily habits with names and frequencies, mark them complete each day with a checkbox, and see a weekly streak count showing consecutive days completed”

Instead of

“Fix it”

Try this

“The submit button isn't working—when clicked, nothing happens. It should validate the form fields, save the data to localStorage, clear the form, and show a green success toast message for 3 seconds.”

Instead of

“Make it look better”

Try this

“Use a modern design with 8px rounded corners on all cards, subtle box shadows (0 2px 4px rgba), a #1e40af blue for headers, and white #ffffff background with #f8fafc for card backgrounds”

Instead of

“Add everything”

Try this

“Add a search bar in the header that filters the item list as the user types, showing only items where the title contains the search text (case-insensitive). Show "No results found" when the filter returns nothing.”

Instead of

“It doesn't work”

Try this

“The date picker shows dates in MM/DD/YYYY format but I need DD/MM/YYYY for European users. Also, clicking a date should close the picker automatically.”

Advanced Techniques

Level up your GenMB skills with these power-user strategies.

Vibe Coding Essentials

Vibe coding is building apps by describing them in natural language. To vibe code effectively: be specific about features and design, start simple and iterate, use the Visual Editor for quick tweaks and prompts for functional changes, and leverage Agent Mode for complex multi-page apps. GenMB's Code Healer automatically fixes errors so you can focus on the vibe, not the bugs.

GenMB Code for Precision Edits

Use GenMB Code (Pro feature) when you need to make targeted changes to specific files. It provides an AI coding assistant that can read your files, understand context, and make precise edits without regenerating the entire app. Perfect for bug fixes, small tweaks, and learning how the generated code works.

Multi-Step Builds

For complex applications, break your build into stages. First generate the core structure and navigation. Then add individual features one at a time through chat. This gives you more control and makes debugging easier if something goes wrong.

Complex App Architecture

For complex multi-page apps, GenMB's AI Architecture Planner automatically designs your data model, page structure, and state management before generating code. Describe the overall structure: "Create a dashboard with Home, Analytics, Settings, and Profile pages." The AI generates hash-based routing, framework-specific stores, and a consistent design system with CSS variables and dark mode.

Asset Management

Upload images, fonts, and data files before generating. Reference them in your prompt: "Use the logo.png I uploaded in the header" or "Load the products data from products.json and display as cards." The AI will integrate your assets into the generated code.

Version Control Strategy

Create deliberate checkpoints before major changes. Name your versions descriptively ("before adding auth", "working dashboard v1"). This makes it easy to compare versions and rollback selectively if needed.

Testing Before Deployment

Before deploying, test all interactive elements: fill out forms with valid and invalid data, try edge cases like very long text or empty inputs, check mobile responsiveness by resizing the preview, and verify all buttons trigger the expected actions.

Combining Integrations

Enable multiple integrations for full-stack apps. For example, use Supabase for database + Clerk for auth + Stripe for payments. GenMB has 45+ integrations across payments, auth, storage, analytics, and AI. Use the Env Vars panel to securely manage API keys—they auto-inject into deployments and sandboxes.

Using Figma Import

Import your Figma designs to generate code that matches your mockups. Use auto-layout in Figma for best results—it translates directly to CSS flexbox. Name layers descriptively (e.g., "hero-section" instead of "Frame 47") since names become CSS class names. Start with a single page or section, verify the output, then import more.

Automation Workflows

Build backend logic visually with Automation Workflows. Connect nodes on a canvas for HTTP requests, email, conditional routing, delays, AI processing, and data transformations. Trigger via webhooks or schedules. Start with simple single-node workflows, test each step, then chain them into complex automations.

Troubleshooting

Common issues and how to resolve them.

App looks different than expected

Be more specific about visual details. Include exact colors (hex codes), spacing values, font sizes, and layout descriptions. Reference specific UI patterns: "Use a card grid like Pinterest" or "Navigation like GitHub".

Feature doesn't work correctly

Describe the exact behavior you expect. Instead of "add sorting", say "clicking the Price column header should sort products ascending, clicking again sorts descending, with an arrow icon indicating direction".

Code is too complex to understand

Try Vanilla JS instead of React for simpler apps. Or ask the AI to add comments: "Regenerate with detailed comments explaining each function". The simpler framework produces more readable code.

App is slow or unresponsive

Check if you're using React for a simple app (framework overhead). Also verify you don't have heavy operations in render loops. Ask the AI to optimize: "The list is slow with many items—add virtualization".

Changes break other features

Make smaller, isolated changes. Instead of "redesign the whole header", do "change header background color" then "add search bar" then "update logo" separately. Use version history to identify which change caused issues.

Frequently Asked Questions

How detailed should my initial prompt be?▼
Start with enough detail to describe the core functionality, main features, and visual style—typically 3-5 sentences. You don't need to specify every detail upfront; you can refine through chat. However, more specific prompts generally produce better first-generation results, saving iteration time.
Should I always use Agent Mode for complex apps?▼
Agent Mode is best for apps with 5+ features or multiple screens. For moderately complex apps (3-4 features), standard mode often works well if you describe everything clearly. Try standard mode first—you can always enable Agent Mode and regenerate if the result isn't structured well enough.
How do I know when to stop iterating?▼
Stop when the app meets your functional requirements and looks acceptable for its purpose. For prototypes and MVPs, "good enough" is often the right target—you can always improve later. For production apps, test with real users before extensive polish.
Can I combine generated code with my own code?▼
Yes. Export the generated code and add your own JavaScript, connect to your APIs, or integrate with your backend. The generated code uses standard patterns and has no proprietary dependencies, making integration straightforward.

Put these tips into practice

The best way to learn is by doing. Start building and apply what you've learned.

Back to Getting Started