The Greatest Gemini 3 Design Workflow

The video addresses the misconception that Gemini 3 can one-shot amazing landing pages, revealing that multiple tools are actually required. Google has released numerous experimental tools powered by Gemini 3 and Nano Banana, but doesn't provide an integrated way to use them together. The presenter promises to share a complete workflow that combines these tools effectively. This introduction sets up the expectation that the video will reveal a comprehensive, multi-tool approach rather than a simple single-prompt solution.

WISC (powered by Nano Banana) solves the consistency problem in AI-generated animation frames by using a subject-scene-style framework. The tool allows users to provide simple prompts and update details step-by-step for each sequence, with Gemini 3 acting as a middle layer that converts simple words into detailed prompts. The presenter explains the importance of clearly defining the subject, visual intent, and level of detail to maintain structural continuity across keyframes. WISC's core strength is combining reference images for better control, unlike Nano Banana (which requires extensive prompts) or Mix Board (designed for mood boards). The example demonstrates creating a camera with specific lens reflections, resolution, and depth requirements, with the ability to iteratively refine results through simple change requests.

The presenter demonstrates creating the ending keyframe for the camera animation—a technical cutaway showing internal lens layering. The process involved prompting WISC to generate a side angle view with the lens components exposed, specifying how to layer internal lenses and background appearance. The first attempt incorrectly showed internal circuitry, but a simple correction prompt successfully generated the desired image showing only lens layering. This section illustrates WISC's iterative refinement capability and the importance of specific technical details in prompts. The goal was to create distinct first and last frames that could later be connected through animation.

Google Flow combines Gemini for story planning, Google's image models for character design, and VIO for video content creation. Unlike WISC's animations (which animate single images), Flow connects multiple keyframes together. The presenter used the frame-to-video option with starting and ending frames, emphasizing that prompts must describe how the starting frame logically leads to the ending frame, including animation flow, transition details, and animation style. The first attempt failed with incorrect spin direction and ending frame, but re-prompting with necessary changes produced the correct smooth transition. The free tier limitation is mentioned: 180 monthly credits with VIO 3.1 using 20 credits per video, allowing up to 9 videos per month depending on region.

Flow's MP4 output can't be used directly in hero sections because it's harder to map scroll animations with video formats. Converting to WebP format solves this because WebP is treated as an image on the web, eliminating the need for media player wrappers. The conversion process involved uploading the MP4 to a free online converter and setting quality to produce the best animated WebP. WebP files are more compact, deliver improved performance, and make it easier to map scroll interactions for short-form animated content. The converted file was added to the public directory of a newly initialized Next.js project where all assets reside.

The presenter explains prompting Claude in XML format because Claude's models are optimized for understanding XML, allowing them to parse structured intent more reliably and reason over each section independently. The prompt structure included context tags (describing what to build, asset locations, and how scroll-through animation should work), requirement tags, animation behavior tags, and implementation details with constraints and required output. This structured approach enabled Claude to automatically implement the animation exactly as intended. The section emphasizes the importance of prompt structure over simple natural language requests when working with AI coding agents for complex tasks.

The hero section looked good, but other components appeared generic because they relied on vanilla CSS instead of established component libraries. Hero UI was chosen for its Apple-style design, built on Tailwind CSS and Framer Motion for component animations. The library supports Next.js, Vite, and Laravel with two installation methods: project-wide installation or individual component installation. The presenter used individual component installation through Claude, prompting it to replace existing components with Hero UI equivalents. This replacement significantly improved the website's professional appearance and visual quality, transforming it from a generic AI-generated look to a polished, production-ready design.

User retention on landing pages depends on engaging UI within the first few seconds, and motion helps guide visitor attention to important features. Motion.dev is a free, open-source library offering ready-to-use animations that abstract the complexity of vanilla JavaScript implementation. The library handles DOM updates internally and automatically syncs animations with scroll positions, eliminating the need to manually track scroll events. Motion components use start and end states defined in props, with the library handling transitional logic automatically. The presenter prompted Claude to implement parallax and scroll animations, which improved user experience by directing attention toward key page sections.

Instead of describing page sections manually, 21st.dev provides inspiration galleries showcasing components built by multiple designers using libraries like Aceternity UI, Prism UI, Coconut UI, and Magic UI. The platform's key feature is AI-optimized prompts specifically tailored for coding agents, eliminating the need for manual guidance. These prompts include project requirements (ShadCN, TypeScript support), complete code with directory instructions, dependency code with paths, required NPM packages, and implementation guides detailing integration steps and project-specific customization. The presenter copied prompts for a call-to-action section and footer, and Claude integrated them while intelligently adding motion effects and customizing content (removing irrelevant GitHub icons, adding camera product-relevant icons) to fit the specific landing page context.

The video concludes with a request for viewer support through the Super Thanks button to help the channel continue producing similar content. This brief closing thanks viewers for watching and promises future videos. It serves as a standard YouTube video ending encouraging audience engagement and channel support.