O Kit: navegação, prévias e como adicionar um módulo

O Explorador tem exatamente três níveis, e cada um fica no próprio endereço da página, não apenas no estado do componente: a grade de categorias (/projects/kit ou /projects/<id>/kit), a lista de módulos de uma única categoria (com ?cat=<key>) e a página de detalhes completa de um módulo (com &module=<id>). Assim, o botão Voltar do navegador sempre funciona corretamente, e a página de detalhes de um módulo específico é um link real que pode ser compartilhado — envie alguém direto para "veja exatamente o que o Formulário de Orçamento ou Solicitação de Estimativa oferece", em vez de explicar onde clicar. Esc volta um nível por vez, igual ao Voltar.

Aberto de dentro de um projeto (/projects/<id>/kit), a página sabe qual projeto você está vendo, então pode mostrar o que já está nele e permitir adicionar diretamente a ele. Aberto sozinho (/projects/kit, acessado pelo link da aba Kit ou diretamente), são os mesmos três níveis sem nada específico de projeto — útil para navegar antes de decidir o que criar, ou para mostrar o catálogo a alguém sem abrir um projeto específico.

No topo da grade de categorias, o mesmo seletor de duas opções usado em todo o aiKit divide o catálogo inteiro: Kit do site são seções e recursos que se tornam parte do próprio site ou app (páginas, formulários, galerias, loja, agendamento, SEO); Kit de ferramentas do negócio são ferramentas que funcionam ao lado do projeto em vez de dentro dele (automação de marketing, faturamento, CRM, ferramentas da equipe, relatórios). Cada bloco de categoria mostra quantos módulos ela tem e um selo "N prontos agora" sempre que pelo menos um deles for um módulo Pronto agora (veja abaixo).

A caixa de busca acima das categorias procura pelo nome ou descrição do módulo em TODO o catálogo de uma vez — tanto no Kit do site quanto no Kit de ferramentas do negócio, independentemente de qual opção está selecionada — então buscar "fatura" encontra o módulo mesmo quando você está vendo o Kit do site.

Aberto de dentro de um projeto, e somente enquanto você não estiver pesquisando, aparece uma linha "Recomendado para este projeto" acima da grade de categorias quando o aiKit tem sugestões reais: regras simples e não baseadas em IA, combinadas com o tipo do projeto (um site recebe sugestões de formulário de orçamento, formulário de contato, vitrine de avaliações, SEO local e páginas de perguntas frequentes; uma loja online recebe carrinho e finalização de compra, recuperação de carrinho abandonado e avaliações de produtos; e assim por diante para landing pages, apps, sistemas administrativos, painéis, portais do cliente, blogs e projetos de automação de marketing), além de algumas correspondências por palavra-chave no próprio texto de objetivo do projeto (mencionar "orçamento", "agendamento", "avaliação", "e-mail", "fatura" ou "vender online" traz o módulo correspondente com seu próprio motivo em uma linha). Itens que já estão no projeto ficam de fora, e a lista é limitada a seis.

Cada módulo tem um dos dois selos de status, e o texto é deliberadamente literal, não linguagem de marketing. "Pronto agora" significa que o módulo é um dos módulos testados do mecanismo de criação — código real que renderiza uma página de verdade com dados de exemplo no lugar dos seus dados, exatamente o mesmo modelo que um site ativo recebe. "Feito para você" significa que o módulo é uma parte real e planejada do catálogo que ainda não é renderizada: ao escolhê-lo, ele é adicionado ao plano e um item de trabalho real é registrado, e o módulo é construído no próprio código do site, com a marca e os textos dele, da mesma forma que qualquer outra edição feita por IA — só não existe ainda um modelo testado pronto para ele.

Nenhum dos status significa "não é real" ou "hipotético". Ambos são coisas que o aiKit realmente vai construir para você. A única diferença que o selo indica é se você consegue ver agora a forma final do módulo ou precisa imaginá-la a partir de uma descrição e de um diagrama.

