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

Prompts Mestre: PixelForge Pro – Democratizando a IA Generativa para PMEs com Next.js e Fine-tuning Simplificado

(há 8 dias)
Prompts Mestre: PixelForge Pro – Democratizando a IA Generativa para PMEs com Next.js e Fine-tuning Simplificado

E aí, galera da engenharia! Zé Mané na área, e hoje a gente vai desmistificar a IA generativa de imagem para PMEs e criadores de conteúdo. O Alfredo, CEO visionário, me trouxe um desafio: transformar a complexidade do fine-tuning de modelos de IA em algo tão simples quanto arrastar e soltar. E, claro, fazer isso com a stack mais afiada do mercado, garantindo performance, escalabilidade e, acima de tudo, uma experiência de usuário impecável.

Chega de papo furado de "gurus" que complicam o que deveria ser fácil. Vamos construir o PixelForge Pro – a ferramenta que vai colocar o poder da IA generativa nas mãos de quem realmente precisa, sem precisar virar um PhD em SageMaker.

1. O Projeto em 30 Segundos

O PixelForge Pro é um SaaS que democratiza a criação de imagens IA personalizadas e de marca. Ele abstrai a complexidade do fine-tuning de modelos (como DreamBooth ou LoRA) através de uma interface intuitiva de arrastar e soltar, permitindo que PMEs e criadores de conteúdo gerem imagens de alta qualidade, consistentes com sua identidade visual, sem a necessidade de conhecimento técnico em IA ou infraestrutura de GPUs. A plataforma garante escalabilidade para grandes volumes e consistência de marca.

2. Arquitetura Recomendada

A arquitetura do PixelForge Pro precisa ser robusta, escalável e eficiente, separando as preocupações de frontend, backend e, crucialmente, o processamento intensivo de IA. Vamos de uma abordagem serverless e edge-first, com uma camada de orquestração para os modelos de IA.

Mermaid Error: Parse error on line 3: ... B -->|API Requests (tRPC/GraphQL)| C(Ba -----------------------^ 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/PME/Criador] -->|Navegador Web| B(Frontend: Next.js/React - Vercel)
    B -->|API Requests (tRPC/GraphQL)| C(Backend API: Next.js API Routes/Cloudflare Workers)
    C -->|Auth/DB Access| D(Auth: Supabase Auth / Clerk)
    C -->|DB Operations (Drizzle ORM)| E(Database: PlanetScale/PostgreSQL via Supabase)
    C -->|Queue Image Generation Requests| F(Message Queue: Redis/Kafka)
    F --> G(AI Worker Service: Cloudflare Workers/Lambda)
    G -->|Load/Fine-tune/Generate| H(AI Model Hosting: Replicate/Hugging Face Inference API/Custom SageMaker Endpoint)
    H -->|Store Generated Images| I(Object Storage: Cloudflare R2/S3)
    I -->|Serve Images (CDN)| J(CDN: Cloudflare Images/Vercel Blob)
    J --> B
    B --> K(Analytics: Vercel Analytics/PostHog)
    C --> L(Cache: Redis/Cloudflare KV)

    subgraph Infrastructure
        B --- Vercel
        C --- Cloudflare Workers
        D --- Supabase
        E --- PlanetScale
        I --- Cloudflare R2
        J --- Cloudflare
    end

    subgraph AI Pipeline
        F --- G --- H --- I
    end

    subgraph Core Web Vitals & SEO
        B --- M(Lighthouse/PageSpeed Insights)
        B --- N(Schema.org/JSON-LD)
        B --- O(Sitemap/Robots.txt)
    end

