Framework
Next.js 14 App Router
O produto é um app Next.js com App Router, reunindo página, layout raiz, estilos globais e rota de geração de prompt na mesma base.
Stack principal
O que sustenta o gerador de prompts e como o fluxo no navegador se conecta ao backend de LLM.
Camada de UI
React 18
A interface é dividida em componentes React focados em descrição da tarefa, contexto opcional, troca de idioma e painel editável do prompt gerado.
Linguagem
TypeScript
A UI, o formato da requisição da API, os metadados das imagens, a camada de provedores de LLM e os helpers de exportação são tipados em TypeScript.
Regras de Prompt
Regras personalizadas e refinadas
Um system prompt meticulosamente elaborado que transforma descrições vagas de tarefas em um prompt específico e acionável. As regras impõem uma estrutura o que → como → qualidade, disciplina de escopo (extrair intenção, generalizar conteúdo, nunca incluir hardcode), formatação Markdown limpa e preservação do idioma de saída — tudo a partir de um único arquivo fonte de verdade.
Integração com IA
Camada de LLM independente de provedor
O backend pode usar Anthropic, OpenRouter, DeepSeek, Moonshot/Kimi ou um endpoint compatível com OpenAI via variáveis de ambiente.
Modelo de interação
Gerar, editar, visualizar, exportar
Em vez de montar seções manualmente, o usuário descreve o que quer, adiciona contexto de screenshot ou código, gera um prompt em Markdown, ajusta, visualiza, copia ou exporta.
Como roda
O app transforma contexto inicial em um prompt final por meio de uma única rota de geração no servidor.
1
Next.js renderiza o produto
app/page.tsx renderiza o cabeçalho, seletor EN/BR, componente PromptBuilder e rodapé dentro da estrutura App Router.
2
React coleta o contexto da tarefa
O builder guarda descrição, código colado, metadados das imagens, prompt gerado, rótulo do modelo, loading e erros em estado no cliente.
3
O usuário adiciona referências opcionais
A seção de upload aceita formatos comuns de imagem e uma área para código/texto, permitindo usar screenshots, mockups, código existente ou exemplos de estilo como contexto.
4
A rota de API gera o prompt
app/api/generate-prompt/route.ts valida a requisição, combina tarefa, código e contexto visual, aplica as regras de prompt e chama o provedor de LLM configurado.
5
A saída continua editável
O Markdown gerado aparece em um textarea com visualização, cópia, download .md, download .docx e atribuição do modelo usado.
Mapa da arquitetura
A versão atual é um produto full-stack compacto com i18n, adaptador de provedores e ferramentas de exportação no cliente.
Pastas e arquivos principais
app/Página do App Router, layout raiz, CSS global e endpoint generate-prompt.
components/Shell do prompt builder, entrada de tarefa, seção de contexto com upload/código, seletor de idioma, saída gerada e primitivas de UI.
lib/Adaptador de LLM, contexto/traduções de i18n, helper de Markdown para DOCX e utilitários compartilhados.
backlog/Roadmap, orientação de estrutura de prompt e notas de implementação.
PROMPT_RULES.mdO arquivo de regras de prompt na raiz é a fonte de verdade da estrutura gerada.
Análise da arquitetura
package.json next.config.js tailwind.config.ts tsconfig.json app/page.tsx app/layout.tsx app/globals.css app/api/generate-prompt/route.ts components/prompt-builder.tsx components/section-task.tsx components/section-upload.tsx components/generated-prompt.tsx components/language-switcher.tsx lib/llm/provider.ts lib/i18n/translations.ts lib/markdown-to-docx.ts
A arquitetura é intencionalmente compacta: o App Router concentra a página e a rota de API, enquanto a camada de biblioteca cuida de provedores, i18n e suporte a exportação.
Prompt e camada de IA
O produto gira em torno de gerar um prompt de alta qualidade, mantendo detalhes dos provedores atrás de um adaptador pequeno no backend.
Fluxo no cliente
O navegador controla o ciclo de autoria
O usuário descreve o projeto, funcionalidade ou tarefa em linguagem natural.
Ele pode adicionar contexto de imagem e colar código ou padrões existentes.
O prompt gerado permanece editável depois da geração.
Visualização, cópia, exportação Markdown e exportação DOCX acontecem pela UI do cliente.
Geração no servidor
O backend normaliza o acesso aos provedores
A rota recebe texto da tarefa, código colado e imagens em base64.
Um system prompt impõe estrutura Markdown, disciplina de escopo, formatação e idioma da saída.
Presets de provedor definem base URLs, modelos padrão e suporte a visão.
Códigos de erro estáveis e traduzidos evitam expor mensagens cruas do provedor na UI.
Comandos para rodar
O fluxo local é o de um app Next.js padrão com configuração de LLM via ambiente.
Scripts
npm install npm run dev npm run build npm start npm run lint
A geração de prompts depende de um provedor de LLM configurado. Anthropic é o padrão, e provedores compatíveis com OpenAI passam pela mesma camada de API.
Ambiente esperado
O que o app precisa
LLM_PROVIDER seleciona anthropic, openrouter, deepseek, moonshot ou openai-compatible.
LLM_API_KEY, ou ANTHROPIC_API_KEY ao usar o provedor Anthropic padrão.
Overrides opcionais de LLM_MODEL, LLM_MODEL_LABEL, LLM_BASE_URL e LLM_SUPPORTS_VISION.
Nenhum banco de dados é necessário; frontend, rota de API e exportações rodam no mesmo app Next.js.
Resumo final
Prompt Builder agora é um gerador de prompts orientado pela tarefa com um backend de LLM independente de provedor. Ele recebe tarefa, screenshot e código como contexto e devolve um prompt Markdown editável que pode ser visualizado, copiado ou exportado como Markdown ou DOCX.