Editor de sitios web con ChatGPT: corrige un sitio existente en Chrome

Para usar ChatGPT como editor de sitios web para un proyecto existente, conecta la sesión de programación tanto a la página renderizada como a su carpeta de código fuente. Luego pide un cambio específico, revisa el diff del archivo y recarga la página. En Lizard Studio, puedes seleccionar un elemento en Chrome y enviarlo al panel de ChatGPT, que se ejecuta mediante el Codex CLI local.

Esta captura de pantalla real de Lizard Studio muestra las herramientas del navegador y la conexión con ChatGPT. Ilustra la interfaz; el ejercicio descargable de abajo usa una página local independiente.

Creamos Lizard Studio. Esta guía incluye un pequeño bug de diseño móvil que puedes reproducir sin un framework de aplicaciones. Verificamos el ejemplo en un navegador y la documentación del producto enlazada el 14 de septiembre de 2026. El ejemplo valida una corrección de CSS, no la velocidad ni la tasa de éxito de un agente.

Elige el flujo de edición para tu proyecto

Si quieres crear y alojar un sitio dentro de ChatGPT, considera ChatGPT Sites. OpenAI documenta cómo empezar desde un prompt o desde un proyecto local existente compatible. Revisa la compatibilidad antes de mover un proyecto a ese flujo. Documentación de ChatGPT Sites.

Si ya tienes un repositorio, un servidor de desarrollo y un proceso de publicación que quieres mantener, esta guía usa eso. Lizard Studio conecta el navegador con la carpeta local seleccionada. El Codex CLI subyacente puede inspeccionar archivos, editar código y ejecutar comandos en un proyecto. Documentación de Codex CLI.

Una captura de pantalla puede describir un problema, pero no identifica el archivo responsable del diseño. Una sesión de edición útil comprueba ambos.

Conecta la página y la carpeta de código fuente

Completa la guía de configuración de ChatGPT: instala la extensión y el host local, inicia sesión en Codex CLI y luego selecciona ChatGPT y la carpeta de tu proyecto en Lizard Studio. La extensión y el host son gratuitos; los requisitos de la cuenta del proveedor y los límites de uso siguen aplicándose.

Inicia el servidor de desarrollo de tu proyecto y abre su URL local en Chrome. Antes de pedir una edición, pregunta:

Report the current page URL and the project folder you can edit.
Find the source file for this page. Do not change it yet.

Comprueba esas respuestas. Una página desplegada y una página local pueden verse iguales mientras cargan código diferente. Si la sesión apunta a otra carpeta, corrígelo antes de continuar.

Para este ejercicio, descarga responsive-card.html en una carpeta local vacía. Usa el comando Guardar página como de tu navegador y elige solo HTML, o guarda el archivo fuente enlazado. Sirve esa carpeta con un servidor HTTP local:

python3 -m http.server 8080

Abre http://localhost:8080/responsive-card.html y elige esa carpeta en Lizard Studio. El ejemplo usa HTML y CSS simples. Su fuente opcional recurre a sans-serif cuando se descarga por separado. El botón Open es un control de ejemplo inerte.

Reproduce el desbordamiento móvil antes de pedir una corrección

Configura el viewport a 390 CSS pixels de ancho usando la vista previa responsive o Chrome DevTools. La tarjeta contiene un nombre de archivo largo y un botón Open. El nombre ocupa más espacio del disponible en la fila, y la página se desplaza lateralmente.

Selecciona la tarjeta con Selector. El elemento adjunto ayuda a identificar qué contenedor renderizado necesita atención. Para un problema mayor, anota una captura de pantalla para señalar tanto el nombre del archivo como el botón.

El inspector y la barra de herramientas en la sesión existente de Studio. Usa estos controles para inspeccionar tu propia tarjeta; los valores que se muestran aquí pertenecen al elemento seleccionado en la captura.

Dale al agente un resultado que pueda comprobar:

At a viewport width of 390px, the selected file card makes the
page scroll horizontally. Find the cause in responsive-card.html
and fix the source CSS.

Keep the full file name readable and the Open button visible.
Keep the colors, labels and desktop layout. Do not hide overflow
on the page or shrink the font to make the content fit.

Show the diff. Reload and check the page at 390px and 1280px.
Report the viewport width and the document scroll width at each.

Las últimas líneas importan: ocultar el desbordamiento puede eliminar una barra de desplazamiento mientras deja parte de un control fuera de alcance. El objetivo incluye contenido legible y un botón utilizable.