Explicação da Arquitetura:

  • Frontend (Next.js/React): Hospedado na Vercel para SSR/SSG e edge functions, garantindo performance e SEO. Utiliza shadcn/ui e Radix UI para componentes, Tailwind CSS para estilização.
  • Backend API (Next.js API Routes/Cloudflare Workers): Lida com a lógica de negócio, autenticação, interação com o banco de dados e orquestração das tarefas de IA. Cloudflare Workers para edge computing e baixa latência.
  • Autenticação (Supabase Auth/Clerk): Soluções prontas para autenticação de usuários, com suporte a social logins e JWTs.
  • Banco de Dados (PlanetScale/Supabase PostgreSQL): PlanetScale (MySQL) para escalabilidade horizontal ou Supabase (PostgreSQL) para um ecossistema completo. Drizzle ORM para tipagem segura e queries eficientes.
  • Fila de Mensagens (Redis/Kafka): Essencial para gerenciar as requisições de geração de imagem, que são tarefas demoradas. Garante que o frontend não bloqueie e que as tarefas sejam processadas de forma assíncrona.
  • AI Worker Service (Cloudflare Workers/Lambda): Microserviço responsável por pegar as tarefas da fila, interagir com os modelos de IA (fine-tuning e geração) e armazenar os resultados.
  • AI Model Hosting (Replicate/Hugging Face/Custom SageMaker): Plataformas especializadas em hospedar e servir modelos de IA. Replicate e Hugging Face são ótimas para começar; um SageMaker endpoint personalizado pode ser usado para maior controle e otimização de custos em escala.
  • Object Storage (Cloudflare R2/S3): Armazenamento de baixo custo e alta durabilidade para as imagens geradas.
  • CDN (Cloudflare Images/Vercel Blob): Distribuição global das imagens para acesso rápido e otimizado.
  • Cache (Redis/Cloudflare KV): Para dados frequentemente acessados e sessões.

3. Prompts Mestre por Categoria

🏗️ Prompts de Arquitetura & Backend

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

prompt
// Prompt para Claude/GPT-4
Você é um arquiteto de software sênior especializado em microsserviços e serverless.
**Contexto:** Estamos construindo o PixelForge Pro, um SaaS para geração de imagens IA personalizadas. O core é um backend que gerencia usuários, projetos, modelos de IA (DreamBooth/LoRA) e orquestra a geração de imagens.
**Tarefa:** Projete o esquema de banco de dados (usando Drizzle ORM para PlanetScale/MySQL) para as entidades `User`, `Project`, `AIModel` (para fine-tuning), `ImageGenerationTask` e `GeneratedImage`. Inclua campos essenciais como `id`, `createdAt`, `updatedAt`, `userId`, `projectId`, `status`, `prompt`, `negativePrompt`, `modelId`, `imageUrl`, `fineTuningDataUrl`. Pense em relacionamentos e índices para performance.
**Formato de Saída:** Código TypeScript para Drizzle ORM schema, incluindo as definições das tabelas e seus relacionamentos.
**Restrições:**
- Use `planetscale-serverless` driver para Drizzle.
- Garanta que todos os campos de data sejam `timestamp` com `default` e `onUpdate` adequados.
- Inclua chaves estrangeiras e índices onde apropriado.
- Adicione um campo `storagePath` para `fineTuningData` no `AIModel` e `GeneratedImage`.
- O `status` da `ImageGenerationTask` deve ser um enum (`pending`, `processing`, `completed`, `failed`).
prompt
// Prompt para Claude/GPT-4
Você é um desenvolvedor backend expert em Next.js API Routes e tRPC.
**Contexto:** Com base no esquema Drizzle ORM anterior, precisamos de uma API para o PixelForge Pro.
**Tarefa:** Crie um endpoint tRPC para `project.create` que permita a um usuário autenticado criar um novo projeto. Este endpoint deve validar os dados de entrada, criar o projeto no banco de dados e retornar os detalhes do projeto criado.
**Formato de Saída:** Código TypeScript para um procedimento tRPC `project.create`, incluindo validação com Zod e interação com Drizzle ORM.
**Restrições:**
- Use Zod para validação do input.
- Assuma que a autenticação do usuário já foi feita via middleware e o `ctx.user.id` está disponível.
- O projeto deve ter um `name` (string, min 3, max 100) e `description` (string, opcional, max 500).
prompt
// Prompt para Claude/GPT-4
Você é um engenheiro de sistemas distribuídos.
**Contexto:** A geração de imagens IA e o fine-tuning são tarefas demoradas. Precisamos de um sistema de fila para processá-las de forma assíncrona.
**Tarefa:** Descreva a arquitetura de um sistema de fila de mensagens usando Redis (ou Cloudflare KV para Workers) para orquestrar as tarefas de fine-tuning e geração de imagens. Explique como um "worker" (Cloudflare Worker ou Lambda) consumiria essas tarefas.
**Formato de Saída:** Explicação em texto com pseudocódigo para enfileirar e desenfileirar tarefas, e como o worker processaria.
**Restrições:**
- Foco na comunicação assíncrona e resiliência a falhas.
- Cada tarefa na fila deve conter `taskId`, `type` (e.g., 'fine-tune', 'generate'), `payload` (JSON com parâmetros específicos da tarefa), `userId`, `projectId`.
- O worker deve atualizar o status da tarefa no banco de dados.

