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

Prompts Mestre: PixelForge Pro – IA Generativa de Imagem NATIVA no Mac com Next.js e MLX

(há 20 dias)
Prompts Mestre: PixelForge Pro – IA Generativa de Imagem NATIVA no Mac com Next.js e MLX

E aí, cambada de devs e aspirantes a gênios! Zé Mané na área, e hoje a gente vai desmistificar essa tal de IA generativa de imagem, mas não do jeito que o Alfredo do artigo da Folha IA pensa. Ele tá lá celebrando a tecnologia, e eu tô aqui pensando em como a gente vai empacotar isso numa solução que o mercado vai pagar muito para ter. O papo é reto: PixelForge Pro.

Chega de papo furado de "futuro da IA". O futuro é AGORA, e ele roda nativamente no seu Mac, sem custo por crédito, sem latência de nuvem, e com privacidade que nem o FBI consegue quebrar. A gente vai construir isso com prompts cirúrgicos que até a IA mais burra vai entender. Bora lá!

1. O Projeto em 30 Segundos

O PixelForge Pro é a solução definitiva para geração de imagens por IA em Macs com Apple Silicon. Ele resolve a dor de cabeça dos custos por crédito, latência da nuvem e preocupações com privacidade, oferecendo processamento local ultrarrápido, uma UI intuitiva para profissionais criativos e um modelo de negócio previsível baseado em assinatura. A arquitetura é um híbrido inteligente: um frontend web moderno (Next.js, React 19, Tailwind v4) que se comunica com um backend leve (tRPC, Drizzle ORM, Supabase) para gerenciamento de usuários e assinaturas, enquanto a verdadeira mágica da IA acontece diretamente no hardware do usuário via MLX da Apple, garantindo performance e privacidade inigualáveis. É a IA generativa de imagem para profissionais, sem a balela da nuvem.

2. Arquitetura Recomendada

A parada aqui é ser esperto. A gente não vai reinventar a roda pra gerenciar usuário e pagamento. Isso fica na nuvem, leve e rápido. A inteligência pesada, a geração de imagem mesmo, essa vai pro hardware do cliente. Menos custo pra gente, mais performance e privacidade pra eles.

Mermaid Error: Parse error on line 6: ...de Dados - Supabase (PostgreSQL)] F -----------------------^ 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 Final - Mac Apple Silicon] --> B(PixelForge Pro Desktop App)
    B --> C{Frontend Web - Next.js 14+, React 19, Tailwind v4}
    C --> D(tRPC Client)
    D -- Requisições de Autenticação, Assinatura, Perfil --> E[Backend API - tRPC, Drizzle ORM]
    E --> F[Banco de Dados - Supabase (PostgreSQL)]
    F -- Armazena Dados de Usuário, Assinatura, Histórico de Prompts (Metadados) --> E
    B -- Geração de Imagem Local --> G[MLX Framework (Apple)]
    G -- Usa Modelos de IA Otimizados para Apple Silicon --> H[Hardware Apple Silicon]
    C -- Exibe Imagens Geradas --> B
    C -- Gerencia Assinaturas/Pagamentos --> I[Stripe/Paddle (Webhook)]
    I --> E

Explicação da Arquitetura:

  1. Usuário Final (Mac Apple Silicon): Nosso público-alvo. Eles rodam o aplicativo.
  2. PixelForge Pro Desktop App: Um wrapper Electron ou Tauri que hospeda nosso frontend web. Isso permite acesso a APIs nativas do sistema (como gerenciamento de arquivos locais) e a integração com o MLX.
  3. Frontend Web (Next.js 14+, React 19, Tailwind v4): A interface do usuário. Responsável por toda a interação visual, formulários de prompts, exibição de resultados, gerenciamento de histórico (metadados), e fluxo de assinatura.
  4. tRPC Client: Cliente para comunicação segura e type-safe com o backend.
  5. Backend API (tRPC, Drizzle ORM): Hospedado na Vercel (Edge Functions). Lida com:
    • Autenticação e Autorização (NextAuth.js integrado com Supabase Auth).
    • Gerenciamento de Assinaturas (integração com Stripe/Paddle).
    • Armazenamento de Metadados de Geração (prompts, configurações, IDs de usuário, mas não as imagens em si).
    • Gerenciamento de Perfil do Usuário.
  6. Banco de Dados (Supabase PostgreSQL): Onde guardamos os dados de usuário, assinaturas, histórico de prompts (metadados), etc. Supabase oferece Auth, DB e Storage (que usaremos apenas para metadados, não para as imagens geradas).
  7. MLX Framework (Apple): A estrela do show. É a camada que interage diretamente com o hardware Apple Silicon para executar os modelos de IA de geração de imagem. Isso acontece localmente no Mac do usuário.
  8. Hardware Apple Silicon: Onde a magia da performance acontece.
  9. Stripe/Paddle (Webhook): Plataformas de pagamento para gerenciar as assinaturas. Webhooks garantem que nosso backend seja notificado sobre eventos de pagamento.

