Folha IA
Folha IA
Início/Zé Mané — Prompts Mestre
Zé Mané — Prompts Mestre

Prompts Mestre: PixelForge Pro – IA Generativa de Imagem com Fine-tuning para PMEs

(há 8 dias)
Prompts Mestre: PixelForge Pro – IA Generativa de Imagem com Fine-tuning para PMEs

E aí, cambada de devs! Zé Mané na área, desvendando mais um mistério da web moderna. O CEO Alfredo, aquele visionário que não tem medo de sonhar grande, me trouxe um desafio: democratizar a IA generativa de imagem para a galera que realmente precisa, mas sem o mimimi técnico. Ele quer o PixelForge Pro, e eu, como sempre, já tenho o mapa da mina.

Chega de SageMaker, de infra complexa e de "gurus" empacotando tecnologia em jargão. Vamos direto ao ponto, com prompts cirúrgicos, stack de ponta e aquele toque de gênio que só o Zé Mané tem. Preparem-se, porque a IA generativa de imagem vai parar de ser bicho de sete cabeças e virar ferramenta de trabalho para PMEs e criadores de conteúdo.

1. O Projeto em 30 Segundos

O PixelForge Pro é um SaaS que capacita PMEs e criadores de conteúdo a gerarem imagens de IA personalizadas e consistentes em escala, abstraindo a complexidade do fine-tuning de modelos generativos (como DreamBooth/LoRA). Ele oferece uma interface intuitiva de arrastar e soltar para personalização e geração, focando em performance, escalabilidade e uma experiência de usuário impecável com um design minimalista dark. A stack é puro suco de modernidade: Next.js 14+, React 19, Vercel, Cloudflare Workers, Drizzle ORM, Supabase e tRPC.

2. Arquitetura Recomendada

A arquitetura do PixelForge Pro é desenhada para escalabilidade, performance e separação de preocupações, aproveitando o poder do Edge e de serviços serverless.

