Feedback
Firstly, it's an Alpha release, so join our Slack community and share your feedback there, or write us directly to hi@banani.co!
What is this
A new project type that allows you to generate screens that share components and advanced design tokens.
A new AI agent that allows you to do things like multiple screen generation from one prompt, project-wide editing, etc.
How to create component-based project
Reach out to us to join Alpha group and unlock access.
Once you're in the testing group, click "Auto" when creating a new project and select "Components (Alpha)".
Boom! Now you have a component-based project and can explore it!
Note: there is currently no way to convert existing projects to component-based projects. You need to create a new one.
What you can do
1. Generate screens
Nothing changes here, just like before. Write a prompt and Banani will design the screen as you expect.
2. Generate full flows
Once you've generated your first screen, you can ask the agent to generate entire multi-screen flows from a single prompt. It will create screens one by one automatically.
3. Reusable Components
You can reference other screens in your prompt and the agent will look at them for context, components already used inside.
The agent doesn't create everything as components by default. If you need your edits to reflect everywhere, just mention that a component should be reused across screens. The agent will make it reusable so changes apply globally.
4. Unified history
We're moving away from per-screen history to project-wide history. In top toolbar you now have arrow left and right that you can use to move forward or backward in project history.
It means that you can also finally bring back screens you accidentally deleted!
5. Memory, thinking, clarifications
The agent now has its own memory. Ask it to remember your preferences, brand rules, or anything else -- it will keep using them across your session.
You can also now follow along with what the agent is working on in real time.
The agent also got significantly better at asking the right questions. You can ask it to suggest references, clarify your style, or help align on direction before it starts building.
Roadmap
Dedicated components page to see all project components
Manual text editing for component-based projects
Save screen position changes in a new unified history
The ability to see your past prompts
New design token types: font-sizes, effects and more
Converter of existing projects to component-based projects