Ao abrir uma categoria, cada módulo aparece como um cartão: uma miniatura, o nome do módulo, seu selo de status, uma descrição curta de uma linha, uma linha de chips "Ideal para" (até três) e "Neste projeto" se ele já tiver sido adicionado (quando você navega dentro de um projeto). A miniatura de um módulo Pronto agora é uma pequena prévia ao vivo da página real — carregada somente quando rola para a tela, e limitada a seis miniaturas ao vivo visíveis ao mesmo tempo, para que uma categoria longa não deixe a página lenta; o que passar desse limite mostra um marcador de carregamento simples até ficar visível. A miniatura de um módulo Feito para você é o mesmo diagrama ilustrativo descrito abaixo, só que menor — exceto para módulos que têm uma prévia funcionando (veja abaixo), cujo cartão mostra o site de exemplo real reduzido, um selo "Prévia funcionando · N variações" e um botão "Veja funcionando" em vez de "Ver detalhes". "Ver detalhes" abre a página própria do módulo.

Para um módulo Pronto para usar, a prévia é um iframe real da página testada, em tamanho real, enquadrado como uma pequena janela de navegador, com uma alternância Computador/Celular que redimensiona de fato o quadro para você conferir como ela fica em um celular (em um celular de verdade, a alternância é substituída por um rótulo simples "Prévia no celular" e o quadro abre rolado até o próprio formulário, para você ver os campos, não só o topo). O quadro desaparece gradualmente na parte inferior; "Abrir prévia completa" logo abaixo abre a página inteira em uma nova aba, e uma legenda embaixo indica o nome do negócio de exemplo cujos dados estão sendo usados. Quando aberta dentro de um projeto, a opção "Mostrar nas cores deste site" solicita novamente essa mesma prévia com as cores da marca do projeto (lidas diretamente dos códigos #hex digitados nas observações de marca do briefing) e com o nome do projeto no lugar, para que você veja algo mais próximo do que o seu site real mostraria, e não um exemplo genérico.

Para um módulo Feito para você, não há iframe ao vivo: em vez disso, você recebe a mesma ilustração esquemática da lista de categorias, desenhada em tamanho maior, um diagrama SVG simples de traço contínuo que mostra a forma do layout (os campos de um formulário, a grade de um calendário, os blocos de um painel, o que for mais adequado para a tela daquele módulo), com alguns rótulos curtos extraídos dos dados de prévia do próprio módulo. Uma legenda embaixo é obrigatória em todos esses casos e nunca é removida: "Ilustração do layout. Sua versão é feita para combinar com o seu site." Ela existe justamente para que um esboço da estrutura nunca seja confundido com uma prévia final, com a identidade visual aplicada.

Prévias funcionais (04/10/2026): um conjunto crescente de módulos Feito para você pula o esboço e abre um site de exemplo completo e clicável, exibido em largura total acima dos detalhes. Todos os doze módulos de E-commerce / Loja Online abrem a mesma loja de cerâmica de exemplo, Juniper Kiln, cada um na parte que se refere ao módulo: o catálogo (filtrar, ordenar, pesquisar, abrir um produto e escolher um esmalte e um tamanho — a foto e o preço mudam), o carrinho e o checkout (alterar quantidades, remover itens, digitar WELCOME10, FREESHIP ou GIFT-2580, estimar a entrega pelo CEP e finalizar a compra até uma página de confirmação), opções de pagamento (cartão, Pague em 4 e botões de carteira digital), taxas de frete, códigos de desconto e vales-presente, avaliações de produtos (filtrar por estrelas ou fotos, marcar como útil, escrever uma avaliação), pacotes e complementos, impostos sobre vendas (alterar o estado de entrega e a linha de imposto muda), contas de clientes (entrar, comprar novamente, rastrear um pacote, iniciar uma devolução), e-mails de pedido (os e-mails de confirmação, envio e entrega, com uma página de rastreamento funcional), devoluções e trocas (localizar o pedido, escolher itens e um motivo, obter uma etiqueta de devolução) e estoque (uma visão do Proprietário em que alterar o estoque muda o que os clientes veem). Todos os dez módulos de Cursos Online e Produtos Digitais abrem uma escola de panificação de exemplo, Rise & Crumb: reproduzir uma aula (velocidade, legendas), marcá-la como concluída, ver o anel de progresso se preencher, fazer o questionário, se inscrever a partir da prévia gratuita, ver o certificado, fazer uma pergunta em uma aula, comprar um download digital, escolher um pacote de cursos ou marcar um complemento no checkout, e alternar para a visão do Proprietário para renomear, reordenar, adicionar ou despublicar aulas e definir quando cada semana é liberada. No módulo de cronograma de lançamentos, uma linha Horário da prévia acima do quadro tem Avançar uma semana (e Voltar para hoje), para que você veja as aulas bloqueadas sendo liberadas nas suas datas.

Acima do quadro: uma linha de opções para cada variação que o módulo oferece (por exemplo, Layout da loja: Grade, Lista ou Destaque; Carrinho: Carrinho deslizante ou Página do carrinho, além de Checkout: Página única ou Passo a passo; Regra de liberação: Em datas definidas, Dias após a inscrição ou Após concluir a última aula). Escolher uma opção redesenha imediatamente o site de exemplo nessa variação e fica salva no endereço da página (?v=…), para que um link para uma variação específica possa ser compartilhado. Computador e Celular redimensionam o quadro para que o site de exemplo se reorganize como faria em um celular (em um celular de verdade, isso aparece como um rótulo simples "Visualização no celular"). Redefinir devolve o site de exemplo ao estado inicial. Uma linha curta "Coisas para fazer" lista o que clicar primeiro, e a descrição de cada variação escolhida fica embaixo do quadro. Dentro de um projeto com cores de marca no briefing, "Mostrar nas cores deste site" troca a cor principal do site de exemplo pela do próprio projeto (somente quando essa cor for escura o suficiente para manter o texto branco dos botões legível).

Nada em uma prévia funcional chega a um servidor. Não há conexão de pagamento: o checkout está identificado como "Prévia — nada é cobrado e nenhum pedido é enviado", o número do cartão é um exemplo fixo e somente leitura, e os botões de carteira digital (Apple Pay, Google Pay, PayPal) apenas exibem uma nota. Nenhum e-mail é enviado, nenhuma avaliação é publicada e nada é salvo; sair da página apaga tudo. Os negócios, produtos, pessoas e preços de exemplo são inventados. A legenda embaixo do quadro informa isso: "Prévia funcional com dados de exemplo de um negócio fictício. Sua versão usa seus próprios produtos, preços, textos e marca. Nada aqui é cobrado, salvo ou enviado." Todos os outros módulos Feito para você continuam exibindo a ilustração do layout.

• O que o visitante vê — um passo a passo numerado, em linguagem simples, do que quem usa o módulo realmente experimenta, passo a passo.
• O que você recebe — o que o módulo entrega ao dono do projeto (contatos registrados em um lugar real, um status que você pode atualizar, e assim por diante).
• Recursos e, somente para um módulo com variantes nomeadas definidas no catálogo, um conjunto de cartões selecionáveis "Escolha a variante" logo nesta seção (o primeiro vem selecionado por padrão, marcado com um pequeno check), para que uma escolha real entre opções (e não apenas uma personalização de texto livre) seja feita aqui, em vez de digitada manualmente.
• Por que importa — o argumento honesto de por que um negócio iria querer isso.
• Como se personaliza (Pronto para usar) ou Variantes que você pode escolher (Feito para você) — o que pode ser realmente diferente nele.
• Ideal para — os mesmos chips de tipo de negócio do cartão, mostrados por completo.
• Como ele é construído — uma frase simples explicando exatamente como este módulo passa a existir (uma página testada que o motor renderiza hoje, ou construída no site pela IA durante uma criação), incluindo uma observação se ele precisar de uma conta de terceiros, como pagamentos ou mapas.

Embaixo de tudo fica "Adicionar isto a <nome do projeto>" (ou "seu projeto", navegando sem nenhum projeto escolhido ainda). Se o módulo tiver ideias de personalização registradas, elas aparecem primeiro como uma lista de verificação — com o rótulo "Personalizações sugeridas" para um módulo Pronto agora, ou "Escolha as variações que você quer" para um módulo Criado para você — e marcar qualquer uma delas inclui exatamente aquela linha no que é enviado, não apenas uma caixa marcada silenciosamente.

Para um módulo com uma prévia funcionando, o painel fica na coluna da esquerda, embaixo da prévia, e começa com "Sua variação" — a variação escolhida nas linhas de opções da prévia (por exemplo "Carrinho: Página do carrinho · Finalização: Passo a passo"). O que estiver aparecendo na prévia quando você pressionar Adicionar é o que fica registrado: é salvo no briefing do projeto junto com o módulo, e o item de trabalho diz "Variante: …" para que quem for construir siga aquele layout. Um módulo que também tenha opções nomeadas na seção Recursos pergunta "Qual é mais importante para você?" ali, para que as duas escolhas não se confundam.

"O que deveria ser diferente para você?" é uma nota de texto livre com o mesmo botão de ditado usado em todo o aiKit, além de um botão "Anexar uma foto ou PDF" (somente imagens e PDFs, até 2,5 MB cada) para um logotipo, uma foto de referência ou uma ficha técnica — os arquivos anexados aparecem ali como etiquetas removíveis. Se o módulo tiver perguntas reais e específicas que precisam de resposta para ser bem construído, elas aparecem em "O que vamos perguntar", cada uma com seu próprio campo de texto opcional, para que você responda logo de início em vez de esperar ser perguntado depois.

"Adicionar ao plano" está sempre disponível quando você está em um projeto real: ele registra a escolha no briefing do projeto (o mesmo plano que a tela Plano do site e a página do projeto leem) e cria um item de trabalho real, voltado à equipe, na aba Feedback, marcado como "Aguardando nós", exatamente como qualquer outro pedido. "Adicionar e criar agora" aparece ao lado dele somente quando o projeto já tem arquivos reais para editar — a primeira criação já terminou ou o site já está no ar; ele faz as mesmas duas coisas e depois executa imediatamente aquele item de trabalho pelo mesmo editor de IA usado por Corrigir com IA, sem fila separada. Tentar adicionar um módulo que já está no projeto é recusado de imediato, com a mensagem simples "já está neste projeto", em vez de criar uma duplicata.

Depois de enviado, uma confirmação substitui os botões com o que realmente aconteceu — a mensagem simples "Adicionado ao plano como item de trabalho" ou, para um pedido de criar agora, o status real (iniciado, ou o motivo específico de não ter sido possível, como estar em espera para aprovação prévia da revisão) — além de dois links diretos para "Abrir o plano" e "Ver pedidos", para que você nunca fique sem saber para onde foi.

Em /projects/kit — com o mesmo login real do restante do painel de projetos hospedados, sem precisar de projeto — tudo funciona exatamente igual, até você tentar adicionar algo. Ao pressionar "Adicionar a um projeto" (o botão diz isso em vez de "Adicionar ao plano" quando nenhum projeto está carregado), abre-se "Adicionar a qual projeto?", um pequeno seletor com todos os projetos da sua conta. Escolha um e você é levado direto para o Explorador de Kits daquele projeto, com o mesmo módulo já aberto, pronto para concluir a adição. Se você ainda não tiver projetos, o seletor informa isso claramente e oferece um link direto "Iniciar um projeto →", em vez de deixar você travado.