Da tela que já existe
à tela nova, conversando.
O MockStudio copia as telas de qualquer sistema, transforma num protótipo que funciona de verdade e deixa você mudar tudo pedindo em português. No fim, entrega o documento para o desenvolvedor implementar.
App para Windows · usa a sua conta do Claude
Do print ao protótipo,
do protótipo ao código.
Comece pela tela que já existe
Cole o endereço ou navegue pelo sistema dentro do app, inclusive telas com login. Cada tela vira uma página do projeto, com o visual idêntico ao original.
- Três modos de captura: rápida, completa ou só imagem
- Menus e combos abertos são guardados como estados
- Biblioteca para reaproveitar telas entre projetos
Peça a mudança em português
Clique num elemento e escreva o que quer. O Claude altera o mockup, a tela recarrega e cada pedido vira uma alteração registrada, com o antes e o depois.
- Ctrl+K abre o chat em qualquer tela
- Sugestões prontas para começar
- Funciona com a sua conta do Claude
Uma segunda opinião de especialista
O validador mede contraste, tamanho de texto e de áreas de clique e formulários sem rótulo. Depois o Claude faz a análise de especialista com heurísticas de usabilidade.
- Nota por critério e por página
- Problemas marcados no print
- Sugestão de correção para cada item
Pronto para seguir para o código
Exporte o documento para o desenvolvedor, o pacote de apresentação, o PDF ou a pasta da primeira etapa do Fluxo Âncora, com requisitos e critérios de aceite sugeridos.
- Documento com instruções para a IA que vai implementar
- Pacote .zip que abre offline em qualquer navegador
- Integração com o Fluxo Âncora
Mostre como se fosse o sistema pronto
O modo apresentação esconde o app e deixa só o mockup em tela cheia. As setas trocam de página e as ações funcionam: menus, modais e avisos.
- F5 entra no modo apresentação
- Navegação pelas setas do teclado
- Ideal para validar com o cliente
Cada recurso em um vídeo curto.
Todos têm entre 50 segundos e um minuto e meio, com narração e legenda.
1min21sCapturar telasNavegar e capturar, os três modos de captura (Rápida, Completa e Só imagem) e como guardar um menu ou combo aberto
com Capturar estado.
1min04sEditar conversando com a IASelecionar um elemento, pedir a mudança no chat (Ctrl+K), acompanhar a IA trabalhando, ver o resultado e a
alteração registrada para o documento do dev.
1min13sAções e modais sem códigoO assistente Criar ação em 4 passos: escolher o elemento, o que acontece ao clicar, criar um modal novo descrito em
português e ver funcionando (abrir, preencher, salvar e o aviso).
0min57sFluxosMontar o caminho do usuário automaticamente a partir das ações, com setas saindo do botão clicado e modais com o
print aberto; ajustar passos e telas, notas e setas livres; exportar a imagem.
1min15sBiblioteca de telasGuardar telas em coleções por sistema (enviando do projeto ou capturando direto), buscar por nome ou endereço,
usar em outro projeto, recapturar quando o sistema muda e exportar/importar.
1min04sValidador de UX e documento do devValidar a tela (notas por critério, problemas com gravidade, sugestão e a regra de UX, análise opcional da IA) e
gerar o documento para o dev, com instruções para a IA que vai implementar, resumo das alterações, fluxos e PDF.
0min53sPacote de apresentaçãoGerar o .zip, levar para outro computador, extrair e dar dois cliques no index.html: o mockup abre no navegador,
offline, com as ações funcionando e o botão ☰ para pular entre as páginas.
1min09sDocumento para o devO que vem no documento (.md com a pasta de imagens): instruções para a IA que vai implementar, resumo, fluxos,
antes e depois e cada alteração com print marcado. E como o dev usa: abre a IA de código dele no projeto real e
pede "implemente a página X deste documento".Clique num mock feito pelo MockStudio.
Um sistema de vendas fictício, capturado pelo app e com as ações ligadas: o menu navega, "Novo pedido" abre um modal com máscara de dinheiro e "Salvar" mostra o aviso. Do jeito que você entregaria para alguém.
Abrir a demonstraçãoQuem desenha, quem pede
e quem implementa.
UX e UI
Testa a ideia em cima do sistema real, sem redesenhar tudo do zero numa ferramenta de design.
Analistas e POs
Mostra exatamente o que quer com um mock clicável, em vez de descrever em texto.
Desenvolvedores
Recebe um documento pronto para a IA de código: o que mudou, onde e como deve funcionar.
Fluxo Âncora
O protótipo vira a parte visual da etapa 1 (PO): a história do usuário já nasce com prints, requisitos e critérios de aceite sugeridos.
Ver a integração- Windows 10 ou 11
- Uma conta do Claude, pessoal ou da empresa
- O instalador traz um assistente que prepara tudo