3. Prompts Mestre por Categoria

Aqui é onde a porca torce o rabo. Cada prompt é uma bala de prata, testada e aprovada pelo Zé Mané.

🏗️ Prompts de Arquitetura & Backend

Foco em um backend leve, seguro e escalável para gerenciar usuários e assinaturas, sem tocar na geração de imagem pesada.

  1. Prompt para Estrutura de Projeto Next.js com tRPC, Drizzle e Supabase:

    prompt
    Você é um arquiteto de software sênior com expertise em stacks modernas.
**Contexto:** Estamos construindo o PixelForge Pro, um SaaS de geração de imagens AI nativa para Mac. O backend será leve, focado em autenticação, gerenciamento de assinaturas e armazenamento de metadados (prompts, configurações). A geração de imagem ocorre localmente.
**Tarefa:** Crie a estrutura de pastas e arquivos inicial para um projeto Next.js 14+ (App Router) com integração tRPC (v11), Drizzle ORM (PostgreSQL via Supabase) e NextAuth.js. Inclua configurações básicas para cada tecnologia.
**Formato de Saída:** Estrutura de pastas aninhada e snippets de código essenciais para `package.json`, `trpc/server.ts`, `drizzle/schema.ts`, `auth.ts` e `api/trpc/[trpc]/route.ts`.
**Restrições:**
- Use App Router.
- Drizzle ORM para tipagem e migrações.
- NextAuth.js para autenticação (provedor Supabase OAuth ou Credenciais).
- tRPC para endpoints API.
- Vercel como plataforma de deploy.
- Exclua qualquer lógica de geração de imagem, focando apenas no backend de gerenciamento.

  2. Prompt para Schema Drizzle ORM de Usuários e Assinaturas:

    prompt
    Você é um especialista em modelagem de dados e Drizzle ORM.
**Contexto:** Para o PixelForge Pro, precisamos gerenciar usuários e suas assinaturas. Um usuário pode ter uma assinatura ativa (plano, status, data de expiração).
**Tarefa:** Crie o schema Drizzle ORM para as tabelas `users` e `subscriptions` para um banco de dados PostgreSQL. A tabela `users` deve conter `id`, `email`, `name`, `image` (do provedor OAuth). A tabela `subscriptions` deve conter `id`, `userId` (FK para `users`), `stripeCustomerId`, `stripeSubscriptionId`, `stripePriceId`, `status` (enum: 'active', 'canceled', 'past_due'), `currentPeriodEnd`, `planName`.
**Formato de Saída:** Código TypeScript para `drizzle/schema.ts`.
**Restrições:**
- Use `pgTable` e tipos Drizzle para PostgreSQL.
- Defina relacionamentos entre as tabelas.
- Inclua índices onde apropriado (ex: `userId` em `subscriptions`).
- Use `timestamp` com `default` e `onUpdate` para `createdAt` e `updatedAt`.

  3. Prompt para Endpoint tRPC de Gerenciamento de Assinatura:

    prompt
    Você é um engenheiro de backend sênior, mestre em tRPC e integração de pagamentos.
