Layrr
Narnia · Imagem · Programação
O Layrr é uma CLI gratuita e de código aberto que transforma o navegador em um editor de código visual para apps web locais. Você seleciona um elemento na página em execução, descreve a mudança em linguagem comum e um agente de código com IA atualiza os arquivos-fonte correspondentes no seu repositório. Ele funciona ao lado da configuração que você já usa, conecta-se ao Claude Code, ao Codex CLI ou ao Gemini via Pi, e edita o código real em vez de uma camada de design separada.
Sobre Layrr
O que é o Layrr
O Layrr é uma ferramenta de linha de comando criada pela Narnia que fica entre o navegador e o servidor de desenvolvimento. Pense nele como uma interface de agente de código no navegador: ele injeta uma pequena camada sobreposta na página que você está vendo, mapeia qualquer elemento em que você clica de volta para o código que o renderizou e entrega essa localização a um agente de código junto com a sua instrução. A proposta é simples. O erro aparece no navegador, mas o arquivo não. O Layrr fecha essa lacuna.
Para quem é? Para desenvolvedores que já rodam um app web localmente e já confiam em um agente de código com IA. Em vez de descrever uma página de memória, você aponta o botão, o cartão ou o título exato a que se refere. Isso tira o palpite do prompt.
O principal limite é o escopo. O Layrr é um editor visual para edições de código-fonte, não uma ferramenta de design completa nem uma plataforma de hospedagem. Ele espera um app local, um servidor de desenvolvimento em execução e um repositório Git, e se apoia no agente que você configurou. Também chega como CLI, então não há app com interface gráfica para instalar nem dependência de uma IDE específica. Isso significa que se virar no terminal faz parte do acordo.
Primeiros passos
- Instale a CLI globalmente com
npm i -g layrre execute-a a partir da raiz de um projeto web local. - Inicie o servidor de desenvolvimento como de costume e deixe o Layrr atuar como proxy entre o navegador e esse servidor.
- Abra o app no navegador, passe o cursor sobre um elemento e clique nele (ou Shift+clique para pegar vários) a fim de selecionar o contexto exato que você quer mudar.
- Descreva o ajuste em linguagem comum, cobrindo texto, espaçamento, cor, layout ou um componente inteiro.
- Revise a edição do agente, confira o commit
[layrr]no seu histórico do Git e reverta se o resultado não for o que você queria.
Informações do produto
Uma visão rápida dos preços, das plataformas compatíveis e do desempenho de Layrr.
Ideal para
Os usuários, tarefas e cenários em que esta ferramenta se encaixa melhor.
Usuários
- Desenvolvedores frontend
- Criadores solo e indie hackers
- Usuários de agentes de código com IA
Tarefas
- Corrigir erros visuais
- Ajustes pequenos de interface
- Prototipar mudanças
Cenários
- Iterar sobre uma página durante o desenvolvimento local quando você vê o problema, mas não o arquivo por trás dele.
- Entregar um elemento preciso a um agente quando um prompt de texto vago erra o alvo.
- Trabalhar em um app existente no qual você não quer adotar um framework novo nem sair do editor atual.
Principais recursos
Seleção de elementos com um clique
O Layrr injeta uma camada sobreposta na página em execução para que você possa passar o cursor e selecionar o elemento exato a que se refere, ou fazer Shift+clique para pegar vários de uma vez. Ele passa o DOM selecionado e o contexto do código-fonte para a edição. Chega de descrever a marcação de memória. O agente trabalha a partir da estrutura real, e não da sua paráfrase dela.
Mapeamento do código de volta para arquivos reais
A ferramenta usa metadados do framework e busca de arquivos para rastrear um elemento clicado de volta até o código que o renderizou. Esse mapeamento é o núcleo do produto. É a diferença entre pedir a um agente para mudar "o cabeçalho" e dizer a ele exatamente qual componente mexer.
Pedidos de edição em linguagem comum
Com um elemento selecionado, você descreve a mudança em linguagem normal, cobrindo texto, espaçamento, cor, layout ou um ajuste de componente. Seja breve. O Layrr mantém a localização exata do código-fonte atrelada ao pedido, então a instrução fica ancorada no código certo.
Histórico do Git com reversão
As edições bem-sucedidas são commitadas com o prefixo [layrr], então cada mudança aparece no seu histórico normal do Git. Você pode inspecionar o que o agente fez. Se uma edição errar o alvo, volte atrás.
Consciência de arquivos modificados
Antes de o agente rodar, o Layrr tira um snapshot do repositório e evita preparar arquivos que já estavam modificados. Isso mantém mudanças locais não relacionadas fora do commit. Torna a ferramenta mais segura de usar no meio do trabalho, quando você provavelmente tem outras edições em andamento.
Flexibilidade de frameworks e agentes
O Layrr funciona com frameworks comuns como React, Vue, Svelte, Next.js e Astro, além de qualquer HTML puro. Ele é baseado em proxy, então encontra o app onde ele já roda. Você pode combiná-lo com o Claude Code, o Codex CLI ou o Gemini via Pi. Não há dependência de IDE e você o instala com um único comando npm.
Prós e contras
Prós
- Gratuito e de código aberto sob a licença MIT, com o repositório hospedado no GitHub.
- Envia ao agente o contexto exato do elemento e do código-fonte, o que reduz prompts vagos ou mal direcionados.
- Funciona com apps existentes e frameworks comuns, então não há reescrita para adotá-lo.
- Faz commit de cada edição com o prefixo `[layrr]`, o que facilita inspecionar ou reverter as mudanças.
- Sem dependência de IDE e sem prender você a um agente de código específico.
Contras
- É uma CLI, então não há app gráfico para desenvolvedores que preferem uma interface de apontar e clicar.
- Precisa de um app local, um servidor de desenvolvimento em execução e um repositório Git, então não serve para configurações hospedadas ou de código fechado que você não consegue rodar localmente.
- A qualidade de uma edição ainda depende do agente de código com IA com o qual você o combina.
- É um projeto jovem, então a profundidade de recursos e a estabilidade ainda estão alcançando as ferramentas de design maduras.
Perguntas frequentes
Ele transforma o navegador em um editor de código visual para apps web locais. Você clica em um elemento, descreve uma mudança e um agente de código com IA edita os arquivos-fonte correspondentes no seu repositório. O Layrr cuida do mapeamento entre o que você vê e o código por trás.
Conteúdo relacionado
Explore ferramentas, skills e artigos relacionados a Layrr.
Alternativas a Layrr
X Ray Interpreter
X-ray Interpreter · ImagemO X Ray Interpreter é uma ferramenta de radiologia com IA baseada na web que transforma raios X, tomografias, ressonâncias, ultrassonografias e imagens PET em laudos em linguagem simples. Você envia um exame, recebe uma interpretação preliminar dos raios X em instantes e depois faz perguntas de acompanhamento se algo precisar de explicação. Ele funciona como segunda opinião e como apoio de aprendizado, não como diagnóstico médico.
Aieasypic
AIEasyPic · ImagemO AIEasyPic é um gerador de imagens com IA que transforma prompts de texto simples em obras finalizadas em segundos. Você também pode treinar modelos personalizados com suas próprias fotos, trocar rostos em imagens existentes e criar clipes de vídeo curtos a partir de texto, tudo pelo navegador. Ele serve tanto para criadores casuais que querem imagens rápidas quanto para hobistas que desejam montar um modelo pessoal sem tocar em código.
Chargen
Chargen · ImagemO Chargen é um gerador de personagens com IA e um conjunto de ferramentas de criação de mundos feito para Dungeons & Dragons e outros RPGs de mesa. Ele transforma uma ideia de uma linha em um retrato de personagem pintado, cria NPCs, monstros, mapas e encontros na mesma sessão, e mantém os detalhes de cada criatura à mão. A parte de arte para RPG de mesa funciona com um sistema de créditos chamado Gold, enquanto os geradores de texto seguem gratuitos para todos.