> ## Documentation Index
> Fetch the complete documentation index at: https://docs.morada.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Transforme ideias em experiências visuais

> Crie simuladores, páginas, protótipos, relatórios e explicações que você pode abrir e explorar no chat. Sem programar.

Você pode pedir mais do que uma resposta em texto. O Morada OS também cria arquivos que abrem como uma pequena página: você clica, muda valores, filtra informações e explora uma ideia.

É útil quando **ver e experimentar ajuda mais do que ler**. Em vez de explicar cinco cenários numa mensagem longa, por exemplo, você pode abrir um simulador e mudar as premissas durante a reunião.

Você não precisa saber programar nem conhecer o nome de um formato. Peça **"me explique isso visualmente"**, **"crie um simulador"** ou **"mostre uma ideia dessa página"**. A assistente também pode escolher uma apresentação visual por iniciativa própria quando ela ajudar.

## Escolha pelo que você precisa fazer

Cada receita abaixo mostra um arquivo completo gerado pelo chat do Morada OS, um pedido pronto para copiar e sugestões de ajustes. Os dados são fictícios; o conteúdo, o visual e as interações são os dos arquivos recebidos. Seu resultado pode variar conforme o pedido e os ajustes que fizer na conversa.

<CardGroup cols={2}>
  <Card title="Criar um simulador" icon="calculator" href="/morada-os/casos-de-uso/crie-um-miniapp">
    Mude volume de leads e conversão para explorar uma meta de vendas, sem refazer as contas.
  </Card>

  <Card title="Ver uma ideia de página" icon="window-maximize" href="/morada-os/casos-de-uso/rascunhe-uma-landing-page">
    Veja uma ideia de página de divulgação antes de investir na produção do site.
  </Card>

  <Card title="Testar um protótipo de app" icon="mobile-screen-button" href="/morada-os/casos-de-uso/experimente-um-mockup">
    Navegue entre telas e discuta o fluxo com o time antes de desenvolver o aplicativo.
  </Card>

  <Card title="Montar um relatório interativo" icon="chart-column" href="/morada-os/casos-de-uso/monte-um-relatorio-interativo">
    Troque o período, compare resultados e aprofunde a conversa com os números à vista.
  </Card>

  <Card title="Explicar um plano visualmente" icon="diagram-project" href="/morada-os/casos-de-uso/explique-um-plano-visualmente">
    Organize etapas e mostre como uma mudança de prazo afeta o restante do plano.
  </Card>
</CardGroup>

## Do pedido ao resultado: como abrir

<Steps>
  <Step title="Conte o objetivo no chat principal">
    Escolha uma receita e adapte o pedido. Diga para quem é, quais informações devem entrar e o que você quer conseguir mudar ou explorar. Você pode partir só de uma ideia ou anexar o material de referência.
  </Step>

  <Step title="Clique no card do arquivo">
    Ao terminar, a assistente entrega um arquivo com nome terminado em **.html**, como **plano-interativo.html**. **Clique nesse card na conversa**: ele abre a visualização. Você não precisa copiar o código nem instalar nada.
  </Step>

  <Step title="Explore e amplie">
    Use os botões, campos e filtros do arquivo na aba **Visualização**. No cabeçalho, o ícone **Expandir visualização** ocupa a janela com o conteúdo, sem a aba de código. **Restaurar tamanho** volta ao modo anterior; os valores preenchidos continuam ali enquanto a prévia estiver aberta.
  </Step>

  <Step title="Baixe ou peça um ajuste">
    O ícone **Baixar arquivo**, no cabeçalho, salva o HTML no seu computador. Para mudar o conteúdo, continue na conversa: "acrescente um filtro por empreendimento" ou "deixe a explicação mais simples". Abra o novo arquivo que a assistente entregar.
  </Step>
</Steps>

<Tip>
  A aba **Código** mostra como o arquivo foi construído, mas você não precisa usá-la. Para pedir mudanças, converse com a assistente.
</Tip>

## Um jeito simples de pedir

```text wrap theme={null}
Quero ajudar [público] a [entender ou fazer algo]. Monte uma página interativa com [informações que devem aparecer] e permita [mudar valores, filtrar, navegar por etapas]. Use os dados abaixo, deixe confortável no celular e entregue como um arquivo que eu possa abrir nesta conversa.
```

**Escolha uma interação que tenha um motivo.** Um filtro ajuda a comparar regiões; um controle de prazo ajuda a discutir atrasos. Se uma resposta curta já resolver, não precisa virar uma página. Se o destino for uma apresentação, um PDF ou uma planilha, peça esse formato.

## O que esperar dessa experiência

* **Funciona com o conteúdo do próprio arquivo.** Peça que tudo o que for necessário para funcionar esteja incluído no arquivo. Elementos buscados em outros sites, como imagens e fontes, não carregam na prévia e podem deixar um arquivo importado incompleto.
* **É uma experiência local.** Um simulador faz contas e um protótipo troca de tela; isso não liga um CRM, envia um formulário ou publica um site. Para uma integração ou publicação real, há trabalho adicional.
* **Alterar um campo não salva uma nova versão do arquivo.** Fechar e reabrir a prévia pode reiniciar os valores. O download salva o arquivo original, não as alterações feitas nos controles. Para guardar um cenário, peça à assistente um novo arquivo já com esses valores.
* **Confira o conteúdo antes de usar.** Verifique dados, contas e premissas. Um relatório bonito não substitui a conferência da fonte.

<Accordion title="Por que o arquivo termina em .html?">
  HTML é o formato usado para guardar a página e suas interações. Você não precisa pedir pelo nome técnico, abrir a aba de código ou instalar um programa: basta clicar no card. Se já recebeu um arquivo HTML de outra origem, também pode anexá-lo no chat principal para visualizar. Se alguma parte não aparecer, peça uma versão com os elementos necessários incluídos no próprio arquivo, quando possível.
</Accordion>