Visualização do criador
Visão geral do layout
A Visualização do Criador é um ambiente de edição de três painéis que você abre clicando duas vezes em qualquer grupo na Área de Componentes. Ela fornece uma lista de blocos à esquerda, um editor de código no centro e uma pré-visualização ao vivo à direita, com uma Caixa de Prompt de IA ao longo da parte inferior.
Painel de lista de blocos
O painel esquerdo mostra todos os blocos do grupo atual. Cada bloco exibe uma pré-visualização de cartão com o nome do bloco e uma lista de arquivos numerada abaixo. Use a barra de ferramentas no topo para navegar de volta, alternar entre visualizações de lista e dividida, ou clique no botão + para adicionar um novo bloco.
Editor de código
O painel central é um editor de código com abas onde você escreve e edita o conteúdo dos blocos. As abas são organizadas por tipo de arquivo:
Text
Escreva documentação, markdown ou conteúdo de texto simples para o bloco.
HTML
Edite a estrutura HTML do seu componente.
CSS
Adicione estilos para seu componente.
JavaScript
Adicione interatividade e lógica ao seu componente.
Pré-visualização ao vivo
O painel direito renderiza uma pré-visualização ao vivo do seu componente. À medida que você adiciona HTML, CSS e JavaScript no editor, a pré-visualização se atualiza para mostrar o resultado compilado. Você também pode arrastar e soltar arquivos ou colar conteúdo (Ctrl+V) diretamente na área de pré-visualização para adicioná-los ao bloco. Use o ícone do olho para alternar a pré-visualização e o toggle BG para mudar o fundo da pré-visualização.
Caixa de prompt de IA
A barra inferior é o Campo de Prompts de IA. Use-o para descrever alterações e deixar a IA gerar ou modificar o conteúdo do seu bloco. Inclui um seletor de modelo, um campo de entrada de texto, entradas de voz e emoji, e um botão Gerar. Dois toggles de modo — A e V — alternam entre o Modo de IA Direta e o Modo de Variações.
Categorias de geração IA
O seletor de modelo de IA revela categorias de geração que determinam que tipo de conteúdo a IA produz:
Geração de texto
Gere ou edite conteúdo baseado em texto, como código, documentação e markup.
Geração de imagem
Crie imagens a partir de prompts de texto ou edite imagens existentes com IA (texto para imagem e imagem para imagem).
Geração de vídeo
Gere vídeos a partir de descrições de texto ou anime imagens estáticas em vídeo (texto para vídeo e imagem para vídeo).
Modo IA direto (A)
Quando o toggle A está ativo, a IA faz modificações diretas no seu componente no local. O texto do campo mostra “Descreva as alterações a aplicar ao seu componente” e um badge indica qual arquivo será modificado (por exemplo, “Modificará: texto”). Este modo é ideal para edições rápidas e específicas no arquivo selecionado atualmente.
Modo de variação (V)
Quando o toggle V está ativo, a IA gera múltiplas variações do seu componente em vez de editá-lo no local. O texto do campo muda para “Descreva as variações que deseja gerar” e um contador aparece com controles − / + para que você possa escolher quantas variações criar. As variações geradas aparecem em um painel dedicado onde você pode revisá-las e adicionar suas versões preferidas ao grupo.