**Contexto:** O PixelForge Pro precisa de um endpoint para criar sessões de checkout do Stripe e gerenciar o status da assinatura de um usuário.
**Tarefa:** Crie um procedimento tRPC (`subscriptionRouter`) que contenha:
1.  `createCheckoutSession`: Um mutation que, dado um `priceId` do Stripe, cria uma sessão de checkout e retorna a URL para redirecionamento. Deve verificar se o usuário está autenticado e se já não possui uma assinatura ativa.
2.  `getSubscriptionStatus`: Uma query que retorna o status da assinatura do usuário logado (plano, data de expiração, etc.).
**Formato de Saída:** Código TypeScript para um arquivo `server/api/routers/subscription.ts` e como integrá-lo ao `server/api/trpc/[trpc]/route.ts`.
**Restrições:**
- Use o `protectedProcedure` do tRPC.
- Integre com a API do Stripe (SDK).
- Use o schema Drizzle para interagir com o banco de dados.
- Inclua tratamento de erros básico.

🎨 Prompts de Frontend & Design

Interface minimalista, responsiva e focada na experiência do usuário, com o toque de design dark que o Alfredo tanto gosta.

  1. Prompt para Componente de Layout Base (Dark Mode First):

    prompt
    Você é um designer de UI/UX e desenvolvedor frontend com maestria em Tailwind CSS e shadcn/ui.
**Contexto:** O PixelForge Pro terá um layout minimalista, dark mode first, com uma barra lateral de navegação e uma área de conteúdo principal.
**Tarefa:** Crie um componente React (`Layout.tsx`) para o Next.js App Router que inclua:
1.  Um `div` principal que ocupe 100% da viewport.
2.  Uma barra lateral fixa à esquerda (largura `w-64`) com links de navegação (Dashboard, Gerar Imagem, Histórico, Configurações). Use componentes `Button` e `Link` do shadcn/ui.
3.  Uma área de conteúdo principal que ocupe o restante da largura, com um cabeçalho simples e o `children` do componente.
4.  Implemente dark mode via Tailwind, com um toggle de tema (shadcn/ui `ThemeToggle`) no cabeçalho.
**Formato de Saída:** Código React/TypeScript para `components/Layout.tsx` e um exemplo de uso em `app/page.tsx`.
**Restrições:**
- Tailwind v4 (ou a versão mais recente compatível com shadcn/ui).
- shadcn/ui para componentes.
- Design dark mode first.
- Responsivo (a barra lateral deve ser recolhível em telas pequenas, mas não precisa implementar a lógica de toggle agora).

  2. Prompt para Formulário de Geração de Imagem:

    prompt
    Você é um engenheiro frontend especialista em formulários complexos e UX.
**Contexto:** O PixelForge Pro precisa de um formulário intuitivo para a geração de imagens. Este formulário não fará a chamada da IA diretamente, mas coletará os prompts e parâmetros que serão passados para a lógica nativa do MLX.
**Tarefa:** Crie um componente React (`ImageGenerationForm.tsx`) usando `react-hook-form` e `zod` para validação, e componentes shadcn/ui. O formulário deve incluir:
1.  `Prompt` (textarea, obrigatório).
2.  `Negative Prompt` (textarea, opcional).
3.  `Image Size` (select: 512x512, 768x768, 1024x1024).
4.  `Number of Images` (slider: 1-4).
5.  `Seed` (input number, opcional).
6.  `Model` (select: Stable Diffusion XL, SD 1.5, etc. - Hardcoded por enquanto).
7.  Botão "Gerar Imagem".
**Formato de Saída:** Código React/TypeScript para o componente, incluindo o schema Zod e a integração com shadcn/ui.
**Restrições:**
- `react-hook-form` para gerenciamento de estado do formulário.
- `zod` para validação.
- shadcn/ui para todos os componentes visuais.
- Não inclua a lógica de chamada da IA, apenas a coleta e validação dos dados.

  3. Prompt para Componente de Galeria de Imagens Geradas:

    prompt
    Você é um desenvolvedor frontend com foco em performance e experiência visual.