Revisa el cambio de CSS

En este ejemplo, .file-info es un elemento flex. Su tamaño mínimo predeterminado y el nombre de archivo largo impiden que la fila encaje en la tarjeta estrecha. Una pequeña corrección permite que el elemento se encoja y que el nombre se parta donde haga falta:

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  margin: 0;
  color: #e9edf4;
  overflow-wrap: anywhere;
}

Esta es la respuesta para esta muestra, no una regla para añadir a todos los elementos de un sitio web. En otro proyecto, un ancho fijo, una pista de grid o una imagen pueden causar el desbordamiento. Pide al agente que identifique la regla antes de aplicar una corrección.

Lee el diff del código fuente. Debe conservar el nombre del archivo, la etiqueta del botón y los colores. No debe añadir overflow-x: hidden a la página, acortar el nombre ni cambiar la tipografía compartida para superar este ejercicio.

Comprueba el resultado después de recargar

A 390px, el nombre completo debe ajustarse dentro de su parte de la tarjeta. El botón Open debe permanecer dentro de la tarjeta. A 1280px, comprueba que la fila de escritorio siga viéndose bien.

Puedes ejecutar esta comprobación de solo lectura en la consola del navegador, o pedir al agente que informe de los mismos valores:

({
  viewportWidth: document.documentElement.clientWidth,
  scrollWidth: document.documentElement.scrollWidth,
  hasHorizontalOverflow:
    document.documentElement.scrollWidth >
    document.documentElement.clientWidth
})

El ejemplo corregido debe informar hasHorizontalOverflow: false en ambos anchos. Inspecciona también la propia tarjeta: una comprobación solo del ancho del documento no puede demostrar que todos los elementos sigan siendo legibles.

Recarga una vez más. Si el bug vuelve, confirma que el agente editó el archivo que sirve tu servidor. Un cambio aplicado solo al DOM en vivo normalmente desaparece cuando el navegador vuelve a cargar el código fuente.

Verificamos el ejemplo original y el corregido a 390px y 1280px, incluyendo el desbordamiento del documento, los límites del botón y el texto sin cambios. Puedes repetir esa comprobación con el archivo inicial enlazado y el CSS anterior. No realizamos una comparación controlada entre agentes.

Estas mediciones usan Chromium con la fuente Geist del sitio cargada. Una copia descargada puede usar la fuente de reserva y producir un ancho original diferente; verifica los mismos criterios de aceptación.

Pasa del ejemplo a tu propio sitio web

Elige un problema e indica la ruta afectada, el viewport y el resultado esperado. En una app React, la corrección podría pertenecer a un componente, módulo CSS o clase de utilidad. Dale a la sesión acceso al proyecto real y pídele que localice ese código fuente.

Después de la comprobación local, ejecuta las verificaciones que tu proyecto necesite normalmente. Una tarjeta compartida puede aparecer en varias rutas; inspecciona otro uso antes de hacer commit. Publica mediante tu proceso de lanzamiento habitual cuando el cambio esté listo. Editar un archivo local no actualiza por sí solo tu sitio desplegado.

Si todavía estás eligiendo una herramienta de navegador, lee extensiones de Chrome de ChatGPT para desarrolladores. Compara la extensión oficial y Lizard Studio según el flujo de trabajo que cada una documenta.

Preguntas frecuentes

¿Puede ChatGPT editar un sitio web existente?

Sí, cuando la herramienta elegida tiene acceso al proyecto o a su editor. Esta guía usa una carpeta de código fuente local mediante la conexión de Codex CLI de Lizard Studio. Para ChatGPT Sites, revisa si el proyecto existente encaja en su flujo compatible.

¿Puede corregir CSS a partir de una captura de pantalla?

Una captura de pantalla ayuda a explicar el problema visible. Dale a la sesión el código fuente y una forma de inspeccionar también el resultado renderizado. Para desbordamiento, especifica el ancho del viewport y qué contenido debe seguir siendo legible.

¿Es Lizard Studio la extensión oficial de ChatGPT?

No. Lizard Studio es una extensión independiente y de código abierto. OpenAI tiene una extensión oficial aparte; consulta la comparativa para desarrolladores.

¿Una edición local cambiará el sitio web en vivo?

Solo después de que publiques el código fuente modificado mediante el proceso de lanzamiento de ese sitio. Prueba el resultado local, revisa el diff y verifica la ruta desplegada después del lanzamiento.