← Atlas · Topics: ai-interfaces, inspiration, agents-and-prompts
Banani
- Site
- banani.co
- Type
- ai builder
- Verdict
- Useful
- Licence
- Conditional licence, proprietary paid
proprietary-paidFree browsing and a limited free account; paid tiers add generation capacity and export options. Terms retain user content ownership, license it to operate the service and allow de-identified free-account content to train models for accounts created on or after 2026-06-23; Banani's own interface and materials remain proprietary. - Agent channels
- mcp
- Pricing
- freemium
- Reviewed
What it is
Banani combines a browser based AI UI editor with a public library of app screens. The reference library is viewable without an account: an app page groups screens by flow, and each screen page shows a tall mobile capture with previous and next navigation. The reviewed Airbnb home screen includes destination search, a horizontal category row, a total-price switch and a large listing card. In the editor, prompts and visual references can produce editable multi-screen prototypes; the product advertises Figma and HTML/CSS export, and an MCP connection for coding agents.
When to open it
- Browse a real app flow when you need examples for onboarding, search, booking, checkout or account screens.
- Use a prompt or screenshot as a starting point for a prototype that needs several connected screens.
- Connect the MCP when an agent needs to read a Banani design during implementation; setup is done inside the account.
Most useful
- Public reference screens: Airbnb flows group onboarding, search, listing details, booking, reviews and profile screens. Individual screen pages are directly browsable without a login.
- Flow-level browsing: the public app pages label device and product categories and organize screens into named tasks, making it easier to study a sequence instead of an isolated shot.
- Prototype editing: the product describes prompt-based multi-screen generation, screenshot or Figma references, manual token edits and interactive prototypes.
- Agent handoff: the pricing FAQ says MCP is available on all plans; Figma and code export are paid-plan features according to the same page.
Using it with agents
Banani's MCP connects designs to coding agents including Codex. The public instructions say to set it up from inside the app. Public reference pages can be opened directly by an agent without a sign-in; editing, private project access and exports require an account and follow its plan limits.
Watch out for
- The service is an AI editor, not a source of guaranteed production-ready UI. Inspect and test generated flows before implementation.
- The free plan's credit description is inconsistent: the pricing page says monthly credits and daily refills, while Banani's help article describes a one-time free bundle with no refills. Check current account limits before planning around them.
- The terms say users keep ownership of their designs and prompts, but grant Banani a service license. For accounts created on or after 2026-06-23, de-identified free-account content may be used for model training; paid-plan content is excluded.
- Treat displayed brand screens as references. The terms restrict copying Banani's own site and platform materials; this does not grant rights to third-party app designs or assets shown in the library.
Reusable ideas
- Group reference screens by the task they support, then make each screen directly addressable.
- Put a full-size device capture in a quiet page with neighboring screens one step away, so the UI remains the focus.
- Let a prototype workflow move from reference to edits to implementation export without hiding which steps need an account or paid plan.