Nano Banana + Gemini 3 = S-TIER UI DESIGNER

Key Concepts

• Nano Banana: An image generation model used for high-creativity UI/UX mockups.
• Gemini 3: A reasoning model used for design planning, PRD (Product Requirement Document) generation, and code implementation.
• UI Mockup (Mo): A visual representation of a design used as a "source of truth" for coding agents.
• Parallax Effect: A technique where background elements move at a different speed than foreground elements during scrolling.
• Coding Agent: An AI tool (e.g., Super Design) that translates design specs and visual assets into functional code.
• Vision Mode: A feature allowing AI models to "see" and incorporate specific branding assets (logos, fonts) into generated designs.

---

1. The Four-Step Design Workflow

The speaker outlines a systematic process to bridge the gap between creative vision and technical implementation:

1. Design Planning: Use a reasoning model (Gemini 3) to define the product context, content hierarchy, layout, and spacing.
2. Creative Mockup Generation: Use Nano Banana to generate high-creativity UI mockups that exceed the standard capabilities of coding agents.
3. Asset Extraction: Use Nano Banana to generate high-resolution (4K) image assets (e.g., 3D objects) from the mockup to be used in the final build.
4. Implementation & Refinement: Feed the assets and the mockup into a coding agent to build the interface, followed by iterative prompting to fix discrepancies.

---

2. Detailed Process & Methodology

Step 1: Planning with Gemini 3

• Contextual Input: Provide the AI with screenshots of existing apps and specific branding goals.
• Reference Images: Limit references to a maximum of three images to avoid confusing the model. Recommended sources include Dribbble, Mobbin, and UI-specific galleries.
• ASCII Wireframing: Ask the model to generate an ASCII-based layout to align on structure before moving to visual generation.

Step 2: Generating UI Mockups with Nano Banana

• Why Nano Banana? Unlike coding agents, which prioritize technical feasibility, Nano Banana focuses on visual creativity (e.g., tilted glass-morphism, complex 3D elements).
• Efficiency: It generates results in ~30 seconds, whereas coding agents take minutes and often produce "standard" layouts.

Step 3: Asset Preparation

• Extraction: If a mockup contains complex 3D elements, prompt the model to isolate these as high-resolution assets.
• Background Removal: Use specialized Replicate models to remove backgrounds from assets, ensuring they are ready for web integration.
• Parallax Animation: Use Replicate to generate floating 3D assets with parallax movement for scroll-based interactions.

Step 4: Implementation via Coding Agent

• Pixel-Perfect Strategy: Instead of asking for a full build immediately, ask the agent to analyze the mockup, identify "difficult parts," and create a task-based plan.
• Iterative Correction: If the code output deviates from the mockup, use the "Suggest Improvements" prompt to have Gemini 3 annotate the design and provide feedback to the coding agent.

---

3. Real-World Application: Super Design

The speaker demonstrates this workflow using their platform, Super Design, which integrates these steps:

• Plan Mode: Allows users to upload style guides, fonts, and logos.
• Vision Mode: Ensures the AI recognizes and correctly applies specific brand assets.
• Iterative Feedback: If the AI fails to use the correct logo, the user can "at-mention" the specific asset file to force the model to prioritize it in the next iteration.

---

4. Key Arguments & Insights

• Separation of Concerns: Do not ask coding agents to be creative designers. Use image models (Nano Banana) for the "look and feel" and coding agents for the "implementation."
• The "Source of Truth" Principle: The UI mockup generated by Nano Banana serves as the visual contract. By providing this to the coding agent, you significantly increase the quality of the final output.
• Cost-Effectiveness: The speaker notes that processing images through these models is extremely cheap (e.g., ~$1 for 2,000 images).

---

5. Notable Quotes

• "You don't want to give more than three different reference images; if you dump too many... you often confuse the model."
• "There is no amount of prompt you can give a coding agent and expect it to design something like this [tilted glass UI] out of the box."
• "A lot of complex front-end tasks don't need to be handled by code; they can be handled by high-quality image assets."

---

6. Synthesis

The core takeaway is that high-quality AI design is not achieved through a single prompt, but through a hybrid workflow. By leveraging the reasoning capabilities of Gemini 3 for planning, the creative visual generation of Nano Banana for mockups, and the technical execution of coding agents for implementation, designers can produce professional-grade interfaces that are both visually unique and functionally sound.