🎨 Prompts de Frontend & Design

Aqui, o foco é na experiência do usuário, componentes reutilizáveis e um design minimalista dark.

prompt
// Prompt para Claude/GPT-4
Você é um designer de UI/UX e desenvolvedor frontend expert em React, Next.js, shadcn/ui e Tailwind CSS.
**Contexto:** O PixelForge Pro precisa de uma interface para o usuário fazer upload de imagens para fine-tuning de um modelo de IA (DreamBooth/LoRA).
**Tarefa:** Crie um componente React (`FineTuneUploadForm`) que permita ao usuário arrastar e soltar imagens (ou selecionar via clique) para upload. O componente deve exibir miniaturas das imagens selecionadas, um indicador de progresso de upload e um botão para iniciar o fine-tuning. Use `shadcn/ui` para os componentes básicos (Button, Progress, Card) e Tailwind CSS para estilização. O design deve ser minimalista e dark.
**Formato de Saída:** Código TypeScript/React para o componente, incluindo lógica básica de `useState` para gerenciar arquivos e progresso.
**Restrições:**
- Não precisa implementar a lógica real de upload para o backend, apenas o estado local e a UI.
- Use `input type="file"` escondido e lógica de `onDrop`/`onDragOver`.
- Exiba um limite de 10 imagens por upload.
prompt
// Prompt para Claude/GPT-4
Você é um especialista em design de sistemas e acessibilidade.
**Contexto:** O PixelForge Pro terá um painel de controle para gerenciar projetos e tarefas de geração de imagens.
**Tarefa:** Projete a estrutura de navegação principal (sidebar) e um layout de dashboard para o aplicativo. O design deve ser minimalista dark, com foco em usabilidade e acessibilidade (WCAG 2.2). Inclua links para "Meus Projetos", "Modelos IA", "Histórico de Geração", "Configurações" e "Ajuda".
**Formato de Saída:** Código TypeScript/React para um componente `DashboardLayout` usando `Radix UI` para o menu de navegação (se aplicável para acessibilidade) e Tailwind CSS. Inclua ARIA attributes essenciais.
**Restrições:**
- O layout deve ser responsivo.
- Garanta que a navegação por teclado seja funcional.
- Use cores de contraste adequadas para o tema dark.
prompt
// Prompt para Claude/GPT-4
Você é um desenvolvedor frontend com paixão por micro-interações e motion design.
**Contexto:** Para melhorar a experiência do usuário durante a espera pela geração de imagens, precisamos de um feedback visual elegante.
**Tarefa:** Crie um componente React (`ImageGenerationLoader`) que exiba uma animação sutil e minimalista enquanto uma imagem está sendo gerada. Pense em algo como um "esqueleto" da imagem ou um efeito de "loading" que sugere o processo criativo. Use CSS puro (Tailwind JIT) ou uma biblioteca leve de animação (como Framer Motion, se necessário, mas prefira CSS).
**Formato de Saída:** Código TypeScript/React para o componente `ImageGenerationLoader` e o CSS associado.
**Restrições:**
- A animação deve ser performática e não bloquear a thread principal.
- Deve ser visualmente agradável e não intrusiva.
- Tema dark-mode.

🔍 Prompts de SEO & Schema.org

Para que o PixelForge Pro seja encontrado, precisamos de uma estratégia de SEO técnica impecável.

