O que é o Canvas?
O Canvas é a visualização de design do Project Editor. O Agent gera frames representando websites, designs, imagens, gráficos vetoriais e vídeos, e os organiza em um quadro infinito. Você pode movê-los e redimensioná-los, gerar variantes e iterar com o chat.
Capacidades do Canvas
O Canvas expõe um pequeno conjunto de capacidades, cada uma acessível pela barra de ferramentas ou pela barra de ações de cada frame.- Generate: crie novos frames (designs, imagens, gráficos vetoriais, vídeos) a partir do menu Generate da barra de ferramentas ou de um prompt de chat.
- Refine: aplique edições pontuais a um frame no lugar, por meio do campo de edição inline.
- Reimagine: produza variantes lado a lado de um frame existente usando direções predefinidas ou um prompt livre.
- Build: transforme um frame de Design em um Artefato ativo por meio do menu Build de cada frame.
Anatomia do Canvas
- Canvas: a superfície infinita de panorâmica e zoom que contém todos os frames, formas e notas.
- Frames: todo bloco no Canvas é um frame. Os dois tipos principais são Artefatos (ativos, apoiados por um aplicativo — o cabeçalho do frame exibe Website, Slides, etc.) e Designs (mockups que não afetam o aplicativo ativo — o cabeçalho do frame exibe Design). Outros tipos incluem imagens, vídeos e gráficos vetoriais.
- Elements: as peças individuais dentro de um frame (texto, botões, imagens e outros componentes). Elements são o que você seleciona e ajusta com o Editor Visual.
- Toolbar: uma barra flutuante com as ferramentas do Canvas. Consulte Toolbar para o catálogo completo.
- Barra de ações por frame: aparece quando você seleciona um frame. Expõe Reimagine, Build…, Preview e Inspect — consulte Frames.
- Painel de chat: chat do Agent ancorado ao lado do Canvas. Selecionar frames antes de enviar uma mensagem os anexa como snapshots para que o Agent tenha contexto visual.
Construir um novo aplicativo a partir de um frame de Design requer o plano Core ou Pro; todas as outras capacidades do Canvas funcionam em qualquer plano. Consulte Billing para detalhes dos planos.
- Toolbar — catálogo completo de ferramentas, gestos e seleção.
- Frames — tipos de Frame; a barra de ações por frame; Reimagine, Refine, Annotate e Build.
- Elements — as peças individuais dentro de um frame.
- Agent — o Agent que gera e edita frames no Canvas.
- Guia do Canvas — passo a passo em tutorial.
- Design com o Canvas — gere variações visuais de um aplicativo existente e aplique a que você quiser.
- Canvas vs Preview — quando usar cada superfície.