**Contexto:** O PixelForge Pro precisa exibir as imagens geradas localmente pelo usuário.
**Tarefa:** Crie um componente React (`ImageGallery.tsx`) que receba um array de objetos de imagem (cada um com `id`, `url`, `prompt`, `timestamp`). O componente deve:
1.  Exibir as imagens em um grid responsivo (ex: 2 colunas em mobile, 4 em desktop).
2.  Cada imagem deve ser clicável para abrir um modal de visualização em tela cheia (shadcn/ui `Dialog`).
3.  No modal, exibir a imagem em alta resolução, o prompt usado e botões para download e exclusão.
4.  Implemente lazy loading para as imagens usando `next/image`.
**Formato de Saída:** Código React/TypeScript para `components/ImageGallery.tsx` e `components/ImageCard.tsx`, e um exemplo de uso.
**Restrições:**
- Tailwind CSS para styling.
- shadcn/ui para `Dialog` e outros componentes.
- `next/image` para otimização de imagens.
- O `url` da imagem será um `file://` ou `blob:` URL, pois as imagens são locais.

🔍 Prompts de SEO & Schema.org

Mesmo sendo um app desktop, a landing page e a documentação precisam ser encontradas. O Zé Mané não brinca em serviço com SEO.

  1. Prompt para Meta Tags Essenciais e Open Graph para Landing Page:

    prompt
    Você é um especialista em SEO técnico e marketing digital.
**Contexto:** A landing page do PixelForge Pro (Next.js App Router) precisa de meta tags otimizadas para ranqueamento e compartilhamento social.
**Tarefa:** Crie um snippet de código para o `layout.tsx` ou `page.tsx` da landing page que inclua:
1.  `title` e `description` otimizados para "PixelForge Pro: Geração de Imagens AI Nativas para Mac".
2.  Open Graph tags (`og:title`, `og:description`, `og:image`, `og:url`, `og:type`) para compartilhamento no Facebook/LinkedIn.
3.  Twitter Card tags (`twitter:card`, `twitter:site`, `twitter:creator`, `twitter:title`, `twitter:description`, `twitter:image`).
4.  `canonical` URL.
5.  Meta tag para `viewport`.
**Formato de Saída:** Código React/TypeScript para o componente `Metadata` do Next.js.
**Restrições:**
- Use o sistema de metadados do Next.js App Router.
- Otimize para a palavra-chave "geração de imagens AI nativas Mac".
- A imagem OG deve ser um placeholder por enquanto.

  2. Prompt para Schema.org Article para Blog/Documentação:

    prompt
    Você é um guru de dados estruturados e Schema.org.
**Contexto:** O PixelForge Pro terá uma seção de blog/documentação para artigos sobre IA, tutoriais e casos de uso.
**Tarefa:** Crie um snippet de JSON-LD (`<script type="application/ld+json">`) para um artigo de blog sobre "Como o PixelForge Pro Revoluciona a Geração de Imagens AI no Mac". Inclua as propriedades essenciais para `Article` e `TechArticle`:
1.  `@context`, `@type`.
2.  `headline`, `description`, `image`, `datePublished`, `dateModified`.
3.  `author` (tipo `Person` ou `Organization`).
4.  `publisher` (tipo `Organization` com `name` e `logo`).
5.  `articleBody` (um placeholder).
6.  `keywords`, `proficiencyLevel`.
**Formato de Saída:** Bloco de código JSON-LD.
**Restrições:**
- Otimize para `TechArticle` e `Article`.
- Preencha com dados fictícios relevantes ao PixelForge Pro.
- O `image` deve ser um placeholder.

  3. Prompt para Sitemap XML e Robots.txt:

    prompt
    Você é um engenheiro de SEO técnico que garante a crawlability perfeita.
**Contexto:** Precisamos de um sitemap e um robots.txt para o PixelForge Pro, garantindo que os motores de busca indexem corretamente a landing page e a documentação.
**Tarefa:**
1.  Crie um `sitemap.xml` que inclua a landing page (`/`) e algumas páginas de exemplo (`/blog`, `/docs/instalacao`, `/pricing`).
2.  Crie um `robots.txt` que permita o rastreamento de todo o site, mas disallow o `/admin` e `/api`.
**Formato de Saída:** Dois blocos de código: um para `sitemap.xml` e outro para `robots.txt`.
**Restrições:**
- O sitemap deve ser estático ou gerado dinamicamente no build (ex: `next-sitemap`).
- O `robots.txt` deve ser simples e eficaz.

