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

Prompts Mestre: VisualCraft Pro - Gerando Imagens e Vídeos IA para Negócios com Next.js e Supabase

(há 20 dias)
Prompts Mestre: VisualCraft Pro - Gerando Imagens e Vídeos IA para Negócios com Next.js e Supabase

E aí, meu povo da engenharia! Zé Mané na área, e hoje a gente vai desmistificar a criação de um produto que vai botar muito designer e marqueteiro pra pensar: o VisualCraft Pro. O CEO Alfredo mandou a letra, e a gente vai transformar a visão dele em código e prompts cirúrgicos. Chega de papo furado, vamos codar!

O Projeto em 30 Segundos

O VisualCraft Pro é a ponte que faltava entre o poder bruto da IA generativa de imagem e vídeo (tipo SD.Next) e o empreendedor não-técnico. Ele vai pegar a complexidade de prompts, modelos e parâmetros e transformar numa interface "Prompt-to-Asset" intuitiva. Nosso objetivo é permitir que PMEs, autônomos e microempreendedores criem conteúdo visual de alta qualidade para marketing e vendas, sem precisar de um PhD em IA ou um designer a tiracolo. Pense em modelos pré-definidos, assistentes guiados e uma tradução mágica de inputs simples em prompts complexos para a IA. Tudo isso com uma stack moderna e performance de foguete.

Arquitetura Recomendada

Pra botar o VisualCraft Pro de pé, a gente vai usar uma arquitetura serveless, escalável e com foco em performance de ponta a ponta. O Next.js 14+ no Vercel vai ser o coração do frontend e das nossas Edge Functions, enquanto o Supabase cuida do banco de dados e autenticação. O tRPC garante a segurança e o type-safety entre frontend e backend. E pra IA generativa, vamos orquestrar com Cloudflare Workers e talvez um serviço de terceiros para a geração pesada (ou até mesmo um endpoint customizado rodando SD.Next).

Mermaid Error: Parse error on line 4: ...JSApp -->|API Calls (tRPC)| VercelEdgeFu -----------------------^ Expecting 'SQE', 'DOUBLECIRCLEEND', 'PE', '-)', 'STADIUMEND', 'SUBROUTINEEND', 'PIPE', 'CYLINDEREND', 'DIAMOND_STOP', 'TAGEND', 'TRAPEND', 'INVTRAPEND', 'UNICODE_TEXT', 'TEXT', 'TAGSTART', got 'PS'

Show Code
graph TD
    User[Usuário Final] -->|Acessa App| VercelCDN(Vercel CDN)
    VercelCDN --> NextJSApp(Next.js 14+ App)
    NextJSApp -->|API Calls (tRPC)| VercelEdgeFunctions(Vercel Edge Functions)
    VercelEdgeFunctions -->|Auth, DB, Storage| Supabase(Supabase: Auth, PostgreSQL, Storage)
    VercelEdgeFunctions -->|Orquestra Geração de Imagens/Vídeos| CloudflareWorkers(Cloudflare Workers)
    CloudflareWorkers -->|Chama API Externa (SD.Next, etc.)| AIGenerator(Serviço de IA Generativa)
    AIGenerator -->|Retorna URL do Asset| CloudflareWorkers
    CloudflareWorkers -->|Salva URL no DB, Notifica User| Supabase
    Supabase -->|Webhooks/Realtime| VercelEdgeFunctions
    NextJSApp -->|Exibe Assets Gerados| User
    NextJSApp -->|Upload de Imagens para Modelos| SupabaseStorage(Supabase Storage)

Explicação Rápida:

  • Next.js 14+ (App Router): Frontend e API Routes (Edge Functions) para a lógica do backend.
  • tRPC: Comunicação type-safe entre frontend e Edge Functions.
  • Supabase: Banco de dados PostgreSQL para usuários, prompts, assets gerados, modelos, etc. Autenticação (Auth) e armazenamento de arquivos (Storage).
  • Vercel: Hospedagem do Next.js, Edge Functions e CDN.
  • Cloudflare Workers: Camada de orquestração para a IA generativa. Ideal para lidar com chamadas assíncronas e processamento em background, desacoplando a geração pesada do Next.js.
  • Serviço de IA Generativa: Pode ser um endpoint de SD.Next customizado, Stability AI API, Replicate, ou similar.

