Visual Editor

Qué es

Una herramienta para desarrolladores que convierte cualquier página web en algo editable, como si fuera un documento.

La instalas en tu proyecto, pulsas un atajo, y la web se vuelve interactiva: pasas el ratón por encima y se resalta cada elemento; haces clic y se abre un panel —muy parecido al de Figma— donde cambias colores, tamaños, espaciados o textos, viendo el resultado al instante.

La parte importante es lo que pasa al guardar. La herramienta no modifica tu código. Lo que hace es anotar con exactitud qué elemento tocaste, dónde vive dentro del proyecto y qué querías cambiar, y dejarlo por escrito. Ese archivo se lo das a un asistente de IA como Claude Code, y es él quien hace el cambio de verdad, en el sitio correcto y con el estilo del proyecto.

Por qué lo hice

Porque el bucle habitual es absurdo, y todo el mundo lo sufre.

Alguien ve algo torcido en una web: un botón desalineado, un texto que no se lee. Hace una captura, la pega en Slack, se abre un ticket. Un desarrollador lo interpreta como puede, lo cambia, lo sube. No era exactamente eso. Vuelta a empezar. A la tercera ronda, se acerca.

El problema no es que falten herramientas de diseño — es que entre “lo veo mal” y “está arreglado” hay demasiados intermediarios, y en cada salto se pierde información. Quien detecta el problema es quien mejor sabe cómo debería quedar, pero es justo quien no puede tocarlo.

Lo que buscaba era acortar ese camino sin caer en la trampa de siempre: herramientas que, para poder editar, acaban queriendo ser dueñas de tu código y te encierran en su plataforma. Aquí la apuesta es la contraria — la herramienta se limita a capturar la intención con precisión y se aparta. El código sigue siendo tuyo, y quien lo escribe es tu asistente de IA, que ya conoce tu proyecto.

Cómo funciona (la parte técnica)

Esta sección se puede saltar sin perderse nada.

Describir bien es todo. Si le pasas a la IA un “cambia esto a 24 píxeles”, va a fallar: no sabe si esos 24 píxeles son una clase, una variable o un número suelto, ni cuál de las cuarenta tarjetas iguales de la página era la tuya. Así que el trabajo real no está en el panel bonito, está en el archivo que genera: qué elemento era, cómo encontrarlo en el código, y sobre todo respecto a qué valor estabas cambiando. Cuando ese dato miente, la IA hace el cambio equivocado sin que nadie se entere. Ese fue el foco.

Habla el idioma de tu proyecto. Si tus botones tienen variantes definidas (primario, peligro, pequeño…), la herramienta las detecta y te las ofrece como un desplegable. Cambiar una emite “cambia la variante de este botón”, no catorce ajustes sueltos de CSS que la IA tendría que adivinar. Es la diferencia entre describir la intención y describir el síntoma.

Le pregunta al navegador en vez de traer su propia tabla. Para el autocompletado de CSS, en lugar de embarcar una lista que se queda obsoleta, le pregunta al motor del navegador qué propiedades existen y qué valores acepta cada una. Nunca envejece y es correcto en cualquier navegador. Chrome hace exactamente lo mismo internamente cuando le faltan datos.

Cero dependencias. Se instala dentro de aplicaciones ajenas, así que no puede arrastrar librerías de terceros ni pelearse con las versiones que ya tengas. Solo necesita React, que por definición ya está ahí.

Lo que aprendí

Lo más útil no fue técnico.

Antes de dar nada por bueno, sometí el diseño a un panel de agentes de IA con perspectivas distintas —experiencia de usuario, interfaz, arquitectura, producto, competencia— y cada propuesta pasó por un crítico cuyo único trabajo era intentar tumbarla. Descartaron 12 de 48 ideas, varias mías y con argumentos mejores que los míos.

Y encontraron dos errores en código que yo acababa de escribir. Ninguno rompía nada visible: simplemente hacían que la IA aplicara el cambio equivocado, en silencio. Que es exactamente el tipo de fallo que un test no atrapa y un usuario no perdona.