In Episode 01 of Building Websites with AI, I begin building VideoCreation.info from the very beginning and document the complete process as I go.
This is not a polished “here’s how to do it” tutorial where everything is already planned and finished. You’ll see the actual workflow, experiments, decisions, tests, and AI tools I use while building the website.
🛠️ Tools & Resources Mentioned in This Video:
Here are the main tools and resources I used while building VideoCreation.info in this episode:
🧠 Obsidian
My private Vault for organizing project knowledge, ideas, pages, code, prompts, and planning.
🔗 https://obsidian.md/
🗄️ Systemize Space — The Vault
My public workspace for prompts, workflows, design systems, knowledge, and AI tools.
🔗 https://www.systemize.space
🤖 Google Gemini
Used for AI-assisted prompting, design, and code generation.
🔗 https://gemini.google.com
📚 Gemini Notebook
Used to organize the Knowledge Feeder files and create a connected knowledge base with the Gemini Gem.
🔗 https://notebook.google
⚙️ Systeme
Used to build and publish the website.
🔗 https://www.systemize.space/free-access
In this first episode, I cover:
⚡ Building my own private Vault.
🧬 Creating the Brand DNA for the project.
🎨 Setting up the visual identity, colors, and design direction.
🧱 Building the website header and footer.
📚 Setting up a Knowledge Feeder with project knowledge.
🤖 Using Gemini and Notebook to create an AI-powered workflow.
💬 Creating a custom Gemini Gem.
🧠 Generating prompts for website sections and pages.
💻 Creating and testing AI-generated HTML, CSS, and JavaScript.
🎬 Activating advanced design and web motion workflows.
📱 Testing the results on desktop and mobile.
🚀 Adding the generated code to the live website.
🧪 Experimenting with AI by simply describing what I want.
One of the main things I wanted to test in this episode was whether I could create a powerful AI website-building workflow using the free versions of Gemini and Notebook.
The answer is: yes.
By connecting project knowledge, brand guidelines, design systems, and specialized instructions, I can create a workflow that helps generate prompts, ideas, designs, and code specifically around the project I’m building.
And the interesting part is that you don’t always need to write complex prompts.
Throughout this episode, I also experiment with simply chatting with the AI and describing what I want, testing how far we can push the workflow by refining designs, changing individual elements, adding motion, experimenting with 3D effects, and improving the overall experience.
The website we’re building in this series is:
VideoCreation.info an AI Video Creation Information Hub and learning platform.
The goal is to create a place where people can explore AI video models, generators, prompts, terminology, tools, and other resources related to AI video creation.
This is only the beginning.
In the next episode, I’ll start building the actual pages of VideoCreation.info and continue documenting the process from the ground up.
If you’re interested in AI website building, vibe coding, Gemini, AI-generated code, HTML, CSS, JavaScript, web design, AI workflows, and building real projects with AI, subscribe and follow the journey.
💬 Have a question or something you want me to cover while building the pages? Leave a comment below. I may take it into the next episode.
👍 If you enjoyed the video, like and subscribe to follow the progress.
🔗 Follow the Project
Project 01: VideoCreation.info
Follow the progress as I build the website from scratch using AI.
00:00 Introduction
00:54 Step 01 — Build Your Private Vault
04:21 Step 02 — Set Up Your Brand DNA
18:18 Step 03 — Build the Header & Footer
36:26 Step 04 — Building the Pages
🧠 Topics covered in this video
Building Websites with AI • AI Website Builder • Gemini AI • Google Gemini • Notebook • Gemini Gems • AI Coding • Vibe Coding • HTML • CSS • JavaScript • Web Design • AI Web Design • Brand Identity • Brand DNA • Design Systems • Website Development • Responsive Web Design • Web Motion Design • AI Workflows • Prompt Engineering • AI Prompts • Building a Website from Scratch • VideoCreation.info
#BuildingWebsitesWithAI #GeminiAI #AICoding #VibeCoding #WebDesign #AIWebDesign #WebsiteBuilding #Systemeio #SystemeioAI
