Layrr
Narnia · Imagen · Programación
Layrr es una CLI gratuita y de código abierto que convierte tu navegador en un editor de código visual para apps web locales. Seleccionas un elemento en la página que se está ejecutando, describes el cambio en lenguaje normal y un agente de código con IA actualiza los archivos fuente correspondientes en tu repositorio. Funciona junto a la configuración que ya usas, se conecta con Claude Code, Codex CLI o Gemini vía Pi, y edita el código real en lugar de una capa de diseño aparte.
Acerca de Layrr
Qué es Layrr
Layrr es una herramienta de línea de comandos creada por Narnia que se sitúa entre tu navegador y tu servidor de desarrollo. Piénsalo como una interfaz de agente de código en el navegador: inyecta una pequeña capa superpuesta en la página que estás viendo, asocia cualquier elemento en el que hagas clic con el código que lo generó y entrega esa ubicación a un agente de código junto con tu instrucción. La propuesta es sencilla. El error se ve en el navegador, pero el archivo no. Layrr cierra esa distancia.
¿Para quién es? Para desarrolladores que ya ejecutan una app web en local y ya confían en un agente de código con IA. En lugar de describir una página de memoria, señalas el botón, la tarjeta o el encabezado exacto al que te refieres. Así quitas las conjeturas del prompt.
El límite principal es el alcance. Layrr es un editor visual para ediciones de código fuente, no una herramienta de diseño completa ni una plataforma de alojamiento. Espera una app local, un servidor de desarrollo en marcha y un repositorio Git, y se apoya en el agente que hayas configurado. También llega como CLI, así que no hay app con interfaz gráfica que instalar ni dependencia de un IDE concreto. Eso significa que manejarse en la terminal es parte del trato.
Primeros pasos
- Instala la CLI de forma global con
npm i -g layrry ejecútala desde la raíz de un proyecto web local. - Arranca tu servidor de desarrollo como siempre y deja que Layrr actúe como proxy entre el navegador y ese servidor.
- Abre la app en el navegador, pasa el cursor sobre un elemento y haz clic en él (o Shift+clic para tomar varios) para seleccionar el contexto exacto que quieres cambiar.
- Describe el ajuste en lenguaje normal, ya sea texto, espaciado, color, diseño o un componente entero.
- Revisa la edición del agente, comprueba el commit
[layrr]en tu historial de Git y revierte si el resultado no es el que querías.
Información del producto
Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de Layrr.
Ideal para
Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.
Usuarios
- Desarrolladores frontend
- Creadores en solitario e indie hackers
- Usuarios de agentes de código con IA
Tareas
- Corregir errores visuales
- Ajustes pequeños de interfaz
- Prototipar cambios
Casos de uso
- Iterar sobre una página durante el desarrollo local cuando ves el problema pero no el archivo que hay detrás.
- Entregar un elemento preciso a un agente cuando un prompt de texto vago no acierta con el objetivo.
- Trabajar sobre una app existente en la que no quieres adoptar un framework nuevo ni salir de tu editor actual.
Funciones clave
Selección de elementos con un clic
Layrr inyecta una capa superpuesta en la página en ejecución para que puedas pasar el cursor y seleccionar el elemento exacto al que te refieres, o hacer Shift+clic para tomar varios a la vez. Pasa el DOM seleccionado y el contexto del código fuente a la edición. Se acabó describir el marcado de memoria. El agente trabaja a partir de la estructura real y no de tu paráfrasis.
Asignación del código a los archivos reales
La herramienta usa los metadatos del framework y la búsqueda de archivos para rastrear un elemento clicado hasta el código que lo generó. Esa asignación es el núcleo del producto. Es la diferencia entre pedirle a un agente que cambie "el encabezado" y decirle exactamente qué componente tocar.
Peticiones de edición en lenguaje normal
Con un elemento seleccionado, describes el cambio en lenguaje corriente: texto, espaciado, color, diseño o un ajuste de componente. Sé breve. Layrr mantiene la ubicación exacta del código fuente unida a la petición, así la instrucción queda anclada al código correcto.
Historial de Git con reversión
Las ediciones correctas se confirman con el prefijo [layrr], así cada cambio aparece en tu historial normal de Git. Puedes inspeccionar lo que hizo el agente. Si una edición no da en el blanco, retrocede.
Conciencia de archivos modificados
Antes de que se ejecute el agente, Layrr hace una instantánea del repositorio y evita preparar archivos que ya estaban modificados. Así mantiene los cambios locales no relacionados fuera del commit. Hace que la herramienta sea más segura de usar a mitad de trabajo, cuando probablemente tengas otras ediciones en curso.
Flexibilidad de frameworks y agentes
Layrr funciona con frameworks habituales como React, Vue, Svelte, Next.js y Astro, además de cualquier HTML plano. Se basa en un proxy, así que se encuentra con la app donde ya se ejecuta. Puedes combinarlo con Claude Code, Codex CLI o Gemini vía Pi. No hay dependencia de un IDE y lo instalas con un solo comando npm.
Ventajas y desventajas
Ventajas
- Gratis y de código abierto bajo la licencia MIT, con el repositorio alojado en GitHub.
- Envía al agente el contexto exacto del elemento y del código fuente, lo que reduce los prompts vagos o mal dirigidos.
- Funciona con apps existentes y frameworks habituales, así que no hay que reescribir nada para adoptarlo.
- Confirma cada edición con el prefijo `[layrr]`, lo que facilita inspeccionar o revertir los cambios.
- Sin dependencia de un IDE y sin atarte a un agente de código concreto.
Desventajas
- Es una CLI, así que no hay app gráfica para los desarrolladores que prefieren una interfaz de apuntar y hacer clic.
- Necesita una app local, un servidor de desarrollo en marcha y un repositorio Git, así que no encaja en configuraciones alojadas o de código cerrado que no puedas ejecutar en local.
- La calidad de una edición dada todavía depende del agente de código con IA con el que lo emparejes.
- Es un proyecto joven, así que la profundidad de funciones y la estabilidad aún están alcanzando a las herramientas de diseño maduras.
Preguntas frecuentes
Convierte tu navegador en un editor de código visual para apps web locales. Haces clic en un elemento, describes un cambio y un agente de código con IA edita los archivos fuente correspondientes en tu repositorio. Layrr se encarga de la asignación entre lo que ves y el código que hay detrás.
Contenido relacionado
Explora herramientas, habilidades y artículos relacionados con Layrr.
Alternativas a Layrr
X Ray Interpreter
X-ray Interpreter · ImagenX Ray Interpreter es una herramienta de radiología con IA basada en web que convierte radiografías, tomografías, resonancias, ecografías e imágenes PET en informes en lenguaje sencillo. Subes un estudio, obtienes una interpretación preliminar de la radiografía en unos momentos y luego haces preguntas de seguimiento si algo necesita explicación. Funciona como segunda opinión y como apoyo de aprendizaje, no como diagnóstico médico.
Aieasypic
AIEasyPic · ImagenAIEasyPic es un generador de imágenes con IA que convierte prompts de texto simples en obras terminadas en segundos. También puedes entrenar modelos personalizados con tus propias fotos, intercambiar caras en imágenes existentes y crear clips de vídeo cortos a partir de texto, todo desde el navegador. Le va bien a los creadores ocasionales que quieren imágenes rápidas y a los aficionados que desean construir un modelo personal sin tocar una línea de código.
Chargen
Chargen · ImagenChargen es un generador de personajes con IA y un conjunto de herramientas de creación de mundos pensado para Dungeons & Dragons y otros juegos de rol de mesa. Convierte una idea de una línea en un retrato de personaje pintado, levanta PNJ, monstruos, mapas y encuentros desde la misma sesión, y mantiene los detalles de cada criatura a mano. La parte de arte para juegos de rol de mesa funciona con un sistema de créditos llamado Gold, mientras que los generadores de texto siguen siendo gratis para todos.