Best Practices

Get the Most Out of
GenMB

Learn the techniques that power users rely on to build better apps faster.

These best practices come from thousands of apps built 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. Perfect when you want to learn or when performance is critical.
  • React: Best for complex state management, interactive dashboards, multi-component architectures, and apps you plan to extend significantly. Component reusability makes maintenance easier.
  • Vue: Best for interactive forms, medium complexity apps, and projects where you want a balance between simplicity and power. Excellent for data-driven interfaces.
  • When unsure, start with Vanilla JS—you can always regenerate with React later if you need more structure
  • Match framework to complexity: Using React for a simple tip calculator adds unnecessary overhead. Using Vanilla JS for a complex dashboard makes the code harder to maintain.

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

Using Integrations

Add Supabase, Stripe, and Clerk to your apps with the Integrations panel. GenMB 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.
  • Integrations are per-app—different apps can use different services or configurations
  • Your API keys are stored securely and only used during code generation

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.

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

When building apps with multiple screens or views, describe the overall structure first: "Create a dashboard app with sidebar navigation containing Home, Analytics, Settings, and Profile sections. Each section should be a separate view that shows when clicked." Then populate each view separately.

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. When you describe features, the AI will use the appropriate integration: "Add user login with profile page" uses Clerk, "Save user data to database" uses Supabase, "Add subscription checkout" uses Stripe.

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/Vue 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/Vue 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