Crie um site de blog em poucas horas usando um modelo Gemini 3 Pro, o Google AI Studio e o Cursor. @fofrAI, que recentemente se juntou ao Google, compartilhou todo o processo de criação do seu blog pessoal "fofr" do zero em apenas algumas horas, usando um modelo Gemini 3 Pro e uma combinação do Google AI Studio e do Cursor em etapas e iterações. O processo de desenvolvimento emprega o desenvolvimento iterativo orientado por instruções, procedendo em etapas: 1. Prototipagem no AI Studio: Utilizando o framework React no Google AI Studio, foi gerado um protótipo de blog com dicas detalhadas. As dicas iniciais enfatizavam "tipografia elegante, layout centralizado e comprimento de linha ideal" e especificavam componentes para imagens, vídeos, mídias geradas, blocos de código e cartões de dicas. Iterações subsequentes adicionaram um "tema Monstera" (textura quente, semelhante a papel, utilizando a fonte Merriweather para títulos e a fonte Inter para o corpo do texto) e exibiram as postagens mais recentes na página inicial. O design priorizou a experiência mobile (largura máxima de 3x) e o código foi exportado para desenvolvimento local. 2. Aprimoramento e Expansão de Recursos do Cursor: Baixe o código para o repositório do GitHub, instale as dependências usando o Cursor e execute-o localmente. Adicione roteamento em várias páginas (react-router-dom), análise de Markdown (react-markdown lida com componentes personalizados) e crie um diretório `posts` para armazenar conteúdo de exemplo. Os principais aprimoramentos incluem: • Componentes de mídia: o MediaCard suporta exibição de imagens/vídeos, cópia de prompts, visualização em tela cheia e download; o modal lightbox permite a navegação para a esquerda e para a direita entre várias imagens ou a iteração de prompts em várias etapas. • Elementos interativos: CompareSlider para comparar resultados, PromptCard para destacar exemplos de projetos. Ao fornecer capturas de tela como feedback, a Gemini pode corrigir erros visuais e garantir uma integração perfeita dos componentes. 3. Qualidade do Código e Otimização da Implantação: O plugin ESLint e o fluxo de trabalho do GitHub foram introduzidos para verificações automáticas de código. Hospedado no Vercel, os recursos são armazenados no Cloudflare R2. As tentativas iniciais de gerar imagens Open Graph usando os pacotes OG do Vercel falharam; em vez disso, foi empregada a geração estática usando um script satori. Os favicons foram simplificados para ícones Emoji. A imagem de capa foi gerada usando um modelo Nano Banana Pro baseado em Markdown do blog e capturas de tela. Tecnologias e ferramentas utilizadas: Modelo principal de IA: Gemini 3 Pro (prototipagem no AI Studio, geração/depuração de código Cursor). Tecnologias utilizadas no front-end: React 18+, TypeScript, Tailwind CSS, biblioteca de ícones lucide-react. • Ferramentas de suporte: react-markdown (análise sintática), Vercel (implantação), Cloudflare R2 (armazenamento), ESLint (controle de qualidade). Desafios e soluções: Limitações da navegação em várias páginas: O AI Studio não lida bem com rotas complexas, então primeiro projetamos uma única página e depois a implementamos manualmente. • Código desorganizado: o código gerado por IA é propenso à redundância, por isso os linters foram introduzidos desde cedo para corrigi-lo automaticamente. • Geração dinâmica de imagens: O Open Graph é o que consome mais tempo, e a solução estática é simplificada após múltiplas iterações. • Depuração visual: utiliza capturas de tela e sugestões de IA para soluções eficientes, eliminando a necessidade de codificação manual. Leia o texto original