Mermaid Error: Parse error on line 3: ... B -->|API Requests (tRPC)| C(Backend Ne -----------------------^ Expecting 'SQE', 'DOUBLECIRCLEEND', 'PE', '-)', 'STADIUMEND', 'SUBROUTINEEND', 'PIPE', 'CYLINDEREND', 'DIAMOND_STOP', 'TAGEND', 'TRAPEND', 'INVTRAPEND', 'UNICODE_TEXT', 'TEXT', 'TAGSTART', got 'PS'

Show Code
graph TD
    A[Usuário/Cliente] -->|Navegador| B(Frontend Next.js 14+);
    B -->|API Requests (tRPC)| C(Backend Next.js API Routes/Edge Functions);
    C -->|Auth| D(Supabase Auth);
    C -->|DB Access (Drizzle ORM)| E(Supabase PostgreSQL);
    C -->|Storage (Imagens/Modelos)| F(Supabase Storage);
    C -->|Background Jobs/AI Inference| G(Cloudflare Workers/Queues);
    G -->|AI Model Hosting/Inference| H(Serviço de IA Generativa - Ex: Replicate, AWS Sagemaker Endpoint, Fal.ai);
    H -->|Webhook/Callback| G;
    G -->|Update DB/Notify User| C;
    B -->|Static Assets/Edge Cache| I(Vercel CDN/Edge Network);
    C -->|Realtime Updates (WebSockets)| E;

    subgraph Frontend
        B
    end

    subgraph Backend/API
        C
    end

    subgraph Data/Auth
        D
        E
        F
    end

    subgraph AI/Compute
        G
        H
    end

    subgraph Deployment
        I
    end

    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#bbf,stroke:#333,stroke-width:2px
    style C fill:#bfb,stroke:#333,stroke-width:2px
    style D fill:#fbf,stroke:#333,stroke-width:2px
    style E fill:#fbb,stroke:#333,stroke-width:2px
    style F fill:#bbf,stroke:#333,stroke-width:2px
    style G fill:#ffb,stroke:#333,stroke-width:2px
    style H fill:#f9f,stroke:#333,stroke-width:2px
    style I fill:#ccf,stroke:#333,stroke-width:2px

Explicação dos Componentes:

  • Frontend (Next.js 14+): Interface do usuário, SPA com SSR/SSG/ISR para performance e SEO. Utiliza React 19, Tailwind CSS v4, shadcn/ui e Radix UI.
  • Backend (Next.js API Routes/Edge Functions): Lógica de negócios, validação, orquestração de chamadas para serviços externos (IA, armazenamento). tRPC para tipagem end-to-end.
  • Supabase Auth: Autenticação e autorização de usuários.
  • Supabase PostgreSQL (Drizzle ORM): Banco de dados relacional para usuários, projetos, configurações de fine-tuning, histórico de gerações e metadados. Drizzle para tipagem e segurança.
  • Supabase Storage: Armazenamento de imagens geradas, modelos de fine-tuning e assets do usuário.
  • Cloudflare Workers/Queues: Funções serverless no Edge para processamento assíncrono, como o disparo e monitoramento de jobs de fine-tuning e geração de imagem, atuando como uma camada de abstração para os serviços de IA.
  • Serviço de IA Generativa: Plataformas como Replicate, Fal.ai, ou endpoints customizados no AWS SageMaker/GCP Vertex AI, responsáveis pela execução dos modelos de fine-tuning (DreamBooth/LoRA) e geração de imagens. Cloudflare Workers orquestram essas chamadas.
  • Vercel CDN/Edge Network: Distribuição global de assets estáticos e cache, garantindo baixa latência.

3. Prompts Mestre por Categoria

Aqui estão os prompts cirúrgicos, prontos para você copiar e colar nas suas IAs favoritas (Claude, GPT-4, Gemini, Cursor AI). Lembre-se de adaptar o {{AI_MODEL}} e outras variáveis conforme a plataforma que você está usando.

🏗️ Prompts de Arquitetura & Backend

Estes prompts focam na espinha dorsal do PixelForge Pro: banco de dados, APIs e a orquestração da IA.

Prompt 1.1: Esquema do Banco de Dados com Drizzle ORM

prompt
Você é um arquiteto de banco de dados especializado em Drizzle ORM e Supabase PostgreSQL.

**Contexto:** Estamos construindo o PixelForge Pro, um SaaS de IA generativa de imagem. Precisamos de um esquema de banco de dados robusto para gerenciar usuários, projetos, modelos de fine-tuning, e imagens geradas.

**Tarefa:** Crie o esquema completo do banco de dados usando Drizzle ORM para PostgreSQL. Inclua tabelas para:
1.  **Usuários:** ID, email, nome, avatar, ID do Supabase Auth, plano (free, pro, enterprise), créditos de geração, data de criação, data de atualização.
2.  **Organizações/Equipes:** ID, nome, slug, proprietário (referência ao usuário), data de criação, data de atualização.
3.  **Membros da Organização:** ID, ID do usuário, ID da organização, papel (admin, editor, viewer), data de criação.
4.  **Projetos:** ID, nome, descrição, ID da organização, data de criação, data de atualização.
5.  **Modelos de Fine-tuning:** ID, nome, descrição, ID do projeto, status (pending, training, ready, failed), URL do modelo treinado (no Supabase Storage ou serviço externo), custo de treino, data de criação, data de atualização.
6.  **Imagens Geradas:** ID, URL da imagem (no Supabase Storage), prompt, negativo prompt, configurações (seed, guidance_scale, steps), ID do modelo de fine-tuning (opcional), ID do projeto, custo de geração, data de criação.
7.  **Webhooks de IA:** ID, ID do job externo (ex: Replicate prediction ID), tipo (fine_tune, generate_image), status, payload recebido, data de criação.

**Formato de Saída:** Código TypeScript usando a sintaxe do Drizzle ORM (`pgTable`, `varchar`, `timestamp`, `uuid`, etc.), incluindo chaves primárias, estrangeiras e índices relevantes para performance. Adicione comentários explicativos.

**Restrições:**
- Use `pgTable` e tipos específicos do PostgreSQL via Drizzle.
- Garanta que todas as chaves estrangeiras sejam definidas com `onDelete('cascade')` ou `onDelete('set null')` onde apropriado.
- Inclua `timestamps` (`createdAt`, `updatedAt`) para todas as tabelas.
- Use `uuid` para IDs.
- Considere a escalabilidade e a integridade referencial.

Prompt 1.2: API tRPC para Gerenciamento de Projetos e Modelos

prompt
Você é um engenheiro de backend sênior com vasta experiência em tRPC e Next.js API Routes.

**Contexto:** Com base no esquema de banco de dados Drizzle ORM do PixelForge Pro, precisamos de uma API robusta para gerenciar projetos e modelos de fine-tuning.

**Tarefa:** Crie um módulo tRPC (`projectRouter.ts` e `modelRouter.ts`) que implemente as seguintes operações:
1.  **Projetos:**
    *   `createProject`: Cria um novo projeto para uma organização.
    *   `getProjectById`: Retorna detalhes de um projeto específico.
    *   `listProjectsByOrganization`: Lista todos os projetos de uma organização.
    *   `updateProject`: Atualiza nome/descrição de um projeto.
    *   `deleteProject`: Deleta um projeto (e cascateia para modelos/imagens).
2.  **Modelos de Fine-tuning:**
    *   `requestFineTune`: Inicia o processo de fine-tuning para um projeto, aceitando parâmetros como nome, descrição e URLs de imagens de treinamento. Deve retornar um `jobId` interno e disparar um Cloudflare Worker.
    *   `getModelById`: Retorna o status e detalhes de um modelo de fine-tuning.
    *   `listModelsByProject`: Lista todos os modelos de fine-tuning de um projeto.
    *   `deleteModel`: Deleta um modelo de fine-tuning.

**Formato de Saída:** Código TypeScript para os routers tRPC, incluindo:
- Definição do `appRouter` e `createTRPCRouter`.
- Procedures para cada operação (`publicProcedure`, `protectedProcedure`).
- Validação de entrada usando Zod.
- Interação com o Drizzle ORM para persistência de dados.
- Simulação de chamada a um Cloudflare Worker para `requestFineTune` (apenas a interface da chamada).

**Restrições:**
- Todas as operações devem ser protegidas (autenticação de usuário e verificação de permissão da organização/projeto).
- Use Zod para validação de esquemas de entrada.
- As chamadas ao Cloudflare Worker devem ser assíncronas e não bloquear a resposta da API.
- Assuma que o `db` (Drizzle client) e o `ctx.session` (Supabase session) estão disponíveis no contexto do tRPC.

Prompt 1.3: Cloudflare Worker para Orquestração de IA Generativa

prompt
Você é um especialista em Cloudflare Workers e arquitetura serverless para IA.

**Contexto:** O PixelForge Pro precisa orquestrar o fine-tuning e a geração de imagens de forma assíncrona e escalável, utilizando serviços de IA externos (ex: Replicate, Fal.ai).

**Tarefa:** Crie um Cloudflare Worker que atue como um orquestrador para jobs de IA. O worker deve ter dois endpoints principais:
1.  `/api/fine-tune`: Recebe um payload com `projectId`, `modelName`, `trainingImageUrls` (URLs de imagens no Supabase Storage). Este endpoint deve:
    *   Fazer uma chamada assíncrona para um serviço de IA externo (ex: Replicate API) para iniciar o fine-tuning.
    *   Salvar o `predictionId` (ou job ID externo) e o `projectId` em um banco de dados (via API interna do PixelForge Pro ou Supabase).
    *   Retornar um `jobId` interno.
2.  `/api/generate-image`: Recebe um payload com `projectId`, `modelId` (opcional), `prompt`, `negativePrompt`, `settings`. Este endpoint deve:
    *   Fazer uma chamada assíncrona para o serviço de IA externo para gerar a imagem.
    *   Salvar o `predictionId` e o `projectId` em um banco de dados.
    *   Retornar um `jobId` interno.
3.  `/api/webhook`: Recebe callbacks do serviço de IA externo quando um job (fine-tuning ou geração) é concluído. Este endpoint deve:
    *   Validar o webhook (se possível, com um segredo).
    *   Atualizar o status do job no banco de dados interno (e.g., `status: 'ready'`, `imageUrl: '...'`).
    *   Notificar o usuário (via WebSocket ou email, apenas a interface da chamada).

**Formato de Saída:** Código JavaScript para um Cloudflare Worker, utilizando a API `fetch` para chamadas externas e `KV` (simulado) para armazenamento temporário de estados se necessário. Inclua exemplos de payloads de entrada e saída.

**Restrições:**
- Use `async/await`.
- Gerencie erros de forma robusta.
- A autenticação para as chamadas externas de IA deve ser tratada com variáveis de ambiente do Worker.
- A persistência no banco de dados interno deve ser feita via uma API interna do PixelForge Pro (ex: `POST /api/internal/jobs/update`).

🎨 Prompts de Frontend & Design

Estes prompts visam a interface do usuário, garantindo uma experiência fluida e um visual minimalista dark.

Prompt 2.1: Componente de Upload de Imagens com Drag-and-Drop

prompt
Você é um engenheiro de frontend React com expertise em UI/UX e acessibilidade.

**Contexto:** Para o PixelForge Pro, precisamos de um componente de upload de imagens robusto para o processo de fine-tuning. Ele deve suportar múltiplos uploads, pré-visualização e drag-and-drop.

**Tarefa:** Crie um componente React (`ImageUploader.tsx`) utilizando Tailwind CSS v4 e Radix UI (opcional, para popovers/tooltips) que:
1.  Permita o upload de múltiplas imagens (JPG, PNG, WebP, AVIF).
2.  Suporte drag-and-drop de arquivos para a área de upload.
3.  Exiba pré-visualizações das imagens selecionadas com um botão para remover cada uma.
4.  Mostre um indicador de progresso para cada upload (simulado, sem a lógica real de upload para o Supabase Storage).
5.  Tenha um estilo minimalista dark, responsivo e acessível.
6.  Integre-se com `react-hook-form` para gerenciamento de estado do formulário.

**Formato de Saída:** Código TypeScript/React para o componente, incluindo:
- Estrutura JSX.
- Lógica de estado para imagens selecionadas e pré-visualizações.
- Handlers para `dragOver`, `drop`, `change` (input file).
- Estilização com classes Tailwind CSS.
- Props para `onUploadComplete` (simulado) e `onRemoveImage`.

**Restrições:**
- Sem bibliotecas externas pesadas para upload (apenas `react-dropzone` se for estritamente necessário para simplificar, mas prefira a implementação manual).
- Foco na experiência do usuário e acessibilidade (aria-labels, navegação por teclado).
- Design minimalista dark.
- O upload real para o Supabase Storage será feito em um `action` ou `server component` do Next.js.

Prompt 2.2: Layout Principal da Aplicação com Navegação Lateral

prompt
Você é um designer de UI/UX e desenvolvedor frontend com profundo conhecimento em Next.js e Tailwind CSS.

**Contexto:** O PixelForge Pro precisa de um layout principal responsivo que inclua uma navegação lateral (sidebar) e uma área de conteúdo principal. O design deve ser minimalista dark.

**Tarefa:** Crie um componente de layout (`MainLayout.tsx`) para o Next.js 14+ que:
1.  Tenha uma sidebar fixa à esquerda (ocultável em mobile) contendo links de navegação (Projetos, Modelos, Gerar Imagem, Configurações).
2.  Uma área de cabeçalho (header) com o logo do PixelForge Pro e um menu de usuário (com avatar e opções como "Minha Conta", "Sair").
3.  Uma área de conteúdo principal onde o `children` do layout será renderizado.
4.  Seja totalmente responsivo, adaptando a sidebar para um menu hambúrguer em telas menores.
5.  Utilize Tailwind CSS v4 e shadcn/ui para componentes básicos (Button, DropdownMenu).

**Formato de Saída:** Código TypeScript/React para o componente de layout, incluindo:
- Estrutura JSX.
- Lógica de estado para controlar a visibilidade da sidebar em mobile.
- Estilização com classes Tailwind CSS.
- Uso de componentes shadcn/ui para elementos como botões e menus.

**Restrições:**
- Design minimalista dark.
- Foco na responsividade e acessibilidade.
- A navegação deve usar `next/link`.
- O menu de usuário deve ser um `DropdownMenu` do shadcn/ui.

Prompt 2.3: Componente de Geração de Imagem com Controles de IA

prompt
Você é um desenvolvedor frontend com experiência em interfaces complexas para ferramentas de IA.

**Contexto:** O PixelForge Pro precisa de uma interface para que os usuários possam gerar imagens. Esta interface deve ser intuitiva, permitindo a seleção de modelos, entrada de prompts e ajuste de parâmetros de IA.

**Tarefa:** Crie um componente React (`ImageGeneratorForm.tsx`) para a página de geração de imagens, utilizando Tailwind CSS v4, shadcn/ui (para sliders, inputs, selects) e `react-hook-form`. O componente deve incluir:
1.  Um `textarea` para o "Prompt" (o que gerar).
2.  Um `textarea` para o "Negative Prompt" (o que evitar).
3.  Um `Select` para escolher um modelo de fine-tuning disponível (populado via tRPC, simulado).
4.  Sliders para "Guidance Scale" (1-20) e "Steps" (10-100).
5.  Um `Input` para "Seed" (numérico, opcional).
6.  Um botão "Gerar Imagem" que, ao ser clicado, envia os dados para a API tRPC de geração.
7.  Uma área para exibir as imagens geradas (simulado, apenas placeholders).
8.  Um indicador de carregamento enquanto a imagem está sendo gerada.

**Formato de Saída:** Código TypeScript/React para o componente, incluindo:
- Estrutura JSX.
- Lógica de estado e validação com `react-hook-form` e Zod.
- Estilização com classes Tailwind CSS.
- Uso de componentes shadcn/ui para todos os controles de formulário.
- Simulação da chamada à API tRPC e do estado de carregamento.

**Restrições:**
- Design minimalista dark.
- Validação de formulário robusta.
- Feedback visual claro para o usuário (loading state).
- O `Select` de modelos deve ser dinâmico (simule uma lista de modelos).

🔍 Prompts de SEO & Schema.org

Garantir que o PixelForge Pro seja encontrado é crucial. Estes prompts abordam otimizações de SEO técnico.

Prompt 3.1: Meta Tags Dinâmicas e Open Graph para Next.js

prompt
Você é um especialista em SEO técnico e Next.js, focado em otimização para motores de busca e compartilhamento social.

**Contexto:** O PixelForge Pro precisa de meta tags dinâmicas para suas páginas, especialmente para compartilhamento em redes sociais e para garantir um bom ranqueamento no Google.

**Tarefa:** Crie um componente React (`SeoHead.tsx`) que possa ser usado em qualquer página do Next.js para definir dinamicamente:
1.  `title` da página.
2.  `description` da página.
3.  `og:title`, `og:description`, `og:image`, `og:url`, `og:type` para Open Graph.
4.  `twitter:card`, `twitter:site`, `twitter:creator`, `twitter:title`, `twitter:description`, `twitter:image` para Twitter Cards.
5.  `canonical` URL.

**Formato de Saída:** Código TypeScript/React para o componente `SeoHead`, utilizando `next/head` ou o novo `metadata` API do Next.js 14+. Inclua exemplos de uso.

**Restrições:**
- Deve ser reutilizável e flexível.
- Deve ter valores padrão para evitar tags vazias.
- Considere a melhor prática para o Next.js 14+ (preferencialmente `metadata` API).
- O `og:image` deve ser uma URL absoluta.

Prompt 3.2: Implementação de Schema.org para um SaaS

prompt
Você é um guru de dados estruturados e Schema.org, com foco em ranqueamento e featured snippets.

**Contexto:** Para o PixelForge Pro, queremos que o Google entenda a natureza do nosso SaaS e exiba rich snippets relevantes nos resultados de busca.

**Tarefa:** Crie um objeto JSON-LD (`schema.ts`) que represente o PixelForge Pro como um `SoftwareApplication` e `Organization`. Inclua as seguintes propriedades:
1.  **SoftwareApplication:**
    *   `name`, `description`, `url`, `applicationCategory` (ex: "BusinessApplication"), `operatingSystem` (ex: "Web"), `offers` (com `Offer` para planos de assinatura, incluindo `priceCurrency`, `price`, `availability`, `category`).
    *   `aggregateRating` (simulado, com `ratingValue` e `reviewCount`).
2.  **Organization:**
    *   `name`, `url`, `logo`, `contactPoint` (com `ContactPoint` para suporte), `sameAs` (links para redes sociais).

**Formato de Saída:** Objeto JavaScript/TypeScript que pode ser serializado para JSON-LD, pronto para ser injetado no `<head>` das páginas usando `next/script` ou `metadata` API.

**Restrições:**
- Use a sintaxe JSON-LD correta.
- Preencha com dados fictícios, mas realistas para o PixelForge Pro.
- Garanta que as URLs sejam absolutas.

Prompt 3.3: Sitemap XML Dinâmico e robots.txt

prompt
Você é um especialista em crawlability e indexação, com experiência em Next.js e Vercel.

**Contexto:** Precisamos garantir que o PixelForge Pro seja totalmente rastreável e indexável, fornecendo um sitemap XML e um arquivo `robots.txt` bem configurado.

**Tarefa:**
1.  Crie um arquivo `robots.txt` para o PixelForge Pro que permita o rastreamento de todo o site, mas disallow algumas URLs internas (ex: `/dashboard/*`, `/api/*`).
2.  Crie uma função `generateSitemap` em um `route handler` do Next.js (`app/sitemap.xml/route.ts`) que gere um sitemap XML dinâmico. O sitemap deve incluir:
    *   Páginas estáticas (home, sobre, contato, preços, política de privacidade).
    *   URLs de projetos e modelos de fine-tuning (simuladas com IDs fictícios, ou se possível, buscando do banco de dados via Drizzle).
    *   Prioridade e frequência de mudança (ex: home com 1.0, projetos com 0.8).

**Formato de Saída:**
- Conteúdo do arquivo `robots.txt`.
- Código TypeScript para o `route handler` do Next.js que gera o sitemap XML.

**Restrições:**
- O sitemap deve ser válido XML.
- O `robots.txt` deve seguir as especificações.
- As URLs no sitemap devem ser absolutas.
- O sitemap deve ser acessível em `/sitemap.xml`.

⚡ Prompts de Performance & Core Web Vitals

Performance não é luxo, é obrigação. Estes prompts focam em otimizações para garantir Core Web Vitals de elite.

Prompt 4.1: Otimização de Imagens para Next.js

prompt
Você é um especialista em performance web e otimização de imagens, com foco em Core Web Vitals (LCP, INP).

**Contexto:** O PixelForge Pro lida com muitas imagens (geradas, de treinamento, avatares). Precisamos garantir que elas sejam carregadas de forma otimizada para performance máxima.

**Tarefa:** Descreva e forneça exemplos de código para as melhores práticas de otimização de imagens no Next.js 14+:
1.  **Uso de `next/image`:** Explique como usar o componente, incluindo `priority`, `fill`, `sizes`, e `quality`.
2.  **Formatos Modernos:** Como garantir que imagens sejam servidas em WebP ou AVIF automaticamente.
3.  **Lazy Loading:** Como o `next/image` lida com isso e como otimizar imagens fora da viewport.
4.  **Placeholder:** Estratégias para placeholders de baixa qualidade (blur-up).
5.  **Otimização de Imagens de Treinamento/Geradas:** Como o Supabase Storage pode ser configurado para redimensionar e otimizar imagens sob demanda, ou como usar um Cloudflare Worker para isso.

**Formato de Saída:** Texto explicativo com snippets de código React/Next.js para cada ponto.

**Restrições:**
- Foco em `next/image`.
- Abordar formatos modernos e lazy loading.
- Explicar a integração com o Supabase Storage ou Cloudflare Workers para imagens dinâmicas.

Prompt 4.2: Estratégias de Carregamento de Fontes e Critical CSS

prompt
Você é um engenheiro de frontend com expertise em otimização de carregamento de recursos e LCP.

**Contexto:** O PixelForge Pro utiliza uma fonte personalizada (ex: Inter) e Tailwind CSS. Precisamos otimizar o carregamento de fontes e CSS para melhorar o LCP e evitar layout shifts.

**Tarefa:** Descreva e forneça exemplos de código para as seguintes estratégias de otimização no Next.js 14+ com Tailwind CSS:
1.  **Carregamento de Fontes Locais com `next/font`:** Como usar `next/font/google` ou `next/font/local` para carregar fontes de forma otimizada, incluindo `display: swap` e pré-carregamento.
2.  **Font Subsetting:** Como garantir que apenas os caracteres necessários sejam carregados.
3.  **Critical CSS:** Como o Tailwind CSS e o Next.js lidam com a extração de CSS crítico e como garantir que o CSS essencial para o "above-the-fold" seja carregado rapidamente.
4.  **Evitar FOUT/FOIC:** Técnicas para minimizar Flash of Unstyled Text (FOUT) ou Flash of Invisible Text (FOIC).

**Formato de Saída:** Texto explicativo com snippets de código Next.js/CSS para cada ponto.

**Restrições:**
- Foco em `next/font`.
- Abordar a otimização do Tailwind CSS.
- Explicar a relação com LCP e CLS.

Prompt 4.3: Edge Caching com Vercel e Cloudflare Workers

prompt
Você é um arquiteto de sistemas com expertise em Edge Computing e caching distribuído.

**Contexto:** Para o PixelForge Pro, precisamos de uma estratégia de caching agressiva para assets estáticos, respostas de API e até mesmo dados dinâmicos, para reduzir a latência e a carga no backend.

**Tarefa:** Descreva como implementar uma estratégia de edge caching utilizando Vercel e Cloudflare Workers para o PixelForge Pro. Inclua:
1.  **Vercel Edge Network:** Como o Vercel automaticamente cacheia assets estáticos e como configurar headers de cache para páginas geradas (SSR/ISR).
2.  **Cloudflare Workers como Cache Layer:** Como usar um Cloudflare Worker para cachear respostas de APIs internas ou de terceiros (ex: resultados de listagem de modelos, dados de perfil de usuário frequentemente acessados).
3.  **Cache Invalidation:** Estratégias para invalidar o cache quando os dados subjacentes mudam (ex: via webhook do Supabase, ou chamadas de API).
4.  **Cache-Control Headers:** Exemplos de headers HTTP para diferentes tipos de conteúdo.

**Formato de Saída:** Texto explicativo com snippets de código (Next.js `headers`, Cloudflare Worker JavaScript) e exemplos de configuração.

**Restrições:**
- Foco em Vercel e Cloudflare Workers.
- Abordar diferentes tipos de conteúdo (estático, dinâmico, API).
- Explicar estratégias de invalidação.

🚀 Prompts de Deploy & DevOps

Colocar o PixelForge Pro no ar e mantê-lo rodando liso é a missão. Estes prompts cobrem CI/CD, monitoramento e escalabilidade.

Prompt 5.1: Pipeline CI/CD no Vercel para Next.js

prompt
Você é um engenheiro de DevOps especializado em Vercel e pipelines de CI/CD para Next.js.

**Contexto:** O PixelForge Pro precisa de um pipeline de CI/CD automatizado para garantir que cada push para o `main` branch seja testado, construído e implantado no Vercel de forma eficiente.

**Tarefa:** Descreva o processo de configuração de um pipeline CI/CD no Vercel para o PixelForge Pro, incluindo:
1.  **Conexão com o GitHub:** Como configurar a integração inicial.
2.  **Variáveis de Ambiente:** Como gerenciar variáveis de ambiente sensíveis (Supabase keys, Replicate API keys) no Vercel.
3.  **Build Hooks:** Como usar build hooks para disparar builds programaticamente (opcional, para cenários avançados).
4.  **Previews de Deploy:** Como o Vercel gera URLs de preview para cada PR.
5.  **Testes Automatizados:** Como integrar testes (Jest/Playwright) no processo de build do Vercel (simulado, apenas a menção).
6.  **Domínios Customizados:** Como configurar domínios customizados e SSL.

**Formato de Saída:** Texto explicativo passo a passo, com exemplos de configuração (sem credenciais reais).

**Restrições:**
- Foco na plataforma Vercel.
- Abordar a integração com GitHub.
- Explicar a importância das variáveis de ambiente e previews.

Prompt 5.2: Monitoramento de Performance e Erros com Vercel Analytics e Sentry

prompt
Você é um engenheiro de confiabilidade (SRE) com experiência em monitoramento de aplicações web.

**Contexto:** Para o PixelForge Pro, precisamos de um sistema de monitoramento robusto para acompanhar a performance da aplicação, Core Web Vitals e detectar erros em tempo real.

**Tarefa:** Descreva como configurar o monitoramento para o PixelForge Pro utilizando:
1.  **Vercel Analytics:** Como usar os dashboards nativos do Vercel para Core Web Vitals, tráfego e performance do servidor.
2.  **Sentry (ou similar):** Como integrar o Sentry para capturar erros de frontend (React) e backend (Next.js API Routes/Edge Functions) em tempo real. Inclua a configuração do SDK e exemplos de como capturar erros.
3.  **Alertas:** Como configurar alertas para anomalias (ex: LCP alto, aumento de erros 5xx).
4.  **Logging:** Como centralizar logs de Cloudflare Workers e Next.js.

**Formato de Saída:** Texto explicativo com snippets de código para integração do Sentry (SDK initialization, error capture).

**Restrições:**
- Foco em Vercel Analytics e Sentry.
- Abordar monitoramento de frontend e backend.
- Explicar a importância de alertas e logs centralizados.

Prompt 5.3: Estratégias de Escalabilidade para Cloudflare Workers e Supabase

prompt
Você é um arquiteto de nuvem com experiência em escalabilidade de sistemas serverless e bancos de dados.

**Contexto:** O PixelForge Pro pode ter picos de demanda para fine-tuning e geração de imagens. Precisamos garantir que a infraestrutura subjacente (Cloudflare Workers, Supabase) possa escalar automaticamente.

**Tarefa:** Descreva as estratégias de escalabilidade para os seguintes componentes do PixelForge Pro:
1.  **Cloudflare Workers:** Como os Workers escalam automaticamente e como otimizar o código para performance máxima no Edge (cold starts, uso de KV para cache).
2.  **Supabase (PostgreSQL e Storage):**
    *   **PostgreSQL:** Como o Supabase gerencia a escalabilidade do banco de dados, e boas práticas de modelagem de dados e indexação para evitar gargalos.
    *   **Storage:** Como o Supabase Storage escala para lidar com grandes volumes de uploads e downloads de imagens.
3.  **Serviços de IA Externos:** Como escolher e configurar serviços de IA externos que também escalem com a demanda (ex: Replicate com auto-scaling de GPUs).

**Formato de Saída:** Texto explicativo sobre as capacidades de escalabilidade de cada plataforma e melhores práticas para aproveitá-las.

**Restrições:**
- Foco em Cloudflare Workers e Supabase.
- Abordar tanto o compute quanto o armazenamento e banco de dados.
- Mencionar a importância da escolha de provedores de IA escaláveis.

4. Prompt Único Completo

Este é o mega-prompt, o coração do Zé Mané. Ele engloba tudo, desde a arquitetura até os detalhes de implementação, para que sua IA possa cuspir o projeto quase pronto.

prompt
Você é o Zé Mané, um engenheiro de software full-stack autodidata e genial, com expertise em Next.js 14+, React 19, tRPC, Drizzle ORM, Supabase, Cloudflare Workers, Tailwind CSS v4, shadcn/ui, Radix UI, SEO técnico avançado e performance web (Core Web Vitals). Sua missão é projetar e codificar o **PixelForge Pro**, um SaaS que democratiza a IA generativa de imagem para PMEs e criadores de conteúdo, abstraindo a complexidade do fine-tuning (DreamBooth/LoRA). O estilo de design é minimalista dark.

**Contexto Geral do Projeto:**
- **Nome:** PixelForge Pro
- **Propósito:** Oferecer geração de imagens de IA personalizadas e fine-tuning de modelos via interface visual.
- **Público-alvo:** PMEs e criadores de conteúdo sem conhecimento técnico em IA.
- **Stack Tecnológica:** Next.js 14+, React 19, Vercel (deploy), Cloudflare Workers (orquestração IA), Drizzle ORM (tipagem DB), Supabase (PostgreSQL, Auth, Storage), tRPC (API end-to-end typesafe), Tailwind CSS v4, shadcn/ui, Radix UI.
- **Serviço de IA Externo:** Assuma que um serviço como Replicate ou Fal.ai será usado para o fine-tuning e geração de imagem.

**Tarefa Principal:**
Gere um plano de projeto detalhado que inclua a arquitetura, o esquema do banco de dados, os principais componentes de frontend, as APIs de backend, as otimizações de SEO/Performance e o setup de deploy. Para cada seção, forneça **snippets de código funcionais e prontos para uso** ou **descrições detalhadas de implementação**.

**Estrutura da Saída:**

1.  **Arquitetura do Sistema (Diagrama Mermaid):**
    *   Um diagrama Mermaid completo que visualize a interação entre Frontend (Next.js), Backend (Next.js API/tRPC), Banco de Dados (Supabase/Drizzle), Autenticação (Supabase Auth), Armazenamento (Supabase Storage), Orquestração de IA (Cloudflare Workers) e Serviço de IA Externo.

2.  **Esquema do Banco de Dados (Drizzle ORM):**
    *   Código TypeScript para o esquema completo do Drizzle ORM, incluindo tabelas para `users`, `organizations`, `organization_members`, `projects`, `fine_tune_models`, `generated_images`, e `ai_webhooks`. Garanta chaves primárias/estrangeiras, índices e timestamps.

3.  **Backend (Next.js API Routes & tRPC):**
    *   **tRPC Router (`appRouter.ts`):** Definição do `appRouter` e `createTRPCRouter`.
    *   **Procedures de Autenticação (`authRouter.ts`):** `login`, `register`, `logout`, `getSession` (usando Supabase Auth).
    *   **Procedures de Projetos (`projectRouter.ts`):** `createProject`, `getProjectById`, `listProjectsByOrganization`, `updateProject`, `deleteProject`.
    *   **Procedures de Modelos (`modelRouter.ts`):** `requestFineTune` (com chamada simulada ao Worker), `getModelById`, `listModelsByProject`, `deleteModel`.
    *   **Validação:** Todos os inputs devem usar Zod.
    *   **Contexto tRPC:** Como configurar o `createContext` para incluir `db` (Drizzle client) e `session` (Supabase).

4.  **Cloudflare Worker (Orquestração de IA):**
    *   Código JavaScript para um Cloudflare Worker com endpoints para `/api/fine-tune`, `/api/generate-image` (disparando jobs externos) e `/api/webhook` (recebendo callbacks e atualizando o DB via API interna).

5.  **Frontend (Next.js 14+, React 19, Tailwind CSS v4, shadcn/ui, Radix UI):**
    *   **Layout Principal (`MainLayout.tsx`):** Componente de layout responsivo com sidebar, header e área de conteúdo, estilo minimalista dark.
    *   **Componente de Upload de Imagens (`ImageUploader.tsx`):** Com drag-and-drop, pré-visualização, remoção e integração com `react-hook-form`.
    *   **Componente de Geração de Imagem (`ImageGeneratorForm.tsx`):** Formulário com `textarea` para prompts, `Select` para modelos, `Sliders` para parâmetros de IA, e área para exibir resultados.
    *   **Configuração do Tailwind CSS:** `tailwind.config.ts` com cores dark mode e extensões básicas.
    *   **Design System (shadcn/ui):** Comandos para inicializar shadcn/ui e um exemplo de componente Button customizado para o tema dark.

6.  **SEO & Performance:**
    *   **Meta Tags Dinâmicas (`SeoHead.tsx`):** Componente para `title`, `description`, Open Graph e Twitter Cards (usando `metadata` API do Next.js).
    *   **Schema.org (JSON-LD):** Objeto JSON-LD para `SoftwareApplication` e `Organization`.
    *   **Sitemap XML e robots.txt:** Conteúdo para `robots.txt` e código para `app/sitemap.xml/route.ts` (dinâmico).
    *   **Otimização de Imagens:** Explicação e exemplos de uso de `next/image` e formatos modernos.
    *   **Carregamento de Fontes:** Explicação e exemplos de uso de `next/font` e estratégias para Critical CSS.

7.  **Deploy & DevOps:**
    *   **Vercel CI/CD:** Descrição do setup de CI/CD no Vercel (integração GitHub, variáveis de ambiente, previews).
    *   **Monitoramento:** Descrição da integração com Vercel Analytics e Sentry (com exemplo de inicialização do SDK).
    *   **Escalabilidade:** Explicação da escalabilidade de Cloudflare Workers e Supabase.

**Restrições Gerais:**
- Todo o código deve ser TypeScript.
- Use `use client` e `use server` conforme apropriado para Next.js 14+.
- Priorize a performance e as Core Web Vitals.
- O design deve ser minimalista dark em todos os exemplos de frontend.
- Os prompts devem ser "cirúrgicos", com contexto, tarefa, formato e restrições claras.
- Assuma que as credenciais de API e chaves secretas são gerenciadas via variáveis de ambiente.
- Inclua comentários explicativos no código.
- Simule dados onde a integração real com serviços externos não for possível no snippet.
- O output deve ser um único bloco de markdown bem estruturado, com blocos de código para cada snippet.

5. Stack Mínima Viável

Pra lançar essa joia em 48h, sem perder o sono, a gente foca no essencial, mas com a base sólida pra escalar:

6. Checklist de Lançamento

Antes de apertar o botão "Go Live", Zé Mané tem um checklist que não falha:

  1. Core Web Vitals Audit: Rodar Lighthouse e PageSpeed Insights em todas as páginas críticas. LCP < 2.5s, INP < 200ms, CLS < 0.1.
  2. SEO Técnico Básico: robots.txt configurado, sitemap.xml acessível e atualizado, todas as páginas com title e description únicos.
  3. Schema.org Implementado: JSON-LD para SoftwareApplication e Organization nas páginas principais.
  4. Otimização de Imagens: Todas as imagens via next/image, em formatos modernos (WebP/AVIF), com sizes e priority adequados.
  5. Acessibilidade (WCAG 2.2): Teste de navegação por teclado, contraste de cores, aria-labels em componentes interativos.
  6. Segurança: Variáveis de ambiente secretas configuradas no Vercel/Cloudflare, políticas de segurança do Supabase (RLS) ativadas e testadas, validação de input em todas as APIs.
  7. Monitoramento Ativo: Sentry configurado para erros, Vercel Analytics e Cloudflare Workers logs monitorando performance e anomalias. Alertas configurados.
  8. Testes de Carga: Simular picos de usuários para fine-tuning e geração de imagens para garantir que Cloudflare Workers e o serviço de IA escalem.
  9. Backup de Banco de Dados: Configuração de backups automáticos do Supabase PostgreSQL.
  10. Política de Privacidade e Termos de Uso: Páginas legais claras e acessíveis, conforme as regulamentações (GDPR, LGPD).

Com essa receita do Zé Mané, o PixelForge Pro não é só um sonho do Alfredo, é a próxima grande revolução no mercado de IA generativa. Agora, vão lá e codifiquem essa bagaça!

Compartilhar