Prompts Mestre por Categoria

Chega de teoria, vamos aos prompts que vão fazer a magia acontecer. Lembre-se, cada prompt é um bisturi, não um martelo.

🏗️ Prompts de Arquitetura & Backend

Aqui a gente define a espinha dorsal do nosso sistema: banco de dados, autenticação e as APIs que vão orquestrar a geração de assets.

prompt
Role: Arquiteto de Software e Engenheiro Backend.
Context: Estamos construindo o VisualCraft Pro, uma plataforma para simplificar a geração de conteúdo visual por IA para não-técnicos. A stack é Next.js 14 (App Router), tRPC, Drizzle ORM, Supabase (PostgreSQL, Auth, Storage), Vercel e Cloudflare Workers.
Task: Crie um esquema Drizzle ORM completo para o Supabase PostgreSQL, incluindo tabelas para `users`, `user_prompts` (prompts salvos pelo usuário), `ai_models` (modelos de IA disponíveis), `generated_assets` (imagens/vídeos gerados), e `templates` (modelos pré-definidos de prompts). Inclua relacionamentos, tipos de dados adequados (ex: `jsonb` para parâmetros de IA), timestamps (`createdAt`, `updatedAt`), e colunas para controle de acesso básico (ex: `user_id`).
Output Format: Código TypeScript para o esquema Drizzle ORM (schema.ts), com comentários explicativos para cada tabela e campo.
Constraints:
- Use `pgTable` e `pgSchema` do Drizzle ORM.
- Garanta que `user_id` seja um UUID e referencie a tabela `auth.users` do Supabase.
- Inclua índices onde apropriado para performance.
- Use `timestamp` com `default: sql` para `createdAt` e `updatedAt`.
prompt
Role: Engenheiro Backend.
Context: Com o esquema Drizzle ORM definido, precisamos implementar as rotas tRPC para gerenciar os prompts dos usuários e os assets gerados. A stack é Next.js 14 (App Router), tRPC, Drizzle ORM, Supabase.
Task: Desenvolva um módulo tRPC (`app/api/trpc/[trpc]/route.ts` e `server/routers/asset.ts`) que permita:
1.  Criar um novo `user_prompt` (input: texto simples do usuário, output: `user_prompt_id`).
2.  Listar todos os `user_prompts` de um usuário autenticado.
3.  Obter detalhes de um `user_prompt` específico, incluindo `generated_assets` associados.
4.  Iniciar o processo de geração de um asset a partir de um `user_prompt_id`. Esta rota deve chamar uma Edge Function que, por sua vez, invoca um Cloudflare Worker assincronamente.
Output Format: Código TypeScript para o router tRPC (`server/routers/asset.ts`) e o arquivo de API (`app/api/trpc/[trpc]/route.ts`), incluindo validação de input com Zod e exemplos de uso.
Constraints:
- Implemente autenticação básica usando `ctx.session.user.id`.
- A rota de geração deve retornar um `job_id` para o frontend monitorar o status.
- Use `protectedProcedure` do tRPC para rotas que exigem autenticação.
prompt
Role: Engenheiro de Cloudflare Workers.
Context: O VisualCraft Pro precisa de um serviço assíncrono para traduzir prompts simples em prompts complexos para a IA generativa e orquestrar a chamada à API externa. A stack é Cloudflare Workers.
Task: Crie um Cloudflare Worker (`worker.ts`) que:
1.  Receba um `user_prompt_id` e o `user_id` via HTTP POST.
2.  Busque o `user_prompt` correspondente no Supabase (usando a API REST do Supabase ou um SDK).
3.  Use um modelo de linguagem (ex: chamando uma API externa como GPT-4 ou Claude) para expandir o prompt simples do usuário em um prompt complexo e otimizado para IA generativa (incluindo parâmetros como estilo, resolução, etc.).
4.  Chame a API de um serviço de IA generativa (simule com um placeholder `fetch` para `https://api.aigenerator.com/generate`) com o prompt complexo e parâmetros.
5.  Salve o status da geração (`pending`, `completed`, `failed`) e a URL do asset gerado (se sucesso) de volta no Supabase.
6.  Envie uma notificação (ex: via webhook para uma Edge Function do Next.js ou Supabase Realtime) quando a geração for concluída.
Output Format: Código TypeScript para o Cloudflare Worker, com exemplos de como interagir com o Supabase e a API de IA.
Constraints:
- Use `KV Namespace` do Cloudflare para armazenar chaves de API ou configurações sensíveis.
- O worker deve ser robusto a falhas e incluir retries básicos.
- Simule a chamada à API de IA com um `setTimeout` para atrasar a resposta e simular processamento.

