基於Gemini 3 Pro 模型、使用Google AI Studio 和Cursor 在幾小時內建立部落格網站 剛入職Google 的 @fofrAI 分享了他基於Gemini 3 Pro 模型，使用Google AI Studio 和Cursor 分階段迭代配合，幾個小時內從零構建個人博客“fofr” 的全過程。 建置過程採用迭代式提示驅動開發，分階段推進： 1. AI Studio原型設計：在Google AI Studio 中，以React 框架為基礎，透過詳細提示產生部落格原型。初步提示強調“優美排版、居中佈局、理想行長”，並指定支援圖像、視訊、生成媒體、程式碼區塊和提示卡片的組件。隨後迭代添加“monstera 風格”主題（溫暖、紙張般質感，使用Merriweather 標題字體和Inter 正文字體），並在首頁展示最新帖子。設計採用行動優先（max-w-3xl 寬度），導出程式碼後進入本機開發。 2. Cursor 精進與功能擴充：下載程式碼至GitHub 倉庫，使用Cursor 安裝依賴並本地運行。新增多頁路由（react-router-dom）、Markdown 解析（react-markdown 處理自訂元件），並建立posts 目錄存放範例內容。關鍵增強包括： · 媒體元件：MediaCard 支援影像/影片顯示、提示複製、全螢幕檢視和下載；lightbox 模態框允許左右導航多張影像或多步驟提示迭代。 · 互動元素：CompareSlider 比較生成物、PromptCard 突出提示工程範例。 透過截圖回饋Gemini 修復視覺bug，確保組件無縫整合。 3. 程式碼品質與部署最佳化：引入ESLint 外掛程式和GitHub 工作流程自動檢查程式碼。託管於Vercel，資產儲存在Cloudflare R2。 Open Graph 影像初始嘗試Vercel OG 套件失敗，轉用satori 腳本靜態產生；favicon 簡化為Emoji 圖示。封面圖像則由Nano Banana Pro 模型基於部落格Markdown 和截圖生成。 使用的技術與工具· AI 模型核心：Gemini 3 Pro（AI Studio 原型、Cursor 程式碼產生/偵錯）。 · 前端堆疊：React 18+、TypeScript、Tailwind CSS、lucide-react 圖示庫。 · 輔助工具：react-markdown（解析）、Vercel（部署）、Cloudflare R2（儲存）、ESLint（品質控制）。 遇到的挑戰與解決方案· 多頁導航限制：AI Studio 不擅長複雜路由，先單頁設計，然後手動實現。 · 程式碼雜亂：AI 產生易生冗餘，早引入linter自動修復。 · 動態影像產生：Open Graph 最耗時，多次迭代後簡化靜態方案。 · 視覺調試：依賴截圖+AI 提示高效解決，無需手動編碼。 閱讀原文
