BananaForge

• 

  Fashion Design Concept Render

• 

  Spatial Design Concept Render

• 

  Industrial Design Concept Render

Inspiration

The conceptual phase of design is often the biggest bottleneck for creators. Translating an existing design or reference photo into a new, high-fidelity, client-ready render traditionally requires hours of tedious 3D modeling or CAD work. BananaForge was inspired by the need to bridge this gap through advanced image-to-image transformation. I wanted to build an "agentic" design assistant capable of understanding the physical and spatial properties of a reference image. By focusing strictly on Industrial, Fashion, and Spatial design, the application empowers designers to rapidly iterate on structural geometry, materials, and environments without losing the original "Visual DNA" of their concepts.

How it was built

BananaForge is a full-stack application built with a React frontend and a Node.js/Express backend, leveraging Gemini text models and Nano Banana image models for generation.

• The Analysis Layer: When a user uploads an image, or just pastes a screenshot onto the application, the backend uses Gemini text models to automatically classify the design domain and extract a highly structured JSON profile of its physical properties.
• The UI/UX & Feature Set: The React frontend consumes this data to dynamically generate a context-aware control panel based on the detected category:
  • Industrial Design: Features the Material Matrix (surgical part-by-part material/finish swapping), CMF Storyteller (applying cohesive Color, Material, and Finish themes), Stress Test (simulating physical wear-and-tear), and Exploded View (visualizing internal assembly).
  • Fashion Design: Includes the Seasonal Adapter (adapting fabrics for different weather), Photoshoot Director (placing the garment in specific real-world environments with precise lighting), and Material Lab (where users can conceptualize the target garment, fabric type, pattern, and color).
  • Spatial Design: Offers Redesign Objects (AI staging to swap styles/materials of specific furniture), Remove Objects (intelligent decluttering), and Environment Control (adjusting lighting moods and time of day).
• The Generation Engine: The user's parameters are routed through Node.js to construct highly specific, dynamic prompts. These dynamic prompts are fed into Nano Banana image models to ensure the generated image-to-image result is highly consistent and adheres strictly to the structural integrity of the original upload.

Challenges faced

The biggest technical hurdle was getting to the point where every single generated result was consistent. Generative AI is inherently unpredictable, and my biggest challenge was figuring out how to tame the model so it wouldn't hallucinate entirely new shapes or ruin the geometry when a user just wanted to change a surface material. The solution was engineering a robust system of dynamic prompts. By carefully controlling the variables and strict behavioral instructions injected into the prompt based on the user's specific UI selections, I was able to lock down the structural constraints and force the AI to only manipulate the targeted elements consistently.

What I learned

Building BananaForge drastically leveled up my full-stack development skills, but my biggest learning was how to achieve deterministic results using AI. Generative models are probabilistic by nature, but by building a strict, programmatic wrapper around them—using structured JSON data extraction to feed highly constrained dynamic prompts—I learned how to turn a chaotic AI image generator into a precise, reliable engineering tool.

What's next for BananaForge

The current version of BananaForge successfully proves that we can achieve deterministic, high-fidelity design results through agentic deconstruction. Moving forward, the roadmap is focused on two major pillars:

1. Category Expansion: I plan to expand the engine's "Visual DNA" library to include categories like Spatial Architecture (exterior building rendering) and Visual Branding, allowing the tool to handle a full 360-degree design workflow from product to environment to identity.
2. Pro-Mode (Custom Instructions): While the current system uses AI-generated dropdowns to guide the user through logical material and physics constraints, I am developing a "Custom Instruction" layer. This will allow professional users to bypass the guided UI and provide raw natural language prompts that the agent will then validate and execute against the original image's structural integrity.

Ultimately, BananaForge will evolve into a comprehensive "Multimodal Design Studio" where the AI acts not just as a renderer, but as a knowledgeable design partner that understands the rules of the physical world.

Built With

• css
• express.js
• google-gemini-api
• javascript
• nano-banana-image-models
• node.js
• react