🎨 Prompts de Frontend & Design

Aqui a gente dá vida à interface, garantindo que o não-técnico consiga usar o VisualCraft Pro sem esforço, com um design minimalista dark.

prompt
Role: Desenvolvedor Frontend e Designer UX/UI.
Context: O VisualCraft Pro precisa de uma interface "Prompt-to-Asset" intuitiva e minimalista, com um tema dark-first. A stack é Next.js 14, React 19, Tailwind CSS v4 (ou JIT), shadcn/ui, Radix UI.
Task: Crie o componente principal da página de geração (`app/dashboard/generate/page.tsx`). Este componente deve incluir:
1.  Um `Textarea` grande para o usuário inserir seu prompt simples.
2.  Um botão "Gerar Asset" que desabilita durante o processamento.
3.  Uma área para exibir os assets gerados (miniaturas clicáveis).
4.  Um componente `LoadingSpinner` ou `Skeleton` enquanto a geração está em andamento.
5.  Um `Toast` para notificações de sucesso/erro.
Output Format: Código TypeScript/TSX para o componente React, usando Tailwind CSS para estilização e componentes shadcn/ui/Radix UI. Inclua o uso de `useMutation` do tRPC para interagir com o backend.
Constraints:
- Design dark-first, minimalista.
- Use `shadcn/ui` para componentes como `Button`, `Textarea`, `Toast`.
- Implemente `react-query` (via tRPC) para gerenciar o estado de requisições.
- Utilize CSS custom properties para cores do tema dark.
prompt
Role: Desenvolvedor Frontend.
Context: Precisamos de um componente para exibir os assets gerados de forma atraente e funcional. A stack é Next.js 14, React 19, Tailwind CSS, shadcn/ui.
Task: Desenvolva um componente `AssetCard` (`components/asset-card.tsx`) que:
1.  Receba um objeto `asset` (contendo `url`, `type` (image/video), `prompt_text`, `status`).
2.  Exiba uma miniatura (para imagem) ou um player de vídeo simples (para vídeo).
3.  Mostre o prompt original que gerou o asset ao passar o mouse ou clicar.
4.  Tenha um botão de download para o asset.
5.  Indique o status da geração (ex: um ícone de "processando" ou "falha").
Output Format: Código TypeScript/TSX para o componente React, com estilização Tailwind CSS e uso de ícones (ex: `lucide-react`).
Constraints:
- Design responsivo.
- Use `Image` component do Next.js para otimização de imagens.
- Para vídeos, use a tag `<video>` nativa com `controls`.
- Tema dark-first.
prompt
Role: Designer UX/UI e Desenvolvedor Frontend.
Context: Para simplificar a experiência do usuário, o VisualCraft Pro precisa de modelos pré-definidos e assistentes guiados. A stack é Next.js 14, React 19, Tailwind CSS, shadcn/ui.
Task: Crie um componente `TemplateSelector` (`components/template-selector.tsx`) que:
1.  Liste modelos pré-definidos (ex: "Imagem de Produto para E-commerce", "Banner para Redes Sociais", "Vídeo Curto para Anúncio").
2.  Ao selecionar um modelo, preencha automaticamente o `Textarea` da página de geração com um prompt inicial e talvez algumas opções de configuração (ex: "estilo: realista", "formato: quadrado").
3.  Permita que o usuário personalize o prompt pré-preenchido.
Output Format: Código TypeScript/TSX para o componente React, usando `shadcn/ui` (ex: `Select`, `Card`) e Tailwind CSS. Inclua um array de objetos `templates` como mock data.
Constraints:
- Integração fluida com o componente de geração de prompt.
- Design intuitivo e minimalista.
- Tema dark-first.

