基於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 提示高效解決,無需手動編碼。 閱讀原文
正在加载线程详情
正在从 X 获取原始推文,整理成清爽的阅读视图。
通常只需几秒钟,请稍候。
