Começando
Primeiros passos
1. Pasta de projetos
Na primeira vez que abre, o MockStudio pergunta onde guardar os projetos e sugere
Documentos\MockStudio. Aceite ou clique em Escolher….
- Cada projeto vira uma subpasta, com as páginas, imagens, dados e exportações.
- Para trocar depois: ⚙ Configurações → Pasta dos projetos → Alterar… (o app oferece mover os projetos existentes).
2. Criar um projeto
Um projeto agrupa as telas de um mesmo sistema (ex.: Portal do Cliente — redesign).
- Clique no nome do projeto no topo (ao lado do logo) → Novo projeto.
- Para abrir outro projeto, clique no mesmo lugar (ou Ctrl+O): aparecem os recentes, a busca e Abrir de outra pasta…. Veja Projetos.
- Para ver os arquivos do projeto no Explorer, clique em 📂 Pasta do projeto, ao lado do nome do projeto.
O app sempre abre maximizado.
3. Como a tela é organizada
| Área | Para que serve |
|---|---|
| Topo | Projeto atual, Pasta do projeto, barra de URL com Capturar, Navegar e capturar, Apresentar, Exportar, ajuda (?) e configurações (⚙) |
| Esquerda | Lista de páginas do projeto, numeradas |
| Centro | A página aberta, funcionando. Abas para várias páginas, modo Visualizar/Selecionar e tamanhos de tela |
| Direita | Elemento (detalhes e ações rápidas) e Alterações (registro para o documento do dev) |
| Chat flutuante | Conversa com o Claude. Arraste pelo título, redimensione pelo canto |
| Rodapé | Conta do Claude ativa, status e pasta dos projetos |
4. Fluxo típico
- Capture as telas.
- Peça ao Claude para tornar funcional.
- Peça as mudanças: botões, textos, modais, navegação.
- Apresente e gere o documento para o dev.