Back to Browse

How This ANIMATED WEBSITE Was DESIGNED By GEMINI AI (FRAMER Workflow Tutorial)

39.9K views
Dec 8, 2025
16:28

This video breaks down my complete AI-to-Framer website workflow using Gemini AI for idea generation, visuals, and structure — and Framer for building the final animated website. I start by using Gemini AI to generate the creative direction, content, and visual assets. Then I take everything into Figma for layout planning, and finally build the full animated experience in Framer with interactions, smooth transitions, and responsive design. This workflow is designed for anyone exploring: -AI automation for web design -High-productivity design workflows -AI-assisted website creation -Framer development for modern websites -Streamlined design-to-build pipelines If you’re exploring AI workflows, website automation, modern web design, or Framer development, this is a full step-by-step breakdown you can follow for your next project. LINKS: https://google.gemini.com/ https://labs.google/flow/about Get 3 Months of FREE Framer PRO Plan: https://framer.link/jemsee_d Apply this Promo Code while checkout: "partner25proyearly" Time Code: 0:00 Introduction 00:34 Generate Image 03:00 Design in Figma 05:58 Generate Video 07:36 Convert into Transparent Video 08:30 Moving to Framer ---------------------------------------------- Join my community: https://chat.whatsapp.com/Cjbzsaeqafu2YMGjRFlwAG?mode=r_c Get Resources from:https://jemsee.com/resources ---------------------------------------------- Other helpful resources: 🏁 Google Antigravity Just replace Every AI Coder https://youtu.be/0gDAQKBrvP4?si=xDwvuXnEepLZ4F_4 🔎🔥AI Vs WEB DESIGNER: Full LANDING PAGE From SINGLE PROMPT (emergent.sh) https://youtu.be/coJM0U4zoK4?si=yfSM4m5ZbLiRZRas ---------------------------------------------- Book Your 1:1 Framer Session 🔹 1 hour deep dive session → https://topmate.io/jemsee_d/1643048 🔹 30 min session → https://topmate.io/jemsee_d/1643063 ---------------------------------------------- 🌐 Get my Premium Framer Template: https://www.framer.com/marketplace/template/visage/?via=jemsee_d ---------------------------------------------- FAVORITE FRAMER TOOLS: SegmentUI: https://segmentui.com/?aff=jwZq7 Framify: https://framify.design/?aff=jwZq7 FramerAuth: https://framerauth.com/?aff=jwZq7 FramerBite: https://framerbite.com?aff=jwZq7 FrameBlox: https://frameblox.com/?aff=jwZq7 Grayblocks: https://grayblocks.net?aff=jwZq7 Framer Template Library(Pentaclay) : https://pentaclay.com/?aff=jwZq7 To avail 25% discount use this discount code: JEMSEE25 Framer AI Assistant– https://aifra.me/?aff=jwZq7 Discount Code – JEMSEEAI for 15% on your first month ---------------------------------------------- 👉 Contact & Follow Me: Twitter: https://www.twitter.com/@jemsee_d Linkedin: https://www.linkedin.com/in/jemsee-d-922941245/ Instagram: https://www.instagram.com/jemsee_d_ ---------------------------------------------- ai website workflow gemini ai tutorial framer animation tutorial ai web design ai productivity tools ai for designers gemini ai website figma framer workflow web design automation ai website builder If you found this video helpful, please give it a thumbs up and share it with your friends. Your support helps us create more valuable content for you! 🔔 Don't forget to subscribe and hit the notification bell to stay updated with more no-code tutorials and tips for building your online presence! DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to y

Download

0 formats

No download links available.

How This ANIMATED WEBSITE Was DESIGNED By GEMINI AI (FRAMER Workflow Tutorial) | NatokHD