prompt
// Prompt para Claude/GPT-4
Você é um especialista em SEO técnico e dados estruturados.
**Contexto:** O PixelForge Pro é um SaaS. Queremos otimizar a página inicial para ranquear para termos como "gerador de imagens IA para pme", "fine-tuning IA fácil", "imagens de marca com IA".
**Tarefa:** Crie um bloco JSON-LD (`WebSite` e `Organization`) para a homepage do PixelForge Pro. Inclua propriedades essenciais como `name`, `url`, `description`, `logo`, `sameAs` (redes sociais), e `potentialAction` para uma funcionalidade de busca interna.
**Formato de Saída:** Código JSON-LD completo.
**Restrições:**
- Use o tipo `WebSite` e `Organization`.
- A URL principal é `https://pixelforge.pro`.
- O logo é `https://pixelforge.pro/logo.svg`.
- Inclua pelo menos 3 redes sociais fictícias.
prompt
// Prompt para Claude/GPT-4
Você é um especialista em SEO e Next.js.
**Contexto:** Para cada projeto de imagem gerada no PixelForge Pro, queremos criar uma página de destino otimizada para SEO, onde a imagem e seus detalhes (prompt, estilo, etc.) possam ser compartilhados publicamente.
**Tarefa:** Descreva como configurar o `next/head` (ou a nova API de Metadata do Next.js 13+) para uma página de detalhes de imagem (`/projects/[projectId]/images/[imageId]`). Inclua tags `title`, `description`, `og:image`, `og:title`, `og:description`, `twitter:card`, `twitter:image`, `twitter:title`, `twitter:description`.
**Formato de Saída:** Pseudocódigo ou um snippet de componente React/Next.js com as tags de metadata dinâmicas.
**Restrições:**
- As tags devem ser dinâmicas, preenchidas com dados da imagem específica (ex: prompt como descrição).
- `og:image` e `twitter:image` devem apontar para a URL da imagem gerada.
prompt
// Prompt para GPT-4/Claude
Você é um engenheiro de SEO técnico com foco em crawlability e indexação.
**Contexto:** O PixelForge Pro terá milhares de páginas de projetos e imagens geradas. Precisamos garantir que o Googlebot possa rastrear e indexar o conteúdo relevante de forma eficiente.
**Tarefa:** Descreva a estratégia para gerar um `sitemap.xml` dinâmico e um `robots.txt` para o PixelForge Pro. Inclua considerações para páginas públicas de projetos/imagens e como excluir áreas de usuário logado.
**Formato de Saída:** Explicação em texto, com exemplos de `robots.txt` e a estrutura de um `sitemap.xml` dinâmico.
**Restrições:**
- O sitemap deve ser atualizado automaticamente.
- O `robots.txt` deve bloquear rotas de autenticação e dashboards privados.
- Priorize a indexação de conteúdo público e de alta qualidade.

⚡ Prompts de Performance & Core Web Vitals

Performance é crucial para a experiência do usuário e ranqueamento. Vamos otimizar cada milissegundo.

prompt
// Prompt para Claude/GPT-4
Você é um especialista em otimização de performance web e Core Web Vitals.
**Contexto:** O PixelForge Pro exibe muitas imagens geradas. O LCP (Largest Contentful Paint) é uma métrica crítica.
**Tarefa:** Descreva uma estratégia para otimizar o carregamento de imagens no frontend (Next.js) para melhorar o LCP. Inclua técnicas como `next/image`, lazy loading, otimização de formato (WebP/AVIF), e prefetching.
**Formato de Saída:** Explicação detalhada com snippets de código React/Next.js para ilustrar as técnicas.
**Restrições:**
- Foco em imagens visíveis no viewport inicial.
- Considere diferentes tamanhos de tela (srcset).
- Use `priority` em `next/image` para o LCP element.
prompt
// Prompt para Claude/GPT-4
Você é um desenvolvedor frontend com foco em otimização de bundle e carregamento de recursos.
**Contexto:** O PixelForge Pro usa uma stack moderna com Next.js, React, shadcn/ui. O tamanho do bundle JavaScript pode afetar o FID/INP.
**Tarefa:** Descreva como implementar bundle splitting e lazy loading de componentes no Next.js para reduzir o tempo de carregamento inicial e melhorar o FID/INP. Dê exemplos de como aplicar isso a um componente pesado (ex: um editor de imagem complexo ou um gráfico).
**Formato de Saída:** Explicação com snippets de código React/Next.js (`React.lazy`, `next/dynamic`).
**Restrições:**
- Priorize o carregamento sob demanda para funcionalidades não essenciais na primeira renderização.
- Explique o impacto nas métricas de performance.
prompt
// Prompt para Claude/GPT-4
Você é um engenheiro de redes e performance web.
**Contexto:** O PixelForge Pro precisa entregar assets estáticos (CSS, JS, imagens) e dados da API com a menor latência possível para usuários globais.
**Tarefa:** Explique como usar Cloudflare Workers e Cache para servir assets estáticos e cachear respostas da API. Descreva a configuração de headers de cache (`Cache-Control`) e estratégias para invalidação de cache.
**Formato de Saída:** Explicação técnica com exemplos de configuração de Cloudflare Workers e headers HTTP.
**Restrições:**
- Foco em edge caching para assets e respostas de API.
- Diferencie cache de assets estáticos de cache de dados dinâmicos.
- Mencione a importância de `stale-while-revalidate`.

