Cree un sitio web de blog en horas utilizando un modelo Gemini 3 Pro, Google AI Studio y Cursor. @fofrAI, quien recientemente se unió a Google, compartió todo su proceso de construcción de su blog personal "fofr" desde cero en solo unas horas utilizando un modelo Gemini 3 Pro y una combinación de Google AI Studio y Cursor en etapas e iteraciones. El proceso de desarrollo emplea un desarrollo iterativo basado en indicaciones, que se desarrolla en etapas: 1. Prototipado en AI Studio: Utilizando el framework React en Google AI Studio, se generó un prototipo de blog con sugerencias detalladas. Las sugerencias iniciales enfatizaban una tipografía atractiva, un diseño centrado y una longitud de línea ideal, y especificaban componentes compatibles con imágenes, vídeos, contenido multimedia generado, bloques de código y tarjetas de sugerencias. Las iteraciones posteriores añadieron un tema "monstera" (textura cálida similar al papel, con la fuente de encabezado Merriweather y la fuente Inter body) y mostraron las últimas publicaciones en la página de inicio. El diseño priorizó la compatibilidad con dispositivos móviles (ancho máximo: 3xl) y el código se exportó para desarrollo local. 2. Refinamiento y ampliación de funciones de Cursor: Descargue el código al repositorio de GitHub, instale las dependencias con Cursor y ejecútelo localmente. Añada enrutamiento multipágina (react-router-dom), análisis de Markdown (react-markdown gestiona componentes personalizados) y cree un directorio `posts` para almacenar contenido de muestra. Las mejoras clave incluyen: • Componentes multimedia: MediaCard admite visualización de imágenes y videos, copia de indicaciones, visualización en pantalla completa y descarga; el modal lightbox permite la navegación izquierda y derecha a través de múltiples imágenes o la iteración de indicaciones de varios pasos. • Elementos interactivos: CompareSlider para comparar resultados, PromptCard para resaltar ejemplos de proyectos. Al proporcionar capturas de pantalla como retroalimentación, Gemini puede corregir errores visuales y garantizar una integración perfecta de los componentes. 3. Optimización de la calidad del código y la implementación: Se introdujeron el plugin ESLint y el flujo de trabajo de GitHub para la comprobación automática del código. Los recursos, alojados en Vercel, se almacenan en Cloudflare R2. Los intentos iniciales de generar imágenes Open Graph con paquetes OG de Vercel fracasaron; en su lugar, se empleó la generación estática mediante un script satori. Los faviconos se simplificaron a emojis. La imagen de portada se generó con un modelo Nano Banana Pro basado en Markdown del blog y capturas de pantalla. Tecnologías y herramientas utilizadas: Modelo de IA central: Gemini 3 Pro (prototipado de AI Studio, generación/depuración de código de Cursor). Pila front-end: React 18+, TypeScript, Tailwind CSS, biblioteca de íconos lucide-react. • Herramientas de soporte: react-markdown (análisis), Vercel (implementación), Cloudflare R2 (almacenamiento), ESLint (control de calidad). Desafíos y soluciones: Limitaciones de navegación de varias páginas: AI Studio no es bueno en rutas complejas, por lo que primero diseñamos una sola página y luego la implementamos manualmente. • Código desordenado: el código generado por IA es propenso a la redundancia, por lo que se introdujeron linters desde el principio para solucionarlo automáticamente. • Generación de imágenes dinámicas: Open Graph es el que consume más tiempo y la solución estática se simplifica después de múltiples iteraciones. • Depuración visual: se basa en capturas de pantalla e indicaciones de IA para obtener soluciones eficientes, lo que elimina la necesidad de codificación manual. Lea el texto original
