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

# Como criar o teu primeiro projeto

> O teu primeiro site ou app, criado hoje

Descreves o que queres em linguagem simples, e o Vibewax cria isso por ti. Pensa nisto como enviar uma mensagem a um programador muito competente que trabalha instantaneamente.

## Antes de começares

Não precisas de um plano detalhado. Mas se não sabes bem por onde começar, estes são ótimos primeiros projetos:

<CardGroup cols={2}>
  <Card title="Landing page" icon="browser">
    Simples, focada, rápida de criar. Perfeita para testar uma ideia.
  </Card>
  <Card title="Portefólio pessoal" icon="user">
    Algumas páginas sobre ti, o teu trabalho e como entrar em contacto.
  </Card>
  <Card title="Site empresarial" icon="building">
    Início, sobre, serviços, contacto. Uma estrutura de base sólida.
  </Card>
  <Card title="Painel interno" icon="table-columns">
    Uma ferramenta simples para a tua equipa acompanhar tarefas ou mostrar dados.
  </Card>
</CardGroup>

**O que deves ter pronto:**

- Uma breve descrição do que trata o teu site (uma frase é suficiente)
- O teu logótipo, se tiveres um
- Cores da marca, ou um site de referência cujo aspeto gostes

<Note>
  Não penses demasiado nisto. Tudo pode ser alterado mais tarde, por isso a tua primeira versão não precisa de ser perfeita.
</Note>

## Cria o teu primeiro projeto

<Steps>
  <Step title="Abre o Vibewax e inicia um novo projeto">
    O campo de prompt está bem visível no centro do ecrã inicial.

    <img src="https://vibewax.be/docs/images/guides_first-project_01.png" alt="Starting New Chat" width="1500" height="1000" />
  </Step>
  <Step title="Descreve o que queres criar">
    Diz ao Vibewax o que tens em mente, da mesma forma que explicarias a um amigo. Funciona em qualquer idioma.

    Se já tiveres materiais prontos (um logótipo, diretrizes de marca, um PDF com conteúdo), anexa-os desde já. Quanto mais contexto o Vibewax tiver desde o início, melhor será o primeiro resultado.
  </Step>
  <Step title="Espera que o agente termine">
    O Vibewax começa a criar de imediato. Pode fazer uma ou duas perguntas pelo caminho se algo precisar de esclarecimento.

    A primeira versão pode demorar até alguns minutos. Vais ver atualizações no chat à medida que o agente trabalha.

    <img src="https://vibewax.be/docs/images/guides_first-project_02.png" alt="Agent plan" width="1500" height="1000" />
  </Step>
  <Step title="Revê o resultado">
    Verifica a pré-visualização à direita. Observa o layout, o texto, as imagens e o aspeto geral. Usa o seletor de dispositivo por cima da pré-visualização para veres instantaneamente como o teu site fica em telemóvel, tablet e computador.

    Não vai ficar perfeito à primeira, e isso é completamente normal. Continua a aperfeiçoar enviando novas mensagens no chat, ou muda para <Tooltip headline="Edições visuais" tip="Usa a barra sobre a tua pré-visualização para editar um elemento diretamente, reescrever texto no sítio ou marcar do que estás a falar." cta="Saber mais sobre Edições visuais" href="/docs/pt/features/visual-edits">a barra sobre a tua pré-visualização</Tooltip> para fazeres alterações precisas diretamente na página.

    <img src="https://vibewax.be/docs/images/guides_first-project_03.png" alt="Review result" width="1500" height="1000" />
  </Step>
</Steps>

## Como falar com o Vibewax

Fala com o Vibewax como falarias com um amigo. Sem comandos, sem termos técnicos. Diz apenas o que queres.

Começa com algo concreto:

```
Quero criar um site para o meu café chamado Dusk. É um espaço
pequeno e acolhedor em Lisboa. Bom café, pastelaria caseira,
jazz ao vivo aos fins de semana. Cores quentes, muitas fotografias
de comida.
```

Depois continua a conversa. Cada mensagem constrói sobre o que já foi criado:

```
Encontrei um site cujo estilo gosto muito: https://example.com
Conseguimos fazer algo parecido para a página inicial?
```

```
Troca as avaliações do Google Maps por uma galeria de fotos.
```

```
Podes adicionar uma secção de menu? Tenho o nosso menu completo
em PDF, vou carregá-lo. Consegues tirar os itens e preços dele?
```

O Vibewax mantém o contexto completo do teu projeto ao longo da conversa, por isso nunca perde o fio ao que já foi criado.

### Algumas dicas

- **Melhores resultados começam com contexto.** Partilha um site de referência, carrega o teu logótipo ou explica para quem é o site. Quanto mais o Vibewax souber, melhor será o resultado.

- **Descreve o resultado, não os passos.** Foca-te no aspeto ou na sensação que queres transmitir. O Vibewax trata de descobrir como fazê-lo.

- **Envia um pedido de cada vez.** Mensagens focadas dão melhores resultados do que listas longas. Se tiveres várias alterações em mente, envia-as uma a uma e o Vibewax trata delas por ordem.

- **Pergunta antes de criar.** Não tens a certeza se algo é possível? Basta perguntar. O Vibewax pode explicar-te as opções antes de qualquer trabalho começar.

- **Diz o que está errado, não apenas que está errado.** "O tipo de letra parece demasiado formal" dá ao Vibewax algo concreto com que trabalhar. "Tenta outra vez" não dá.

## Quando algo corre mal

Algo não está com bom aspeto? Isso é completamente normal, especialmente no início. Eis o que fazer:

- **Pede ao agente para desfazer.** Descreve o que mudou e diz que queres reverter. Funciona melhor quando só uma coisa correu mal.
- **Restaura uma versão anterior.** Se várias coisas correram mal ao mesmo tempo, restaurar é mais rápido do que desfazer passo a passo. Abre o **Histórico de versões** no ícone do relógio da barra superior, vê a versão que queres e clica em **Restaurar**. Vê [Histórico de versões](/docs/pt/chat/overview#histórico-de-versões).
- **Edita um prompt anterior.** Volta a qualquer mensagem anterior e edita-a. O Vibewax retrocede o projeto até esse momento e reconstrói-o a partir do teu prompt atualizado.
- **Começa a partir de uma cópia segura.** Antes de fazeres alterações grandes, clica em "Duplicar" por baixo de qualquer mensagem. Assim tens sempre um ponto de recuo para onde voltar.


This page is part of the [Vibewax documentation](https://vibewax.be/docs/pt/welcome/overview).