🚀 Prompts de Deploy & DevOps

Automatizar o deploy e monitorar a infraestrutura é a chave para a estabilidade e escalabilidade.

prompt
// Prompt para Claude/GPT-4
Você é um especialista em CI/CD e Vercel.
**Contexto:** O PixelForge Pro é um aplicativo Next.js hospedado na Vercel. Precisamos de um pipeline CI/CD robusto.
**Tarefa:** Descreva a configuração de um pipeline CI/CD na Vercel para o PixelForge Pro. Inclua etapas para testes (unitários, integração), linting, build e deploy automático para ambientes de preview e produção.
**Formato de Saída:** Explicação em texto com um exemplo de arquivo `vercel.json` e menção a GitHub Actions ou Vercel Integrations.
**Restrições:**
- O deploy de preview deve ser acionado em cada PR.
- O deploy para produção deve ser acionado no merge para `main`.
- Inclua variáveis de ambiente seguras.
prompt
// Prompt para Claude/GPT-4
Você é um engenheiro de DevOps e Cloudflare Workers.
**Contexto:** O backend do PixelForge Pro utiliza Cloudflare Workers para API e orquestração de IA.
**Tarefa:** Descreva como configurar o deploy e monitoramento de Cloudflare Workers. Inclua o uso de `wrangler.toml`, secrets, e a integração com ferramentas de logging e observabilidade (ex: Cloudflare Analytics, Sentry).
**Formato de Saída:** Explicação em texto com um exemplo de `wrangler.toml` e menção a boas práticas de monitoramento.
**Restrições:**
- Garanta que secrets não sejam expostos.
- Mencione a importância de versionamento e rollbacks.
- Foco em logs de erros e desempenho.
prompt
// Prompt para Claude/GPT-4
Você é um especialista em observabilidade e monitoramento de aplicações.
**Contexto:** Precisamos monitorar a saúde e performance do PixelForge Pro, tanto frontend quanto backend e o pipeline de IA.
**Tarefa:** Proponha uma estratégia de monitoramento abrangente para o PixelForge Pro. Inclua ferramentas e métricas para:
    1.  **Frontend:** Core Web Vitals, erros de JS, performance de carregamento.
    2.  **Backend:** Latência de API, taxa de erros, uso de recursos (CPU/Memória, se aplicável).
    3.  **Pipeline de IA:** Tempo de fila, tempo de processamento de tarefas, taxa de sucesso/falha de geração.
**Formato de Saída:** Lista de ferramentas e métricas por categoria, com uma breve justificativa.
**Restrições:**
- Foque em soluções modernas e integráveis (ex: Vercel Analytics, Sentry, PostHog, Prometheus/Grafana para workers).
- Priorize métricas acionáveis.

4. Prompt Único Completo

Este é o prompt nuclear, o "big bang" do PixelForge Pro. Ele tenta encapsular a visão completa para uma IA mais avançada.

prompt
// Prompt para GPT-4 (com gpt-4-turbo ou superior) / Claude Opus
Você é o Zé Mané, um arquiteto de software autodidata e gênio técnico. Sua tarefa é gerar um plano de projeto completo para o PixelForge Pro, um SaaS que democratiza a geração de imagens IA personalizadas para PMEs e criadores de conteúdo, abstraindo a complexidade do fine-tuning de modelos.