⚡ Prompts de Performance & Core Web Vitals

Performance não é luxo, é obrigação. O Zé Mané garante que o Lighthouse bata 100 em tudo.

  1. Prompt para Otimização de Imagens (Next.js Image Component):

    prompt
    Você é um especialista em otimização de performance web, mestre em Core Web Vitals.
**Contexto:** A landing page do PixelForge Pro terá várias imagens e ilustrações. Precisamos garantir que elas não impactem o LCP (Largest Contentful Paint) e CLS (Cumulative Layout Shift).
**Tarefa:** Demonstre o uso correto do componente `next/image` para as seguintes situações:
1.  Uma imagem hero (LCP candidate) com `priority` e `fill`.
2.  Imagens secundárias com `width`, `height` e `lazy loading` padrão.
3.  Imagens de fundo com CSS e `object-fit`.
**Formato de Saída:** Snippets de código React/TypeScript para `next/image` em diferentes cenários.
**Restrições:**
- Use `next/image` do Next.js.
- Foque em LCP e CLS.
- Assuma que as imagens estão em formato WebP ou AVIF.

  2. Prompt para Critical CSS e Font Subsetting:

    prompt
    Você é um ninja de otimização de CSS e fontes, garantindo o menor TBT (Total Blocking Time).
**Contexto:** Para o PixelForge Pro, queremos o carregamento mais rápido possível do CSS e das fontes, minimizando o render-blocking.
**Tarefa:** Explique e demonstre como o Tailwind CSS com Next.js já lida com critical CSS (purging) e como abordar a otimização de fontes com `next/font`.
**Formato de Saída:** Explicação textual concisa e snippets de código para `tailwind.config.js` e `next.config.js` (se necessário), e uso de `next/font` em `layout.tsx`.
**Restrições:**
- Foco em Tailwind CSS JIT/PostCSS purging.
- Uso de `next/font` para Google Fonts ou fontes locais.
- Sem bibliotecas externas para Critical CSS, apenas as features nativas da stack.

  3. Prompt para Implementação de Service Worker (PWA para Desktop):

    prompt
    Você é um arquiteto de PWA e Service Worker, pensando em offline-first e caching agressivo.
**Contexto:** Embora o PixelForge Pro seja um app desktop, a base web pode se beneficiar de um Service Worker para caching de assets estáticos e até mesmo para uma experiência offline (para a UI, não a geração de imagem).
**Tarefa:** Crie um Service Worker básico para o Next.js usando `next-pwa` que:
1.  Cacheie assets estáticos (CSS, JS, imagens da UI).
2.  Utilize uma estratégia `Cache First` para esses assets.
3.  Permita que a UI carregue mesmo sem conexão (com um fallback page simples).
**Formato de Saída:** Configuração para `next.config.js` e um arquivo `public/manifest.json` e um `_document.tsx` (ou equivalente no App Router) para registrar o Service Worker.
**Restrições:**
- Use `next-pwa`.
- Foque em caching de assets da UI.
- Não tente cachear ou habilitar offline para a lógica de geração de imagem, que é local.

🚀 Prompts de Deploy & DevOps

Deploy sem dor de cabeça, escalável e com CI/CD. Vercel e Cloudflare são nossos melhores amigos.

  1. Prompt para Configuração de Deploy na Vercel:

    prompt
    Você é um engenheiro de DevOps e especialista em Vercel.
**Contexto:** O PixelForge Pro (Next.js App Router, tRPC, Drizzle, Supabase) precisa de um deploy robusto na Vercel.
**Tarefa:** Crie um `vercel.json` e explique as variáveis de ambiente necessárias para o deploy do nosso projeto.
**Formato de Saída:** Código JSON para `vercel.json` e uma lista das variáveis de ambiente com descrições.
**Restrições:**
- Otimize para Edge Functions (tRPC API).
- Inclua variáveis para Supabase URL/Anon Key, Stripe Secret Key, NextAuth Secret.
- Não inclua configurações de build complexas, apenas o essencial.

  2. Prompt para CI/CD Básico com GitHub Actions:

    prompt
    Você é um especialista em automação e GitHub Actions.