🔍 Prompts de SEO & Schema.org

Mesmo sendo um SaaS, o VisualCraft Pro precisa ser descoberto. SEO técnico é fundamental, especialmente para ranquear por termos relacionados a "geração de imagem IA", "marketing visual PME", etc.

prompt
Role: Especialista em SEO Técnico.
Context: O VisualCraft Pro é uma plataforma SaaS. Precisamos otimizar as páginas principais para ranqueamento no Google, focando em termos como "gerador de imagens IA para PMEs", "conteúdo visual marketing", etc. A stack é Next.js 14 (App Router).
Task: Crie um conjunto de meta tags e dados estruturados Schema.org (JSON-LD) para a página inicial (`app/page.tsx`) e a página de "Modelos" (`app/templates/page.tsx`).
Output Format: Código TypeScript/TSX para os componentes de metadados do Next.js (`metadata` export) e blocos `<script type="application/ld+json">` para Schema.org.
Constraints:
- Para a página inicial: `WebSite` e `Organization` Schema.
- Para a página de modelos: `CollectionPage` e `ItemList` ou `CreativeWork` para cada modelo.
- Inclua `title`, `description`, `og:image`, `twitter:card`, `canonical` URL.
- Use variáveis de ambiente para o domínio base.
prompt
Role: Especialista em SEO Técnico.
Context: A indexação e rastreamento são cruciais para o VisualCraft Pro. A stack é Next.js 14 (App Router).
Task: Crie os arquivos `robots.txt` e `sitemap.xml` para o VisualCraft Pro.
Output Format: Conteúdo para `public/robots.txt` e um exemplo de `app/sitemap.ts` (Next.js Sitemap API).
Constraints:
- `robots.txt` deve permitir o rastreamento de todas as páginas públicas e referenciar o sitemap.
- `sitemap.ts` deve gerar um sitemap dinâmico incluindo as páginas principais (home, about, pricing, contact, login, register, dashboard) e, eventualmente, URLs de modelos públicos.
- Use a URL base do site (variável de ambiente) para o sitemap.

⚡ Prompts de Performance & Core Web Vitals

Performance não é luxo, é requisito. Pra Zé Mané, Core Web Vitals é a bíblia.

prompt
Role: Engenheiro de Performance Web.
Context: O VisualCraft Pro precisa ter pontuações perfeitas no Lighthouse e Core Web Vitals. A stack é Next.js 14, React 19, Tailwind CSS, Vercel.
Task: Implemente as seguintes otimizações de performance para o frontend:
1.  **Otimização de Imagens**: Configure o componente `next/image` para usar `priority` em imagens LCP e `sizes` adequados.
2.  **Otimização de Fontes**: Use `next/font/google` para otimizar o carregamento de fontes, garantindo `font-display: swap`.
3.  **Bundle Splitting/Lazy Loading**: Demonstre como lazy load de componentes React (ex: um componente de galeria de assets pesada) pode ser implementado.
4.  **Critical CSS**: Explique como o Tailwind CSS JIT/v4 já otimiza isso, mas mencione a importância.
Output Format: Snippets de código TypeScript/TSX para `next.config.js`, `app/layout.tsx`, e um componente de exemplo com lazy loading.
Constraints:
- Foco em melhorias para LCP, FID/INP e CLS.
- Use as features nativas do Next.js para otimização.
prompt
Role: Engenheiro de Performance Web.
Context: Para garantir a responsividade e performance do VisualCraft Pro, precisamos otimizar o carregamento e a interação com assets gerados.
Task: Descreva e demonstre como implementar:
1.  **Cache de Assets**: Estratégias para caching de imagens/vídeos gerados no lado do cliente e no CDN (Vercel/Cloudflare).
2.  **Progressive Image Loading**: Usar placeholders de baixa qualidade (LQIP) ou blurhash antes do carregamento completo da imagem.
3.  **View Transitions API**: Como aplicar a View Transitions API para navegações mais suaves entre as páginas de listagem e detalhe de assets.
Output Format: Explicação conceitual e snippets de código (CSS e JS/React) para cada técnica.
Constraints:
- Foco na experiência do usuário e métricas de performance percebida.
- Para View Transitions, considere a compatibilidade e fallback.

