Gemini 3 Pro モデル、Google AI Studio、Cursor を使用して、数時間でブログ Web サイトを構築します。 最近 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 は、画像/ビデオの表示、プロンプトのコピー、全画面表示、ダウンロードをサポートします。ライトボックス モーダルでは、複数の画像や複数ステップのプロンプトの反復を左右にナビゲートできます。 • インタラクティブな要素: 出力を比較するための CompareSlider、プロジェクトの例を強調表示するための PromptCard。 スクリーンショットをフィードバックとして提供することで、Gemini は視覚的なバグを修正し、シームレスなコンポーネント統合を実現できます。 3. コード品質とデプロイメントの最適化：自動コードチェックのために、ESLintプラグインとGitHubワークフローを導入しました。Vercelでホストされ、アセットはCloudflare R2に保存されています。Vercel OGパッケージを使用してOpen Graph画像を生成しようとした当初の試みは失敗に終わり、代わりにsatoriスクリプトを使用した静的生成を採用しました。ファビコンは絵文字アイコンに簡素化されました。カバー画像は、ブログのMarkdownとスクリーンショットに基づいたNano Banana Proモデルを使用して生成されました。 使用されるテクノロジーとツール: コア AI モデル: Gemini 3 Pro (AI Studio プロトタイピング、カーソル コード生成/デバッグ)。 フロントエンド スタック: React 18+、TypeScript、Tailwind CSS、lucide-react アイコン ライブラリ。 • サポートツール: react-markdown (解析)、Vercel (デプロイメント)、Cloudflare R2 (ストレージ)、ESLint (品質管理)。 課題と解決策: 複数ページのナビゲーションの制限: AI Studio は複雑なルートに適していないため、最初に 1 つのページを設計し、手動で実装しました。 • 乱雑なコード: AI によって生成されたコードは冗長になりやすいため、これを自動的に修正するリンターが早期に導入されました。 • 動的画像生成: Open Graph は最も時間がかかり、静的ソリューションは複数回の反復後に簡素化されます。 • ビジュアルデバッグ: スクリーンショットと AI プロンプトを活用して効率的なソリューションを実現し、手動コーディングの必要性を排除します。 原文を読む