**Contexto:** Queremos um pipeline de CI/CD simples para o PixelForge Pro.
**Tarefa:** Crie um workflow de GitHub Actions (`.github/workflows/main.yml`) que:
1.  Execute `npm install`.
2.  Execute `npm run lint`.
3.  Execute `npm run build` (Next.js).
4.  Faça o deploy para Vercel em pushes para a branch `main`.
**Formato de Saída:** Código YAML para o arquivo de workflow.
**Restrições:**
- Use as actions oficiais do GitHub e Vercel.
- Inclua secrets para o token da Vercel.
- Sem testes unitários ou de integração por enquanto.

  3. Prompt para Monitoramento e Logs (Vercel Analytics & Supabase Logs):

    prompt
    Você é um engenheiro de confiabilidade e monitoramento.
**Contexto:** Precisamos monitorar a saúde do PixelForge Pro e coletar logs para depuração.
**Tarefa:** Explique como configurar o monitoramento básico para a aplicação web e o backend:
1.  Vercel Analytics e Logs para o frontend e Edge Functions.
2.  Supabase Logs para o banco de dados e Auth.
3.  Mencione a importância de ferramentas de APM como Sentry ou Datadog para o futuro.
**Formato de Saída:** Explicação textual concisa e links para a documentação relevante (não código, pois são configurações de plataforma).
**Restrições:**
- Foco nas ferramentas nativas das plataformas usadas (Vercel, Supabase).
- Sem implementação de APM de terceiros agora, apenas menção.

4. Prompt Único Completo

Pra quem gosta de viver perigosamente e quer ver a IA suar a camisa, aqui está o mega-prompt. Lembre-se, quanto mais complexo o prompt, mais chance de a IA se perder. Use com sabedoria, ou melhor, com o Zé Mané por perto pra corrigir a rota.

prompt
Você é um arquiteto de software full-stack, especialista em Next.js 14+, React 19, Tailwind v4, shadcn/ui, tRPC, Drizzle ORM, Supabase, Vercel e MLX (Apple MLX Framework). Sua tarefa é projetar e fornecer o código-fonte inicial para o "PixelForge Pro", um aplicativo de desktop (via Electron/Tauri) que oferece geração de imagens por IA nativa no Mac (Apple Silicon), resolvendo custos, latência e privacidade.

**Contexto do Projeto:**
- **Nome:** PixelForge Pro
- **Problema:** Geração de imagens AI na nuvem é cara, lenta e não-privada.
- **Solução:** App Mac nativo com UI web, processamento local via MLX, backend leve para auth/assinatura.
- **Público-alvo:** Profissionais criativos (agências, e-commerces, designers) que usam Mac.
- **Estilo de Design:** Minimalista, dark mode first.
- **Complexidade:** Avançado.

**Requisitos Essenciais:**
1.  **Estrutura de Projeto Next.js 14+ (App Router):** Inclua tRPC (v11), Drizzle ORM (PostgreSQL via Supabase), NextAuth.js.
2.  **Backend (tRPC):**
    *   Autenticação de Usuários (Google/Email via NextAuth.js e Supabase Auth).
    *   Gerenciamento de Assinaturas (Stripe Checkout Session, status da assinatura).
    *   Schema Drizzle ORM para `users` e `subscriptions`.
    *   Endpoints para `createCheckoutSession` e `getSubscriptionStatus`.
3.  **Frontend (React 19, Tailwind v4, shadcn/ui):**
    *   **Layout Base:** Dark mode first, barra lateral de navegação (Dashboard, Gerar Imagem, Histórico, Configurações), área de conteúdo principal.
    *   **Formulário de Geração de Imagem:** `react-hook-form` + `zod`, campos para Prompt, Negative Prompt, Image Size (select), Number of Images (slider), Seed, Model (hardcoded). Sem lógica de AI aqui.
    *   **Galeria de Imagens:** Grid responsivo, lazy loading (`next/image`), modal de visualização (`shadcn/ui Dialog`) com download/exclusão. As imagens são referências locais (`file://` ou `blob:` URLs).