🚀 Prompts de Deploy & DevOps

Colocar o VisualCraft Pro no ar e mantê-lo rodando liso é a última etapa, mas não menos importante.

prompt
Role: Engenheiro de DevOps.
Context: O VisualCraft Pro está pronto para deploy. A stack é Next.js 14, Vercel, Supabase, Cloudflare Workers.
Task: Crie um guia de configuração para deploy contínuo (CI/CD) no Vercel e Cloudflare Workers, incluindo variáveis de ambiente e segredos.
Output Format: Um arquivo `vercel.json` de exemplo, um `.env.local` de exemplo, e instruções passo a passo para configurar os segredos no Vercel e Cloudflare.
Constraints:
- Variáveis de ambiente para `SUPABASE_URL`, `SUPABASE_ANON_KEY`, `AI_GENERATOR_API_KEY`, `NEXT_PUBLIC_SITE_URL`.
- Configuração de domínios customizados e SSL.
- Instruções para conectar o repositório Git (GitHub/GitLab) ao Vercel e Cloudflare.
prompt
Role: Engenheiro de DevOps.
Context: Precisamos de monitoramento básico para o VisualCraft Pro.
Task: Descreva como configurar monitoramento de performance e erros para o Next.js no Vercel e para os Cloudflare Workers.
Output Format: Explicação das ferramentas e configurações.
Constraints:
- Para Vercel: Vercel Analytics, Log Drains (ex: DataDog, Logtail).
- Para Cloudflare Workers: Cloudflare Analytics, Workers Trace.
- Mencione a importância de ferramentas de APM (Application Performance Monitoring) como Sentry ou New Relic para rastreamento de erros e performance.

Prompt Único Completo

Se você é o tipo de pessoa que gosta de pedir tudo de uma vez (e tem uma IA potente o suficiente pra aguentar), aqui está o mega-prompt. Cuidado, ele é denso!

prompt
Role: Engenheiro de Software Full-Stack Sênior e Arquiteto de Soluções.
Context: Você é Zé Mané. Estamos construindo o "VisualCraft Pro", uma plataforma SaaS que simplifica a geração de conteúdo visual por IA para não-técnicos. A stack é Next.js 14 (App Router), React 19, tRPC, Drizzle ORM, Supabase (PostgreSQL, Auth, Storage), Vercel, Cloudflare Workers, Tailwind CSS v4, shadcn/ui, Radix UI. O design é minimalista dark-first. O objetivo é MVP.
Task: Gere um projeto Next.js completo para o VisualCraft Pro, incluindo:
1.  **Estrutura de Pastas**: Organização padrão do Next.js App Router.
2.  **Drizzle ORM Schema**: `schema.ts` para `users`, `user_prompts`, `ai_models`, `generated_assets`, `templates`.
3.  **tRPC Router**: `server/routers/asset.ts` com rotas para criar/listar prompts e iniciar geração de assets.
4.  **Cloudflare Worker**: `worker.ts` para expandir prompts e orquestrar a chamada à API de IA (simulada).
5.  **Página de Geração de Assets**: `app/dashboard/generate/page.tsx` com `Textarea`, botão de geração, área de exibição de assets, loading state e toast.
6.  **Componente `AssetCard`**: `components/asset-card.tsx` para exibir imagens/vídeos gerados.
7.  **Componente `TemplateSelector`**: `components/template-selector.tsx` para modelos pré-definidos.
8.  **Configuração de Autenticação**: Integração básica com Supabase Auth no Next.js.
9.  **Meta Tags & Schema.org**: `metadata` export e JSON-LD para `app/page.tsx`.
10. **`robots.txt` e `sitemap.ts`**.
11. **Otimizações de Performance**: Configuração de `next/image` e `next/font`.
12. **Configuração de Deploy**: `vercel.json` e instruções para variáveis de ambiente.
Output Format: Arquivos de código TypeScript/TSX/JSON/TXT completos, organizados por pasta, com comentários explicativos. Use blocos de código markdown para cada arquivo.
Constraints:
- Priorize a funcionalidade do MVP.
- Design dark-first com Tailwind CSS e shadcn/ui.
- Todos os arquivos devem ser funcionais e interconectados.
- Simule chamadas externas com placeholders ou `setTimeout`.
- Inclua todas as dependências necessárias no `package.json`.
- Foque na segurança (autenticação, validação de input).