**Contexto do Projeto:**
- **Nome:** PixelForge Pro
- **Problema:** Abstrair complexidade do fine-tuning (DreamBooth/LoRA) e geração de imagens IA para PMEs/criadores.
- **Público-alvo:** PMEs e criadores de conteúdo sem conhecimento técnico em IA/infra.
- **Objetivo:** Geração de imagens de alta qualidade, consistentes com a marca, escalável.
- **Estilo de Design:** Minimalista dark.
- **Complexidade:** Intermediário (com desafios de IA).
- **Stack Preferida:** Next.js 14+, React 19, Remix (opcional para edge), Astro (opcional para marketing), Vite, Tailwind v4, shadcn/ui, Radix UI, tRPC, Drizzle ORM, Supabase, PlanetScale, Vercel, Cloudflare Workers, Replicate/Hugging Face Inference API.

**Tarefa:**
Gere um plano detalhado que inclua os seguintes componentes, com foco em prompts cirúrgicos e exemplos de código quando aplicável:

1.  **Diagrama de Arquitetura (Mermaid):** Um diagrama que visualize a interação entre Frontend, Backend API, Banco de Dados, Fila de Mensagens, Serviço de Workers IA, Provedor de Modelos IA e Armazenamento de Imagens. Destaque Vercel, Cloudflare e Supabase/PlanetScale.
2.  **Esquema de Banco de Dados (Drizzle ORM):**
    *   Defina as tabelas `User`, `Project`, `AIModel` (para fine-tuning), `ImageGenerationTask`, `GeneratedImage`.
    *   Inclua campos essenciais, tipos de dados (MySQL/PlanetScale), relacionamentos e índices.
    *   Forneça o código TypeScript para o Drizzle schema.
3.  **Endpoints API Essenciais (tRPC):**
    *   `project.create`: Cria um novo projeto para o usuário.
    *   `aiModel.uploadFineTuningData`: Inicia o upload de dados para fine-tuning.
    *   `image.generate`: Enfileira uma tarefa de geração de imagem.
    *   Forneça pseudocódigo ou snippets tRPC para cada um, incluindo validação com Zod e interação com Drizzle.
4.  **Componentes Frontend Chave (React/Next.js, shadcn/ui, Tailwind CSS):**
    *   `FineTuneUploadForm`: Componente para upload de imagens para fine-tuning (arrastar e soltar, miniaturas, progresso).
    *   `ImageGenerationForm`: Formulário para inserir prompt, negative prompt, estilo e iniciar a geração.
    *   `ImageGallery`: Exibição de imagens geradas com lazy loading e opções de download/compartilhamento.
    *   `DashboardLayout`: Layout principal com navegação lateral (minimalista dark, acessível).
    *   Forneça pseudocódigo ou snippets React para a estrutura e lógica básica de cada componente, com foco no design minimalista dark e acessibilidade.
5.  **Estratégia de Orquestração de IA:**
    *   Detalhe o fluxo desde a requisição do usuário até a imagem gerada, usando uma fila de mensagens (Redis/Cloudflare KV) e workers (Cloudflare Workers/Lambda).
    *   Explique como o worker interage com Replicate/Hugging Face para fine-tuning e geração.
    *   Descreva como o status da tarefa é atualizado no banco de dados.
6.  **Otimização de SEO & Core Web Vitals:**
    *   Estratégia para `sitemap.xml` dinâmico e `robots.txt`.
    *   JSON-LD para `WebSite` e `Organization` na homepage.
    *   Otimização de imagens (`next/image`, WebP/AVIF, lazy loading) para LCP.
    *   Bundle splitting e lazy loading de componentes para FID/INP.
7.  **Estratégia de Deploy & Observabilidade:**
    *   CI/CD na Vercel para frontend e Cloudflare Workers para backend.
    *   Ferramentas de monitoramento para frontend (CWV, erros), backend (latência, erros) e pipeline de IA (tempos de processamento, falhas).

**Formato de Saída:** Um documento técnico bem estruturado em Markdown, com blocos de código para prompts e snippets, seguindo o estilo do Zé Mané (técnico, acessível, irreverente).