4.  **SEO (Landing Page):** Meta tags essenciais (title, description, OG, Twitter Card, canonical) usando o sistema de metadados do Next.js.
5.  **Performance:** Uso de `next/image` para otimização, `next/font` para fontes, e menção de Critical CSS (Tailwind purging).
6.  **Deploy:** Configuração básica para Vercel (`vercel.json`) e variáveis de ambiente.
7.  **Integração MLX (Conceitual):** Explicação de como o frontend se comunicaria com a camada MLX nativa (via IPC em um wrapper Electron/Tauri), sem implementar o código MLX em si.

**Formato de Saída:**
Um arquivo Markdown único contendo:
-   A estrutura de pastas do projeto.
-   Snippets de código-fonte para os arquivos chave:
    -   `package.json` (dependências essenciais)
    -   `tailwind.config.ts`
    -   `drizzle/schema.ts`
    -   `auth.ts`
    -   `server/api/trpc/[trpc]/route.ts`
    -   `server/api/routers/subscription.ts`
    -   `app/layout.tsx` (com layout base e metadados)
    -   `app/generate/page.tsx` (com `ImageGenerationForm`)
    -   `components/ImageGenerationForm.tsx`
    -   `components/ImageGallery.tsx`
    -   `public/robots.txt`
    -   `sitemap.xml` (exemplo)
    -   `vercel.json`
-   Explicação concisa sobre a integração com MLX via IPC (Inter-Process Communication) em um app desktop wrapper.

**Restrições:**
-   Priorize a clareza e a modularidade do código.
-   Não implemente a lógica MLX real, apenas a interface conceitual de comunicação.
-   Use placeholders para chaves de API e URLs.
-   Mantenha o código minimalista e focado nos requisitos.
-   Todo o código deve ser TypeScript.

5. Stack Mínima Viável

Pra lançar essa bagaça em 48 horas (se você não for um Zé Mané, talvez 72h), aqui está o que você precisa:

Com essa stack, você tem a base sólida pra construir um produto de verdade, sem firula, focado na performance e na experiência do usuário.

6. Checklist de Lançamento

Antes de apertar o botão de "Go Live", o Zé Mané tem 10 mandamentos pra você não passar vergonha:

  1. Core Web Vitals Verificados: Roda o Lighthouse. LCP abaixo de 2.5s, CLS zero, INP abaixo de 200ms. Se não tiver verde, volta pra prancheta.
  2. Meta Tags e Schema.org Validados: Usa o Google Rich Results Test e o Schema.org Validator pra garantir que tudo está perfeito.
  3. Sitemap XML e Robots.txt no Ar: Verifica se o sitemap está acessível e o robots.txt não bloqueia nada importante. Submete o sitemap no Google Search Console.
  4. Autenticação Testada: Fluxo de login/cadastro, recuperação de senha, logout. Tudo funcionando como um relógio.
  5. Fluxo de Assinatura Completo: Teste a criação de sessão de checkout, pagamento bem-sucedido, falha de pagamento, cancelamento e reativação.
  6. Geração de Imagem Local Testada: A integração do frontend com a camada MLX (via IPC no Electron/Tauri) deve estar robusta. Teste diferentes prompts e parâmetros.
  7. Responsividade Testada: O layout deve funcionar perfeitamente em diferentes resoluções de tela (mesmo que seja um app desktop, a UI é web).
  8. Acessibilidade Básica: Navegação por teclado, contraste de cores, tags alt em imagens. O básico para WCAG 2.2.
  9. Monitoramento Ativo: Vercel Analytics, Supabase Logs configurados e alertas para erros críticos.
  10. Backup do Banco de Dados: Garante que o Supabase está configurado para backups automáticos. Dados de usuário são sagrados!

Agora vai lá e mostra pra esses "especialistas" como se faz um produto de verdade! Zé Mané, desligando.

Compartilhar