Stack Mínima Viável (Lançamento em 48h)

Pra botar o VisualCraft Pro no ar rápido, a gente precisa ser cirúrgico. Esquece o "nice to have" e foca no "must have".

  1. Next.js 14+ (App Router): O frontend e as APIs (Edge Functions) para a interface do usuário.
  2. React 19 (ou 18): A biblioteca UI.
  3. Tailwind CSS v4 (ou JIT): Estilização rápida e consistente, dark-first.
  4. shadcn/ui & Radix UI: Componentes UI acessíveis e personalizáveis.
  5. tRPC: API type-safe entre frontend e backend.
  6. Drizzle ORM: ORM leve para interagir com o banco de dados.
  7. Supabase: Banco de dados PostgreSQL, Autenticação e Storage de arquivos.
  8. Vercel: Plataforma de deploy para Next.js e Edge Functions.
  9. Cloudflare Workers: Para orquestração assíncrona da IA generativa.
  10. Zod: Validação de esquemas para inputs do tRPC.
  11. Um serviço de IA Generativa: Pode ser Stability AI API, Replicate, ou um endpoint customizado rodando SD.Next. Para MVP, comece com uma API de terceiros.

Checklist de Lançamento

Antes de apertar o botão "Go Live", Zé Mané sempre confere esses 10 itens. Não vacila!

  1. ✅ Autenticação e Autorização: Testado exaustivamente. Usuários só acessam o que devem.
  2. ✅ Validação de Inputs: Todos os dados de entrada do usuário são validados no frontend e backend (com Zod no tRPC).
  3. ✅ Tratamento de Erros: Mensagens de erro claras para o usuário e logs detalhados para o desenvolvedor.
  4. ✅ Core Web Vitals: Pontuações verdes no Lighthouse (pelo menos 90+ em Performance, Acessibilidade, Melhores Práticas, SEO).
  5. ✅ Responsividade: Testado em diversos tamanhos de tela (mobile, tablet, desktop).
  6. ✅ Acessibilidade (WCAG 2.2): Navegação por teclado, contraste de cores, semântica HTML básica.
  7. ✅ SEO Básico: robots.txt, sitemap.xml, meta tags e Schema.org configurados para as páginas principais.
  8. ✅ Segurança de Variáveis de Ambiente: Todas as chaves de API e segredos configurados de forma segura (Vercel Environment Variables, Cloudflare Secrets).
  9. ✅ Testes End-to-End (E2E): Pelo menos um fluxo crítico (ex: "Criar Prompt -> Gerar Asset -> Visualizar Asset") testado com Playwright ou Cypress.
  10. ✅ Monitoramento Básico: Logs e métricas configurados no Vercel e Cloudflare para identificar problemas rapidamente.

É isso aí, galera! Com esses prompts e essa mentalidade, o VisualCraft Pro sai do papel e domina o mercado. Agora, vai lá e bota a mão na massa! Zé Mané tá de olho!

Compartilhar