Usa ChatGPT en Chrome para editar tu sitio web local
Por el equipo de Lizard. Revisado el .
Lizard Studio pone a ChatGPT en un panel lateral de Chrome con acceso a tu página en vivo y a una carpeta de proyecto local. Selecciona un elemento, pide un cambio y revisa el diff del código mientras la página sigue visible. La conexión usa el CLI local de Codex, que aparece como ChatGPT en Lizard Studio.
Una sesión real de Lizard Studio con la conexión de ChatGPT. Lizard Studio es una extensión independiente; OpenAI también ofrece su propia extensión de navegador de ChatGPT. Lee la comparativa para desarrolladores para elegir un flujo de trabajo.
La extensión y el host son gratuitos y de código abierto. Tu cuenta de IA elegida provee el agente y el acceso al modelo; sus límites y cargos siguen aplicando. Instala Lizard Studio o sigue la guía completa de configuración.
¿Qué puede hacer ChatGPT con la página?
Puedes pedirle al agente que inspeccione el DOM, lea la salida de la consola y la red, capture pantallas e interactúe con la página. La barra de herramientas de diseño añade un selector de elementos, anotaciones, reglas, mediciones de espacios, un selector de color y vista previa responsive. El chat puede usar ese contexto cuando edita archivos en tu carpeta seleccionada.
Por ejemplo, puedes adjuntar un botón y pedirle al agente que encuentre su código, cambie su espaciado y compruebe el resultado renderizado. También puedes adjuntar una captura marcada cuando el problema involucra varios elementos. El README de Lizard Studio describe las herramientas del navegador y la conexión local.
Esto es útil cuando una tarea combina contexto de página y acceso al código. Una pregunta como "¿Por qué este botón se desborda?" necesita tanto el layout renderizado como las reglas que lo producen. Dale al agente la fila seleccionada y el resultado deseado, y luego revisa qué cambia.
¿Por qué la configuración menciona a Codex?
ChatGPT es el nombre que aparece en el panel; Codex es el CLI local que ejecuta la sesión de código. Instala el CLI, inicia sesión y conecta el host local. El nombre del paquete, el comando de terminal y rutas como ~/.codex/config.toml conservan sus nombres de Codex.
Lizard Studio no embebe chatgpt.com en un iframe ni provee uso de modelo propio. Esta distinción importa al elegir una barra lateral de ChatGPT: para editar un archivo fuente local, la herramienta necesita una conexión a ese archivo, no solo la capacidad de discutir la página visible.
Conecta ChatGPT a tu proyecto local
- Añade Lizard Studio desde la Chrome Web Store.
- Instala el CLI de Codex con
npm install -g @openai/codexy completa su login. - Ejecuta
npx @lizard-build/lizard-studio-host installpara registrar el host local. - Inicia el servidor de desarrollo de tu web y abre su URL en Chrome.
- Abre Lizard Studio, inicia un chat, selecciona ChatGPT y elige la carpeta que contiene el código de esta web.
El host soporta macOS, Windows y Linux. Requiere Node.js; consulta la guía de configuración para prerrequisitos y solución de problemas de conexión.
Antes de hacer un cambio, pide al agente que informe el título actual de la página y su carpeta de proyecto. Si alguno es incorrecto, corrige primero la pestaña o la carpeta. Una página en un dominio desplegado puede verse idéntica a tu versión local mientras sirve archivos distintos.
Prueba una edición CSS con un resultado verificable
Usa tu propia página o descarga el ejemplo en la guía de edición visual. Ese ejemplo tiene una fila de acción con un espacio 4px. El ejercicio es dejarlo en 24px editando el código. Para un problema de layout móvil, sigue la guía de edición web con ChatGPT: corrige una tarjeta de archivo que se desborda a 390px y luego verifica el código y la página en dos anchos.
Selecciona la fila de acción con Selector y envía:
Change the gap between the selected row's buttons to 24px.
Edit the local source file, show the diff and check the computed
gap after the page refreshes. Keep the labels, colors and the
space between other cards unchanged.Revisa el diff antes de aceptarlo. Un resultado útil cambia la regla que gobierna la fila de acción, en lugar de aumentar el espaciado en todos los botones del sitio. Comprueba la página en un ancho estrecho también: los botones deben seguir encajando o envolverse como se espera.
Actualiza una vez más. Si el espacio vuelve a 4px, comprueba qué archivo cambió y qué URL sirve el navegador. Pide al agente que lea de nuevo el estilo computado. El resultado deseado es una pequeña edición de archivo más un cambio visible y persistente.
Ediciones temporales en la página y ediciones en el código fuente
| Acción | Dónde surte efecto | Qué pasa tras recargar |
|---|---|---|
| Cambiar el estilo inline de un elemento en el DOM | La pestaña actual | La página normalmente restaura su estilo original. |
| Editar CSS o un componente en el proyecto seleccionado | Tus archivos locales | El cambio permanece cuando el servidor de desarrollo sirve la fuente editada. |
| Desplegar el proyecto editado | El entorno de hosting elegido | La versión desplegada cambia tras una release exitosa. |
Pide explícitamente una edición en el código fuente cuando quieras conservar el resultado. El acceso a la página por sí solo no da acceso al código de un sitio que no es tuyo. Puedes inspeccionar un sitio de referencia, pero los cambios duraderos requieren acceso a su proyecto y un proceso de despliegue.
¿En qué difieren los dos agentes?
Tanto Claude Code como ChatGPT pueden usar la conexión al navegador y el contexto de diseño en Lizard Studio. Elige el agente cuya cuenta y configuración de proyecto ya uses.
Algunas funciones del chat difieren: el README lista Control Remoto y edición de mensajes previos para Claude Code, y dice que esas funciones no están disponibles en el panel de ChatGPT. Consulta las notas de características actuales antes de elegir basándote en un control de chat específico. Para una comparación más amplia de interfaz, lee la comparativa de GUI de Claude Code.
Preguntas frecuentes
¿Puedo usar mi cuenta actual de ChatGPT?
Conecta a través del flujo de login soportado por el CLI de Codex. Tu cuenta debe dar acceso al agente seleccionado; Lizard Studio no provee suscripción ni cambia los límites del proveedor.
¿Necesito una cuenta con Lizard?
No. Conectas tu propio agente y carpeta local. Una cuenta de Lizard es independiente del uso de la extensión.
¿Mi código se queda en mi ordenador?
Tus archivos de proyecto permanecen en su carpeta local, y la extensión y el host corren localmente. Las peticiones a un modelo en la nube pueden incluir código y contexto de página. Lizard Studio no ejecuta un servidor de chat; el proveedor elegido procesa las peticiones. Lee la política de privacidad para el flujo de datos.
¿Funciona como un constructor de páginas drag-and-drop?
El flujo documentado es seleccionar o anotar la página y pedirle al agente que edite el código. La barra ayuda a inspeccionar y medir el diseño. Usa la guía de edición visual para probar ese flujo antes de elegirlo para tu proyecto.