Layrr
Narnia · Image · Programmation
Layrr est une CLI gratuite et open source qui transforme votre navigateur en éditeur de code visuel pour les applications web locales. Vous sélectionnez un élément sur la page en cours, vous décrivez la modification en langage courant, et un agent de codage IA met à jour les fichiers sources correspondants dans votre dépôt. Il fonctionne à côté de l'installation que vous utilisez déjà, se branche à Claude Code, à Codex CLI ou à Gemini via Pi, et modifie le vrai code plutôt qu'une couche de design séparée.
À propos de Layrr
Qu'est-ce que Layrr
Layrr est un outil en ligne de commande créé par Narnia qui se place entre votre navigateur et votre serveur de développement. Voyez-le comme une interface d'agent de codage dans le navigateur : il injecte une petite surcouche dans la page que vous consultez, associe tout élément sur lequel vous cliquez au code qui l'a généré, et transmet cet emplacement à un agent de codage avec votre instruction. La promesse est simple. Le bug est visible dans le navigateur, mais pas le fichier. Layrr comble cet écart.
Pour qui ? Des développeurs qui font déjà tourner une application web en local et qui font déjà confiance à un agent de codage IA. Au lieu de décrire une page de mémoire, vous désignez le bouton, la carte ou le titre exact dont vous parlez. Cela retire les approximations du prompt.
La principale limite est la portée. Layrr est un éditeur visuel pour les modifications de code source, pas un outil de design complet ni une plateforme d'hébergement. Il attend une application locale, un serveur de développement actif et un dépôt Git, et il s'appuie sur l'agent que vous avez configuré. Il se présente aussi comme une CLI : pas d'application graphique à installer et aucune dépendance à un IDE précis. Autrement dit, être à l'aise avec le terminal fait partie du contrat.
Premiers pas
- Installez la CLI globalement avec
npm i -g layrr, puis lancez-la depuis la racine d'un projet web local. - Démarrez votre serveur de développement comme d'habitude et laissez Layrr jouer le rôle de proxy entre le navigateur et ce serveur.
- Ouvrez l'application dans le navigateur, survolez un élément et cliquez dessus (ou Maj+clic pour en prendre plusieurs) afin de sélectionner le contexte exact que vous voulez modifier.
- Décrivez l'ajustement en langage courant, qu'il porte sur le texte, l'espacement, la couleur, la mise en page ou tout un composant.
- Relisez la modification de l'agent, vérifiez le commit
[layrr]dans votre historique Git et annulez si le résultat ne correspond pas à ce que vous vouliez.
Informations sur le produit
Aperçu des tarifs, des plateformes compatibles et des performances de Layrr.
Idéal pour
Les utilisateurs, tâches et cas d'usage où cet outil convient le mieux.
Utilisateurs
- Développeurs frontend
- Créateurs solo et indie hackers
- Utilisateurs d'agents de codage IA
Tâches
- Corriger des bugs visuels
- Petits ajustements d'interface
- Prototyper des changements
Cas d'usage
- Itérer sur une page pendant le développement local quand vous voyez le problème mais pas le fichier derrière.
- Transmettre un élément précis à un agent quand un prompt textuel vague rate la cible.
- Travailler sur une application existante sans vouloir adopter un nouveau framework ni quitter votre éditeur actuel.
Fonctionnalités clés
Sélection d'éléments au clic
Layrr injecte une surcouche dans la page en cours pour que vous puissiez survoler et sélectionner l'élément exact dont vous parlez, ou faire Maj+clic pour en prendre plusieurs d'un coup. Il transmet le DOM sélectionné et le contexte du code source à la modification. Fini de décrire le balisage de mémoire. L'agent travaille à partir de la structure réelle, et non de votre paraphrase.
Correspondance du code avec les vrais fichiers
L'outil utilise les métadonnées du framework et la recherche de fichiers pour remonter d'un élément cliqué jusqu'au code qui l'a généré. Cette correspondance est le cœur du produit. C'est la différence entre demander à un agent de changer « l'en-tête » et lui dire exactement quel composant toucher.
Demandes de modification en langage courant
Une fois un élément sélectionné, vous décrivez la modification en langage normal, qu'elle porte sur le texte, l'espacement, la couleur, la mise en page ou un ajustement de composant. Restez bref. Layrr garde l'emplacement exact du code source attaché à la demande, si bien que l'instruction reste ancrée au bon code.
Historique Git avec annulation
Les modifications réussies sont enregistrées avec le préfixe [layrr], donc chaque changement apparaît dans votre historique Git habituel. Vous pouvez inspecter ce que l'agent a fait. Si une modification rate la cible, revenez en arrière.
Prise en compte des fichiers modifiés
Avant que l'agent ne s'exécute, Layrr fait un instantané du dépôt et évite de préparer des fichiers déjà modifiés. Cela tient les changements locaux sans rapport hors du commit. L'outil devient plus sûr à utiliser en cours de travail, quand vous avez probablement d'autres modifications en cours.
Souplesse des frameworks et des agents
Layrr fonctionne avec les frameworks courants comme React, Vue, Svelte, Next.js et Astro, ainsi qu'avec du HTML simple. Il repose sur un proxy, il rejoint donc l'application là où elle tourne déjà. Vous pouvez l'associer à Claude Code, à Codex CLI ou à Gemini via Pi. Aucune dépendance à un IDE, et vous l'installez avec une seule commande npm.
Avantages et inconvénients
Avantages
- Gratuit et open source sous licence MIT, avec le dépôt hébergé sur GitHub.
- Transmet à l'agent le contexte exact de l'élément et du code source, ce qui réduit les prompts vagues ou mal dirigés.
- Fonctionne avec les applications existantes et les frameworks courants, donc aucune réécriture pour l'adopter.
- Enregistre chaque modification avec le préfixe `[layrr]`, ce qui facilite l'inspection ou l'annulation des changements.
- Aucune dépendance à un IDE et aucun enfermement auprès d'un agent de codage particulier.
Inconvénients
- C'est une CLI : pas d'application graphique pour les développeurs qui préfèrent une interface à pointer et cliquer.
- Il faut une application locale, un serveur de développement actif et un dépôt Git, donc il ne convient pas aux configurations hébergées ou en code fermé que vous ne pouvez pas exécuter en local.
- La qualité d'une modification dépend encore de l'agent de codage IA auquel vous l'associez.
- C'est un projet jeune, donc la profondeur des fonctionnalités et la stabilité rattrapent encore les outils de design matures.
Questions fréquentes
Il transforme votre navigateur en éditeur de code visuel pour les applications web locales. Vous cliquez sur un élément, vous décrivez une modification, et un agent de codage IA modifie les fichiers sources correspondants dans votre dépôt. Layrr gère la correspondance entre ce que vous voyez et le code derrière.
Contenus associés
Découvrez des outils, des compétences et des articles liés à Layrr.
Alternatives à Layrr
X Ray Interpreter
X-ray Interpreter · ImageX Ray Interpreter est un outil de radiologie par IA basé sur le web qui transforme les radiographies, les scanners, les IRM, les échographies et les images TEP en comptes rendus en langage clair. Vous téléchargez un examen, obtenez une interprétation préliminaire de la radiographie en quelques instants, puis posez des questions complémentaires si quelque chose mérite une explication. Il sert de second avis et d'aide à l'apprentissage, pas de diagnostic médical.
Aieasypic
AIEasyPic · ImageAIEasyPic est un générateur d'images par IA qui transforme de simples prompts texte en œuvres finies en quelques secondes. Vous pouvez aussi entraîner des modèles personnalisés sur vos propres photos, échanger des visages dans des images existantes et créer de courts clips vidéo à partir de texte, le tout depuis un navigateur. Il convient aux créateurs occasionnels qui veulent des visuels rapides et aux amateurs qui souhaitent bâtir un modèle personnel sans toucher à la moindre ligne de code.
Chargen
Chargen · ImageChargen est un générateur de personnages par IA et une boîte à outils de création d'univers conçue pour Donjons & Dragons et les autres jeux de rôle sur table. Il transforme une idée d'une ligne en un portrait de personnage peint, crée des PNJ, des monstres, des cartes et des rencontres dans la même session, et garde les détails de chaque créature à portée de main. Le volet art pour jeu de rôle sur table repose sur un système de crédits appelé Gold, tandis que les générateurs de texte restent gratuits pour tous.