Framework
Next.js 14 App Router
O projeto é construído sobre Next.js com App Router, o que oferece uma base única para interface, estrutura de rotas, estilos globais e tratamento de API no servidor.
Stack principal
O que sustenta esta ferramenta de autoria de prompts com IA e como frontend e backend se dividem.
Camada de UI
React 18
A interface é uma aplicação React composta por componentes focados em seções do system prompt, seções do user prompt, exemplos, renderização da saída e áreas auxiliares.
Linguagem
TypeScript
O app e a rota de API são escritos em TypeScript, o que ajuda a estruturar estado de construção de prompts, respostas de análise de arquivo, props de componentes e utilitários.
Estilo
Tailwind CSS
O sistema visual usa Tailwind e estilos globais customizados para construir a UI escura, o sistema de espaçamento e a responsividade, em vez de folhas de estilo tradicionais por componente.
Integração com IA
Anthropic SDK
O app envia dados de imagens carregadas para o Claude via SDK oficial da Anthropic, usando uma rota interna para gerar sugestões contextuais de prompt a partir de referências visuais.
Modelo de interação
Montagem de prompt em tempo real
O valor do produto não está apenas em campos estáticos. O app monta continuamente o prompt estruturado conforme o usuário edita e pode enriquecê-lo com sugestões assistidas por IA.
Como roda
O app combina edição de prompt no navegador com análise de imagem no servidor.
1
Next.js serve o app
app/page.tsx renderiza a interface principal e monta a experiência de construção de prompts dentro da estrutura App Router.
2
React controla o estado de autoria
O componente builder coordena seções do prompt, exemplos, arquivos de referência enviados, nome do projeto e texto de saída gerado em estado no cliente.
3
O usuário pode enviar uma referência visual
É possível arrastar ou selecionar imagens e arquivos de apoio e disparar análise de IA para extrair persona, restrições, tarefa, requisitos e sugestões de stack.
4
A rota de API chama Claude
app/api/analyze-image/route.ts recebe dados de imagem em base64, envia para o Claude Sonnet 4 via SDK da Anthropic e parseia as sugestões JSON estruturadas.
5
A UI incorpora as sugestões
O frontend React recebe as recomendações geradas e as traz de volta para o fluxo do builder, ajudando o usuário a montar um prompt final mais forte.
Mapa da arquitetura
Este projeto é mais uma ferramenta frontend full-stack moderna do que uma página puramente estática.
Pastas principais
app/Páginas do App Router, layout raiz, CSS global e a rota de API de análise de imagem.
components/UI do prompt builder, renderizador da saída, seção de análise de arquivos e overlays auxiliares.
lib/Helpers utilitários para merge de classes e lógica compartilhada.
public/Assets estáticos como o favicon.
backlog/Roadmap, documentação e notas de planejamento do produto.
app/docs/Materiais de apoio e referências usados pelo produto.
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/analyze-image/route.ts components/prompt-builder.tsx components/generated-prompt.tsx components/section-examples.tsx
Este projeto é estruturalmente próximo do Card Tracker, mas o foco aqui é autoria assistida por IA em vez de dashboards de dados.
Dados e camada de IA
O app é voltado principalmente para estruturar e exportar conteúdo de prompt, com ajuda opcional de IA no servidor.
Autoria no cliente
A composição do prompt vive no navegador
O usuário constrói system e user prompts de forma interativa.
A visualização do prompt final se atualiza em tempo real.
Exportação e cópia são recursos orientados ao navegador.
O app continua útil mesmo antes da etapa de análise por IA.
Análise no servidor
Claude gera sugestões visuais
A rota de análise recebe dados da imagem e media type.
Claude devolve grupos estruturados de sugestão.
A rota valida entrada e trata erros de API key.
A camada de IA enriquece a autoria, mas não substitui a estrutura principal do produto.
Comandos para rodar
O fluxo é o padrão de uma aplicação Next.js.
Scripts
npm install npm run dev npm run build npm start npm run lint
Além do fluxo padrão de Next.js, a funcionalidade de análise de imagem depende da configuração da chave da Anthropic.
Ambiente esperado
O que o app precisa
ANTHROPIC_API_KEY para a rota de análise.
Node.js e npm.
Nenhum banco de dados separado no formato atual.
Frontend e API servidos pelo mesmo app Next.js.
Resumo final
Construtor de Prompt é uma aplicação Next.js + React + TypeScript com uma rota backend focada em Claude. Ela combina autoria estruturada de prompts, fluxo com arquivos e sugestões assistidas por IA dentro de um único produto App Router.