1
Account Setup and Workspace Initialization
Navigate to https://www.banani.co/ and sign up for an account. Banani is a web-based platform, so no local installation is required. Upon logging in, you will be greeted by the main dashboard, which serves as your command center for all design projects. Click on the '+ New Project' button to create a fresh canvas. You will be prompted to select a device frame (Desktop, Mobile, or Tablet). For this tutorial, select 'Desktop' to maximize the layout area. Once selected, you will see a split interface: the prompt input panel on the left and the live design canvas on the right. Familiarize yourself with the toolbar at the top, which contains standard editing tools like undo, redo, and export options. Ensure your internet connection is stable, as Banani processes AI requests in the cloud.
Pro Tip
Start with the free tier to explore features. Create a dedicated folder for your learning exercises to keep your main project workspace clean.
2
Crafting Effective Design Prompts
The core of Banani is its natural language processing engine. To generate a design, you must describe it clearly in plain English. Avoid vague terms like 'make it look good.' Instead, specify the platform, style, and key components. A good prompt structure is: [Context] + [Specific Elements] + [Style/Vibe]. For example, instead of writing 'e-commerce page,' write 'A modern e-commerce product page for a luxury watch brand, featuring a large hero image on the left, product details on the right, and a sticky 'Add to Cart' button. Use a minimalist black and white color scheme with gold accents.' Type this prompt into the text box on the left panel. The more specific you are about layout hierarchy and color palettes, the closer the initial output will be to your vision. Banani interprets these descriptors to arrange UI elements logically.
Pro Tip
Use adjectives like 'minimalist,' 'bold,' 'cluttered,' or 'corporate' to guide the AI's aesthetic choices. Specificity reduces the need for manual editing later.
3
Generating and Iterating on Layouts
Once your prompt is entered, click the 'Generate' button. Banani will process the request and populate the canvas with a complete UI layout. This usually takes 5-10 seconds. You might notice that the first generation is rarely perfect; this is normal. The AI provides a strong starting point, not a final pixel-perfect product. Look at the generated design: are the elements aligned? Is the hierarchy clear? If not, do not start over. Use the 'Regenerate' button to get a new variation based on the same prompt. Often, the second or third attempt yields the desired layout. You can also tweak your prompt slightly. If the header was too small, add 'with a prominent, large header' to your previous prompt and regenerate. This iterative process allows you to explore multiple design directions quickly without manual dragging and dropping.
Pro Tip
Keep a 'prompt journal' of what works. If you find a specific phrasing that yields great results for navigation bars, reuse that phrase in future projects.
4
Refining Components and Content
After selecting a base layout you like, move to the refinement phase. Click on individual elements (buttons, images, text blocks) on the canvas to edit them. Banani allows you to replace placeholder text with your own copy. For example, click on a button that says 'Click Here' and change it to 'Buy Now.' You can also swap images by clicking on a placeholder image and selecting 'Replace' from the floating toolbar. Upload your own assets or use Banani's integrated stock library. If a component is in the wrong place, drag it to a new location. The AI understands layout constraints, so it will often auto-align the moved element with its neighbors. Use the properties panel on the right to adjust colors, fonts, and spacing. This step transforms the AI-generated skeleton into a branded, high-fidelity design.
Pro Tip
Use the 'Global Style' feature to apply your brand colors and fonts across the entire page instantly, ensuring consistency without editing each element individually.
5
Responsive Design and Mobile Adaptation
Most digital products require both desktop and mobile views. Banani excels at responsive adaptation. Once you are satisfied with your desktop layout, look for the 'Responsive' or 'Device' switcher in the top toolbar. Toggle from 'Desktop' to 'Mobile.' Banani will automatically attempt to reflow the content to fit a vertical mobile screen. It will stack columns, resize images, and adjust navigation to a hamburger menu. Review the mobile view carefully. AI auto-reflow is smart but not perfect. You may need to manually adjust the order of elements (e.g., moving the 'Call to Action' above the fold on mobile). You can edit the mobile view independently; changes made here do not always propagate back to desktop, allowing for platform-specific optimizations. This feature saves hours of manual responsive coding work.
Pro Tip
Always design for mobile first if your audience is primarily on phones, then expand to desktop. Alternatively, start with desktop and let Banani handle the down-scaling, but always verify the mobile UX.
6
Exporting and Handoff for Development
When your design is finalized, itโs time to share it with developers or stakeholders. Click the 'Export' button in the top right corner. Banani offers several export formats. For developers, choose 'HTML/CSS' or 'React' code snippets if available, which provides clean, semantic code based on your design. For stakeholders, choose 'PDF' or 'Image' for static presentations. You can also generate a 'Share Link' that allows viewers to interact with the design in the browser. If you are handing off to a developer, use the 'Inspect' mode (if available in your plan) to view specific CSS properties like padding, margins, and font sizes for each element. This ensures that the implementation matches your design pixel-for-pixel. The goal is to bridge the gap between design and development seamlessly.
Pro Tip
When exporting code, always review the generated snippets. While Banani produces clean code, you may need to add specific class names or integrate with your existing component library.