**Restrições Globais:**
- Use português brasileiro, mas termos técnicos em inglês.
- Priorize soluções serverless e edge-first.
- Mantenha o foco na simplicidade para o usuário final, mas com complexidade técnica robusta por trás.
- Garanta que a acessibilidade (WCAG 2.2) seja uma preocupação desde o design.
- Otimização de performance deve ser intrínseca a cada decisão.
- Cada prompt deve ser específico e acionável.

5. Stack Mínima Viável (para lançar em 48h)

Pra botar essa joia no ar rapidinho, sem perder a qualidade, a gente vai focar no essencial, mas com a base mais sólida que existe.

  • Frontend: Next.js 14+ (App Router), React 19, Tailwind CSS v4, shadcn/ui
    • Por que: Velocidade de desenvolvimento, performance com SSR/SSG, componentes prontos e estilização rápida.
  • Backend & API: Next.js API Routes (dentro do mesmo projeto Next.js)
    • Por que: Simplifica o deploy e a comunicação frontend-backend, ideal para MVPs.
  • Banco de Dados: Supabase (PostgreSQL + Auth)
    • Por que: DB relacional robusto, autenticação pronta, armazenamento de arquivos (Supabase Storage) para fine-tuning data e imagens geradas. Tudo em um só lugar, fácil de escalar.
  • ORM: Drizzle ORM
    • Por que: Tipagem segura, performance e suporte a PostgreSQL.
  • Autenticação: Supabase Auth
    • Por que: Integrado ao DB, fácil de configurar, suporta social logins.
  • Provedor de IA: Replicate
    • Por que: API simples para modelos de IA, incluindo DreamBooth e Stable Diffusion. Abstrai totalmente a infraestrutura de GPU.
  • Deploy: Vercel
    • Por que: Integração perfeita com Next.js, deploys automáticos, edge functions, CDN global.

Total de Tecnologias Core: 8. Com isso, você tem um produto de ponta rodando em tempo recorde.

6. Checklist de Lançamento

Antes de apertar o botão "Go Live", o Zé Mané tem 10 mandamentos técnicos que você precisa seguir à risca.

  1. ✅ Core Web Vitals Verificados: Rodou o Lighthouse na homepage e nas páginas críticas? LCP, FID/INP, CLS verdes? Se não, otimize as imagens, fontes e o bundle JS.
  2. ✅ JSON-LD Implementado: O Schema.org (WebSite, Organization, Product/Service) está no lugar certo na homepage e nas páginas de destino? Validou com o Rich Results Test do Google?
  3. ✅ Sitemap.xml e Robots.txt Configurados: O sitemap dinâmico está gerando as URLs corretas? O robots.txt está bloqueando o que deve e permitindo o que importa? Enviou o sitemap ao Google Search Console?
  4. ✅ Acessibilidade (WCAG 2.2) Auditada: Testou a navegação por teclado? Cores com contraste suficiente? ARIA attributes corretos para leitores de tela? Use ferramentas como Axe DevTools.
  5. ✅ Testes de Integração e E2E Passando: Seus testes estão garantindo que o fluxo de usuário (login, upload, geração de imagem) funciona do início ao fim? Cypress ou Playwright rodando liso.
  6. ✅ Variáveis de Ambiente Seguras: Todas as chaves de API, secrets e credenciais estão armazenadas de forma segura (Vercel Environment Variables, Cloudflare Secrets, Supabase Vault) e não expostas no código-fonte?
  7. ✅ Monitoramento Ativo: Sentry para erros, Vercel Analytics para frontend, logs de Cloudflare Workers/Supabase para backend e métricas de fila/IA estão configurados e enviando alertas?
  8. ✅ Estratégia de Cache Definida: Headers Cache-Control configurados para assets estáticos e respostas de API? Invalidação de cache funcionando para dados dinâmicos?
  9. ✅ Backup do Banco de Dados: A estratégia de backup do Supabase/PlanetScale está configurada e testada? Você sabe como restaurar os dados em caso de desastre?
  10. ✅ Plano de Escalabilidade Básico: Entende os limites do seu plano atual (Supabase, Replicate, Vercel) e tem um plano para fazer upgrade quando a demanda explodir?

Com essa base, o PixelForge Pro não será apenas um SaaS, será uma máquina de guerra digital, pronta para dominar o mercado. Agora, vai lá e bota a mão na massa! Zé Mané desligando.

Compartilhar