Brief Summary
This video demonstrates how to use Notebook LM and Google Gemini to transform research notes into a fully functional, modern website without writing any code. It covers using deep research in Notebook LM, planning the website structure with Gemini, generating the website code using Gemini Canvas, and refining the UI/UX for a professional look.
- Utilise Notebook LM for in-depth research.
- Employ Google Gemini to plan and structure the website.
- Generate website code using Gemini Canvas without manual coding.
- Refine the UI/UX with AI to achieve a professional, modern design.
Introduction
The video introduces a method to convert a research notebook into a fully functional website without writing any code. It challenges the conventional use of tools like Notebook LM and Google Gemini, presenting a workflow that combines deep research with AI-powered website generation, resulting in a premium SAS-style website.
Deep Research with Notebook LM
The process begins by opening Notebook LM and creating a new notebook with a specific topic: how small businesses and startups can use AI to scale operations and increase efficiency in 2026. Instead of a regular search, the deep research option is selected to scan detailed reports, white papers, and trusted sources for high-quality information. The tool gathers around 67 sources, allowing users to select and include specific sources in their notebook, which are then automatically organised and ready for use.
Planning Website Structure with Google Gemini
The next step involves using Google Gemini, connected to the Notebook LM notebook. The pro model is selected for advanced reasoning. A prompt instructs Gemini to act as a senior web architect, analyse the notebook, and propose a detailed site map and section-by-section structure for a single-page website, specifying content for each section and suggesting a colour palette based on brand guidelines. Gemini then reads the research notebook and creates a structured website blueprint, including a defined brand colour palette, a clear visual aesthetic, and a detailed section-by-section layout.
Generating Website Code with Gemini Canvas
After finalising the structure, the process moves to Gemini Canvas mode. A prompt instructs Gemini to act as an expert web developer and generate the complete website code based on the agreed structure, using the exact text from the notebook. The code is written as a single HTML file using Tailwind CSS, including smooth scrolling and interactive hover effects. Gemini Canvas generates the full website live, allowing users to preview the site, which is fully responsive and optimised. The website includes a functional UI element with a login section. A public link can be generated to share the website.
Refining UI/UX with AI
To further enhance the website, Gemini Canvas is used again with a prompt to act as a senior UI/UX designer and redesign the website to resemble a modern SAS platform, improving typography, spacing, animations, and visual hierarchy. Gemini enhances the design, adding subtle animations, refined typography, tighter spacing, smooth button transitions, and micro-interactions to the login section. A liquid glass-style effect is added to give the website a premium, modern feel.
Conclusion
The video concludes by summarising the workflow: using Notebook LM for deep research, Gemini for website architecture and planning, Canvas for building the website without manual coding, and AI for refining the UI. This process transforms a research topic into a live, professional website powered entirely by AI.
