Proto-Typed — descreva interfaces, veja protótipos, itere com IA.
Sem arrastar blocos
Você descreve a interface e o sistema cuida do resto.
Padrões prontos
Cards, listas e fluxos com boas decisões visuais por padrão.
Feito com IA em mente
Sintaxe estável para humanos e modelos iterarem com confiança.
Do conceito ao protótipo em minutos. Em vez de “pedir uma mudança” na UI, você descreve a mudança. Em vez de ajustar pixel a pixel, você reescrever a seção ou pede para uma IA fazer. O rascunho está sempre atualizável e compartilhável.
Descrever
Capture telas, listas e ações em texto legível e versionável.
Visualizar
Gere protótipos navegáveis com padrões coerentes imediatamente.
Iterar
Peça ajustes em linguagem natural e deixe a IA reescrever trechos.
Exportar
Leve HTML hoje e abra portas para outros runtimes amanhã.
O problema e o formato textual
O problema
Criar UI ainda é pesado: ferramentas gráficas são ótimas para desenhar, mas lentas para iterar; código é preciso, porém verborrágico. E as IAs entendem intenções, mas não “editam” arquivos visuais com fluidez.
Proto-Typed nasce para ser o idioma comum de prototipação entre pessoas e IAs — rápido de escrever, fácil de ler e simples de versionar.
O que é
Proto-Typed é um formato textual de interface. Você descreve conteúdo, estrutura e ações; ele gera um protótipo navegável.
Pensamento-chave: você foca na intenção (o que é um “card”, um “header”, uma “lista”), e o sistema decide como renderizar com bons padrões. É a lógica de “conteúdo primeiro, aparência depois” — como em editores de texto científicos — aplicada à UI.
Quando interface vira texto, todo mundo ganha velocidade
PMs e Gestores
Alinhe rapidamente fluxo e comportamento visual — sem abrir ferramenta de design.
Devs backend e full-stack
Monte telas de protótipo sem mergulhar em CSS/JSX.
LLMs e agentes
Edite com humanos em um formato textual estável, seguro e versionável.
Como funciona
Descrever → Visualizar → Iterar → Exportar.
Por baixo, há uma representação semântica da interface (uma “árvore” que entende o que é tela, card, lista). Hoje renderizamos em HTML; amanhã, React Native/Flutter e outros alvos. O destino de renderização é coadjuvante: prioridade à fluidez de edição e à velocidade de iteração.
Descrever
Capture telas, listas e ações em texto legível e versionável.
Visualizar
Gere protótipos navegáveis com padrões coerentes imediatamente.
Iterar
Peça ajustes em linguagem natural e deixe a IA reescrever trechos.
Exportar
Leve HTML hoje e abra portas para outros runtimes amanhã.
Princípios que guiam o Proto-Typed
Simplicidade acima da customização extrema. Boas decisões por padrão.
Semântica antes de aparência. Você descreve “o que é”; o sistema escolhe “como parece”.
Amigável para IA. Sintaxe curta, previsível e fácil de gerar por modelos.
Portável por design. Um único modelo semântico, múltiplos renderizadores.
Cobrir ~90% dos casos. Foco no que destrava prototipagem.
Influências e escolhas de design
Resposta instantânea, atualização em segundo plano.
Inspirado por padrões do TanStack Query: mostre algo agora e refine em seguida. Em protótipos, isso vira “veja rápido, melhore logo depois”.
Aproveitar a plataforma, degradar graciosamente.
A filosofia de progressive enhancement do Remix guia nossa robustez: conteúdo e comportamento essenciais funcionam primeiro, o resto é melhoria incremental.
Híbrido por natureza, escolha o melhor lugar para executar.
Do Next.js, herdamos a ideia de múltiplas estratégias de renderização. Em Proto-Typed, significa emitir a mesma intenção para diferentes runtimes sem reescrever.
O que você escreve (exemplo curto)
screen Dashboard:
header:
# Dashboard
@ghost[Settings](Settings)
container:
card:
## User Stats
> Total users: 1,234
@[View Details](Users)O que você recebe: um protótipo navegável com padrões de layout e estilo; peça à IA para “duplicar a card de métricas” ou “trocar o botão para secundário grande” e veja a mudança em segundos.
Manifesto de visão (resumo)
- Por que existe: prototipar interfaces não deveria exigir arrastar caixas, decorar frameworks ou traduzir intenções para pixels. A maioria das UIs repete padrões previsíveis; o que muda é conteúdo, fluxo e intenção.
- O que faz: transforma esses padrões em descrições claras, legíveis por humanos e IAs, encurtando o caminho entre ideia e interface navegável.
- Como faz: cobre ~90% dos casos com layouts canônicos e componentes semânticos, favorecendo edição fluida e natural, com um modelo desacoplado do destino de renderização.
- Para onde vai: co-criação humano-IA realmente fluida — descrever, visualizar, pedir ajustes, versionar e exportar para múltiplos alvos sem fricção.
Texto de interface → Representação semântica → Renderizador(es).
Texto de interface
Tudo começa descrevendo a experiência em linguagem natural estruturada.
Representação semântica
Transformamos o texto em uma “árvore” que entende telas, cards e listas — interface, não HTML.
Renderizadores
Hoje renderizamos em HTML; amanhã, React Native/Flutter e outros alvos, sem alterar a descrição original.
Para onde o Proto-Typed está indo
Co-criação humano-IA cada vez mais fluida: descrever, visualizar, ajustar por conversa.
Renderização multi-alvo: HTML hoje; React Native/Flutter amanhã — uma única fonte de verdade.
Padrões de interação mais ricos: listas dinâmicas, estados de carregamento, fluxos e validações — no mesmo idioma.
FAQ (filosofia rápida)
Isso substitui ferramentas de design?
Não. Cobrimos o espaço de prototipação textual rápida e comunicação de intenção. Ferramentas visuais continuam ótimas para refinamento e pixel-perfection.
Por que texto?
Porque é editável, versionável e conversável — por pessoas e IAs. A iteração vira linguagem, não cliques.
Onde entram dados reais?
Quando necessário, você pode simular dados ou conectar fontes externas nos renderizadores — mantendo o foco na intenção da UI. A filosofia geral é “mostre algo agora, refine depois”.
Comece a prototipar em segundos.
Abra o editor, descreva uma tela e veja o protótipo surgir. Depois, itere com sua equipe — e com sua IA.