Hub de início
Visão geral
Após concluir o assistente de configuração, você chegará ao Hub de início do Kaiju Hub AI. Este é seu painel central para acessar todos os recursos principais.
Hub de projetos
O Hub de projetos é seu espaço de trabalho central para gerenciar todos os projetos de desenvolvimento. Crie novos projetos, importe projetos existentes ou clone repositórios do GitHub.
Criar projetos
Inicie um projeto novo com sua stack tecnológica e configuração de framework preferidas.
Importar projetos
Importe projetos existentes do seu sistema de arquivos local para gerenciá-los no Kaiju Hub AI.
Clonar do GitHub
Clone qualquer repositório do GitHub diretamente no Kaiju Hub AI — sem sair do aplicativo ou usar a linha de comando.
Wireframes
A seção Wireframes permite criar e projetar wireframes para seus aplicativos e sites. Projete manualmente ou use IA para gerar automaticamente. Envie wireframes prontos diretamente para geração de código.
Design manual
Use o editor de canvas integrado para desenhar e organizar componentes de interface manualmente.
Geração com IA
Descreva o que você quer e deixe a IA criar um layout de wireframe instantaneamente.
Wireframe para código
Envie seu wireframe concluído diretamente para geração de código — sem tradução manual necessária.
Novidades
A seção Novidades mostra as últimas atualizações, recursos e anúncios do Kaiju Hub AI. Você receberá um alerta a cada nova atualização. Verifique regularmente para se manter atualizado.
Biblioteca de blocos
A Biblioteca de Blocos é o sistema de blocos de contexto do Kaiju Hub AI. Ela permite adicionar, armazenar e gerenciar blocos de contexto reutilizáveis, como documentação de API, trechos de código e muito mais. Você pode criar e armazenar blocos para uso posterior e enviá-los diretamente para a IA quando precisar deles como contexto para geração de código.
Tipos de conteúdo suportados
React, Solid.js, Vue, Svelte, Angular, HTML, CSS, shaders GLSL, Markdown, texto simples, imagens e vídeos.
Criando grupos
A Biblioteca de Blocos organiza blocos em grupos. Os grupos permitem categorizar e gerenciar blocos relacionados juntos.
Criar um novo grupo
Clique no botão "Criar um Novo Grupo" para abrir o modal de criação de grupo. Selecione uma categoria, digite o nome do grupo e clique em "Criar Grupo" para adicioná-lo.
Adicionar conteúdo aos grupos
Após criar um grupo, você pode arrastar e soltar arquivos ou colar conteúdo diretamente no grupo para preenchê-lo com blocos.
Criando blocos
Clique em "Criar um Novo Bloco" para abrir a visualização do criador de blocos. A partir daí, você tem três formas de adicionar conteúdo:
Entrada manual
Escreva ou edite manualmente o conteúdo do bloco diretamente na visualização do criador.
Colar conteúdo
Cole código, texto ou outro conteúdo diretamente no criador de blocos.
Criação com IA
Use IA para gerar conteúdo de blocos. Suporta React, shaders GLSL, Svelte, HTML, Vue, Angular, Solid.js e CSS.
Criação de blocos com IA
Ao usar IA para criar blocos, você pode gerar uma grande variedade de tipos de conteúdo. Além de código, você também pode criar imagens usando MediaGen ou localmente usando CompanyUI, e gerar vídeos também.
Edição direta com IA
Edite itens de blocos existentes diretamente usando IA. Forneça instruções e a IA modificará o conteúdo no local.
Criar variações
Insira um prompt e especifique quantas variações você deseja. A IA gerará múltiplas versões alternativas do conteúdo do bloco com base no seu prompt.
Usando blocos
Armazenar contexto
Salve documentação de API, trechos de código, referências de design e outros blocos de contexto para reutilização em projetos.
Criar mídia
Crie e armazene imagens, vídeos e outros recursos de mídia diretamente na biblioteca de blocos.
Enviar para IA
Anexe blocos armazenados como contexto ao trabalhar com IA — forneça exatamente as informações necessárias para gerar código preciso.
Engenharia Reversa
Engenharia Reversa é a ferramenta do Kaiju Hub AI de imagem-para-código e imagem-para-wireframe direcionada por caixas delimitadoras. Envie qualquer imagem de uma interface, desenhe ou detecte automaticamente caixas delimitadoras ao redor dos elementos, atribua comportamentos a cada caixa (ex.: abre um modal, navega para uma seção) e gere código funcional ou layouts de wireframe a partir da imagem anotada.
Anotação de caixas delimitadoras
Desenhe ou detecte automaticamente caixas delimitadoras ao redor dos elementos de interface em qualquer imagem, depois atribua comportamentos interativos a cada caixa.
Saída dupla
Converta imagens anotadas em código de componente funcional para o framework de destino, ou exporte como layouts de wireframe para edição posterior.