1. Inicio
  2. Proyectos
  3. Editor Vivo
Editor Vivo · Herramienta interna para editar webs

Editor Vivo: editar visualmente una página y pasarle los cambios a Claude Code

Editor Vivo se abre sobre una página en desarrollo en tu equipo. Se hace clic para mover, cambiar texto o reemplazar imágenes, y al guardar se genera un paquete de cambios que Claude Code aplica al código real. Es de uso interno.

Quiero algo así

Servicio Software a medida

Estado
Uso interno
Tipo
Herramienta propia
Plataforma
Escritorio (navegador local)
Año
2026
Captura de Editor Vivo
El proyecto en 30 segundos

Qué resuelve y para quién

01

Problema

Describir por escrito cambios visuales (mueve esto, cambia aquel texto, usa otra foto) es lento y se presta a malentendidos entre quien diseña y quien programa.

02

Solución

Se abre la página en el editor y se modifica con el ratón. Al guardar, se escribe un paquete con cada cambio, capturas del antes y el después y las imágenes optimizadas. Claude Code lo lee y edita el código.

03

Para quién

Uso interno de INNOV4 AI, para ajustar la apariencia de webs en desarrollo sin describir cada cambio por escrito.

Qué hace

Del clic al paquete de cambios

01

Selección y herramientas

Al hacer clic en un elemento aparece una barra con herramientas para moverlo, reordenarlo, borrarlo o reemplazar su imagen.

Selección y herramientas
02

Edición de texto en la página

Los textos se editan directamente sobre la página, con deshacer y rehacer, y cada cambio queda anotado.

Edición de texto en la página
03

Inspección de elementos

Alt+clic atraviesa capas para llegar a elementos ocultos o superpuestos, y cada elemento muestra su nombre y su tipo.

Inspección de elementos
04

Paquete para Claude Code

Guarda un manifiesto validado, las imágenes optimizadas, capturas del antes y el después y un resumen legible. El editor nunca genera código.

Paquete para Claude Code
En cifras

Lo construido

Medido en pruebas
158 pruebas automáticas + 8 en navegador real

Todas en verde al cierre del desarrollo.

Medido en pruebas
6 de 6 intentos de guardado no autorizado bloqueados

Prueba de ataque reproducida en auditoría: ninguno llegó a escribir un archivo.

Cómo está hecho

Tecnología detrás

Tecnología
Node.jsTypeScriptPlaywrightsharp
Detalle técnico

Un proxy en Node que inyecta un editor en TypeScript (unos 34 kb) sobre una página que corre en el propio equipo. Solo escucha en 127.0.0.1 y acepta únicamente destinos locales. El guardado usa un token efímero y comprueba el origen. Es un límite conocido que no funciona con páginas de política de seguridad estricta.

Galería

Más pantallas del producto

Elemento seleccionado en la página
Tu proyecto

¿Necesitas algo como Editor Vivo?

Cuéntanos la idea en dos líneas. Te respondemos con alcance, plazo y una primera propuesta.

Iniciar proyecto Probar el Concept Engine
Sigue explorando

Más proyectos