I Built a $10,000 Animated Website Using Google AI Studio (Ultimate Guide)
三句話摘要
無代碼無成本用AI工具創建專業電商網站，並在自由工作平台銷售賺錢的完整教程。 利用AI工具的免費額度與智能代碼生成能力，任何人都可以零成本、無需編碼或設計經驗快速創建專業級網站，並透過自由工作平台直接變現。 全免費工具堆棧完成專業成果：透過Pinterest→ChatGPT→Google Flow→Gemini→Netlify的流程，每個環節都用免費額度或付費級工具的免費試用，最終交付動畫、響應式、專業級網站，投入成本為零。
重點整理
重點- 1
全免費工具堆棧完成專業成果：透過Pinterest→ChatGPT→Google Flow→Gemini→Netlify的流程，每個環節都用免費額度或付費級工具的免費試用，最終交付動畫、響應式、專業級網站，投入成本為零。
- 2
對話式修正代替手工編碼：利用截圖+Prompt與AI溝通修改，無需理解代碼邏輯。檢查到英雄區圖片遮擋鞋子時，只需給Gemini看截圖和「移除多餘圖片」的指令，45秒內自動修正所有代碼問題。
- 3
迭代優化直到滿意的工作流：Google Flow先生成2個視頻版本供選擇，Gemini代碼生成後若有不滿意之處，持續用截圖+自然語言反饋，系統會重新生成代碼直到滿足要求，真正實現「邊看邊改」。
實用技巧與重點
乾貨- 工具與模型
- Pinterest：免費圖片庫
- ChatGPT：圖片優化（支援上傳照片重新生成）
- Google Flow：視頻生成
- 模型：Gemini Omni Flash、VEO 3.1 Lite、VEO 3.1 Fast、VEO 3.1 Quality
- 每日免費積分：50
- 成本：生成2支15秒視頻耗30積分
- 日產能：3支視頻
- 生成速度：15-30秒
- Cloudinary：視頻URL託管
- Google AI Studio：使用Gemini 3.1 Pro Preview模型
- Google Cloud：網站管理、部署、觀察性、版本控制、觸發器、網絡、安全管理
- Netlify：拖拽部署，自動生成{project-name}.netlify.app域名
- Anti Gravity：應用導出與桌面版打包
- 銷售平台：Fiverr、Upwork、Freelancer.com
- 關鍵Prompts
- ChatGPT：「I want this photo, make another version and better one with a 16 to 9 frame ratio」
- Google Flow：「I want this photo. Make it into an animated video that is rotating」
- Gemini 3.1 Pro：「Create a modern, professional, clean e-commerce website similar to Amazon. The first page should feature a hero section with a video URL embedded. The video should auto-play silently with smooth movement animation. Design the layout to highlight products clearly with a minimalist, user-friendly interface. Include a contact us section with the email [email]. Add a support me button for buy me a coffee. Ensure the design is responsive, visually appealing, and optimized for fast loading」
- 修正Prompt：「Remove the extra photos that are blocking the shoe, leaving only the shoe itself. Delete the word Amazon everywhere and replace it with Mr. Fred Store. Make the design look neat, modern and professional」
- 發布時間與成本
- 投入成本：0美元
- 網站生成時間：1-2分鐘
- Netlify部署時間：3-5分鐘（構建→部署→清理→後處理四階段）
- 域名：自動分配.netlify.app二級域名
結論
結論“利用AI工具的免費額度與智能代碼生成能力，任何人都可以零成本、無需編碼或設計經驗快速創建專業級網站，並透過自由工作平台直接變現。”
完整解析
詳細這支教程展示了如何用AI工具民主化網站開發。講者以「Mr. Fred's Store」這個真實案例，完整演示從零到發布上線的全鏈路，核心邏輯是利用各大科技公司提供的免費額度與免費模型，堆砌出專業級產品交付能力。
整個流程分三個主要環節。第一環節是資源準備與優化。講者先從Pinterest下載鞋子圖片（Pinterest提供免費無限圖片庫），然後上傳到ChatGPT，用Prompt「製作一個16:9比例的更好版本」，ChatGPT在15秒內就生成了優化版本。這一步很關鍵——初始圖片可能比例不對或品質普通，但透過AI增強，變成適合放在網站上的高品質素材。
第二環節是動畫視頻生成。講者將優化後的圖片上傳到Google Flow，用Prompt「把這張照片製作成旋轉的動畫視頻」，選擇Gemini Omni Flash模型（相比VEO 3.1系列更節省免費積分配額），設定16:9比例和生成2個版本。30秒內就出現了兩支15秒的旋轉鞋子視頻。講者的「選二選優」策略很實用——免費生成兩份版本，選最滿意的那一支，不用一次一次重新生成。視頻完成後，講者上傳到Cloudinary獲取視頻URL（為後面餵給Gemini的代碼生成器使用）。
第三環節是網站代碼生成與迭代。這是整個流程的靈魂。講者在Google AI Studio中使用Gemini 3.1 Pro Preview，輸入一個詳盡的Prompt，要求「創建現代專業的電商網站，類似Amazon，英雄區嵌入視頻URL自動靜音播放，展示產品、聯繫方式、Buy Me A Coffee按鈕，響應式設計、快速載入、專業信任感」。講者同時粘貼了視頻URL和Amazon網站的參考鏈接給AI學習風格。Gemini在1-2分鐘內生成了完整的HTML+CSS+JavaScript網站。
生成後講者進行迭代修正。他用截圖功能把網站某區塊拍下來，上傳給Gemini，指示「移除擋住鞋子的多餘圖片」、「刪除所有Amazon文字改成Mr. Fred Store」、「讓設計更乾淨現代專業」。Gemini在45秒內修改了代碼。當發現產品圖片未顯示時，講者又上傳截圖，用簡單的「解決這個問題」Prompt，Gemini自動除錯並修正。整個過程無需講者碰一行代碼，完全透過視覺反饋與對話式指令完成迭代——這才是AI時代網站開發的真正變革。
最後是部署發布。講者在Google AI Studio中點擊「Export to Anti Gravity」或直接下載ZIP檔案。在Netlify中，只需拖拽ZIP檔到瀏覽器頁面，Netlify自動執行建構→部署→清理→後處理四個階段（總耗時3-5分鐘），網站即刻上線。系統自動分配{project-name}.netlify.app域名。講者在Chrome中驗證了網站實時運作，英雄區的動畫鞋子流暢旋轉，各個聯繫區塊清晰可見，手機和平板的響應式設計都正常運行。
變現環節同樣簡潔。講者介紹三個自由工作平台：Fiverr（Web Development分類，設置賣家帳戶即可列服務）、Upwork（AI Services和Development & IT分類有源源不絕的網站開發需求）、Freelancer.com（HTML/CSS/網站設計等各類分類齊全）。邏輯很清晰——現在任何人都能用這套流程快速產出定制化網站，直接在這些平台上以2000-5000美元的報價售出。過去網站開發是技術門檻與時間成本雙高的領域，AI改變了整個遊戲規則。
關鍵時刻
Pipeline v2帶時間戳的重點，會在逐字稿層級分析上線後產生。目前請先透過原始影片觀看。
事實查核
Pipeline v2說法查證是下一次管線升級的一部分。KeyFrame 只會顯示它真正能驗證的內容。
