Crie um protótipo interativo
Comece com o template integrado OpenDesign Landing, personalize-o e verifique a página real antes de entregá-la. Você também pode iniciar um novo Prototype a partir de um briefing.
Etapa 1 — Abra o template
Abra Community e escolha OpenDesign Landing. Inspecione a prévia, abra More ways to Use e escolha Remix para criar um projeto editável a partir do exemplo. Use inicia com o prompt de exemplo; Remix copia o exemplo para um projeto que você pode editar.
O template é um design de exemplo. Todas as versões, quantidades, avaliações e links presentes nele são conteúdo de exemplo; verifique-os e substitua-os antes de usá-lo em um produto real.
Etapa 2 — Dê um propósito claro à página
Abra index.html em Design Files. Preview mostra a página, e Code mostra o código-fonte. Decida o que manter do template: a tipografia editorial, o fundo de papel em tom quente, a colagem e o ritmo das seções. Liste as informações do produto, as chamadas para ação e os destinos que você substituirá.
Adapte esta landing page para um estúdio fictício de design independente. Mantenha o papel em tom quente, os destaques em coral, a tipografia editorial e a colagem. Substitua o destaque principal, os serviços, os trabalhos selecionados e o texto de contato por conteúdo de exemplo claramente fictício. Faça a navegação levar à seção correta; use destinos de placeholder em vez de fluxos reais de conta ou pagamento. Verifique no desktop e em dispositivos móveis com 390px. Entregue o HTML editável e os recursos referenciados por ele.Este é um exemplo de briefing que você pode adaptar, não uma afirmação de que as capturas de tela foram geradas a partir dele. Para criar um projeto em branco, escolha Prototype na Home, conclua a configuração de IA e envie seu briefing com referências.
Etapa 3 — Faça uma pequena edição direta
Escolha Edit, selecione a palavra de destaque em itálico na seção principal e altere o Text de taste, para craft,. Escolha Save. Saia do modo de edição e recarregue: o título ainda deverá mostrar craft,. O guia de edição da tela explica tipografia, cor, tamanho, espaçamento e como desfazer alterações.
Etapa 4 — Verifique outra viewport
Use o menu Desktop acima da tela para escolher Mobile (390 × 844) ou Tablet (820 × 1180). Verifique as quebras de linha, a navegação, o espaçamento, o recorte das imagens e as áreas de toque. Isso altera o tamanho da prévia; não corrige o design automaticamente.
Etapa 5 — Solicite uma revisão específica
Use Comment para anexar uma solicitação a um elemento ou Mark para enviar uma captura de tela e uma observação. Por exemplo: “Deixe esta palavra de destaque na cor coral. Mantenha a fonte em itálico, o tamanho e a posição.” Salvar um comentário não executa o agente. Verifique o feedback selecionado antes de escolher Send to chat. Consulte as ferramentas de feedback.
Etapa 6 — Teste e entregue
Saia de Edit, Comment e Mark antes de testar a navegação e os botões. Verifique cada link e destino das seções. Depois, use Export para escolher PDF, imagem, ZIP ou HTML independente, conforme disponível. Preserve os recursos referenciados e abra a entrega fora do aplicativo antes de considerá-la concluída. Arquivos e versões do projeto e compartilhamento explicam as outras formas de entrega.
Se Preview estiver em branco
Aguarde a prévia carregar e escolha Reload Preview. Use Code para confirmar que o arquivo contém conteúdo. Se continuar em branco, reabra-o em Design Files ou exporte o HTML e abra-o em um navegador com os respectivos recursos. Informe a versão do aplicativo, o arquivo afetado e o erro caso funcione fora do aplicativo, mas falhe dentro dele.