Editor visual de Claude Code: selecciona un elemento y corrige su CSS

Chrome con Lizard Studio: la página, el inspector y el chat permanecen en una sola ventana. Esta captura de pantalla muestra la conexión de ChatGPT.

Un editor visual para Claude Code debería ayudarte a identificar la parte de una página que quieres cambiar y comprobar el resultado en el código fuente. En Lizard Studio, seleccionas un elemento en Chrome, lo adjuntas a un chat y le pides a Claude Code que edite tu proyecto local. El navegador permanece junto a la conversación para que puedas inspeccionar el resultado.

Esta guía usa un pequeño ejercicio de espaciado con un resultado medible: cambiar el gap entre dos botones de 4px a 24px. Revisarás el diff del código fuente, actualizarás la página y volverás a inspeccionar el gap. Es un ejercicio reproducible, no una prueba de rendimiento ni una afirmación sobre la rapidez con la que un agente terminará tu proyecto.

Creamos Lizard Studio. Su extensión y host son gratuitos y tienen licencia MIT; los requisitos de cuenta y los cargos por uso de tu proveedor de IA siguen aplicándose. Completa la guía de configuración antes de probar los pasos del agente que aparecen a continuación.

Qué significa aquí la edición visual

Lizard Studio usa un selector de elementos y herramientas de diseño para dar contexto al agente. Tú describes un cambio en el código fuente; Claude Code edita el archivo. Este flujo de trabajo se diferencia de arrastrar manualmente un elemento y esperar que el editor escriba de inmediato el CSS correspondiente.

El selector puede identificar el objetivo en la página. Una anotación puede mostrar un problema que cubre un área más amplia. Las reglas, las mediciones de distancia y la vista previa responsive te ayudan a comprobar un diseño. El agente local conecta ese contexto de la página con los archivos de tu proyecto. El README enumera las herramientas y los requisitos de conexión.

Si la edición directa con arrastrar y soltar es tu requisito principal, compara los controles antes de elegir una herramienta. Este ejercicio pone a prueba la selección de un elemento, la solicitud de un cambio y la revisión del código fuente.

Descarga el ejemplo

Necesitas Python 3 para el pequeño servidor estático usado aquí, Chrome, Lizard Studio y una instalación de Claude Code con sesión iniciada. Para una aplicación existente, usa en su lugar su servidor de desarrollo habitual.

Crea una carpeta vacía para el ejercicio. Descarga spacing.html en ella usando el comando Guardar página como de tu navegador, o ejecuta esto desde la carpeta:

curl -fsS https://lizard.build/studio-examples/spacing.html -o spacing.html
python3 -m http.server 4175 --bind 127.0.0.1

Abre http://127.0.0.1:4175/spacing.html en Chrome. Deja el servidor en ejecución mientras trabajas. Si el puerto 4175 está en uso, elige otro puerto y usa ese número en la URL.

La página tiene dos botones de ejemplo sin acciones. Su fila usa intencionalmente este CSS:

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 24px;
}

Elige esta carpeta en Lizard Studio para que el agente pueda editar spacing.html. Abrir el ejemplo en lizard.build solo muestra el ejercicio publicado; cambiar tu copia descargada requiere la URL local.

Selecciona la fila que quieres cambiar

Inicia un chat de Claude Code en el panel lateral. Usa Selector y adjunta la fila .actions que contiene ambos botones. Si seleccionas un botón por error, selecciona su fila padre o explica que el gap de la fila es el objetivo.

Puedes pedir una comprobación de solo lectura antes de editar:

Inspect the selected action row. Report its computed gap and the
local file that defines it. Do not change any files yet.

El gap inicial debería ser 4px. El origen es la hoja de estilos dentro de tu spacing.html descargado. Si el agente informa de otro archivo o página, corrige la carpeta del proyecto o la pestaña del navegador antes de solicitar una edición.

Los recortes de la interfaz de Lizard Studio muestran el inspector de estilos y la barra de herramientas de la página. Estos valores pertenecen al elemento seleccionado en la página de resumen de ChatGPT; el ejercicio de espaciado usa un archivo local aparte.

Pide una pequeña edición del código fuente

Envía la fila seleccionada con una solicitud que indique el resultado y el alcance:

Set the selected action row's gap to 24px in spacing.html.
Keep the button labels, colors and card margin unchanged.
Show the source diff. Refresh the page and check that the
computed gap is 24px.

Revisa la edición propuesta por el agente. El cambio relevante debería ser equivalente a:

- .actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 24px; }
+ .actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; }

El agente puede reformatear la hoja de estilos. Comprueba las declaraciones reales en lugar de exigir el mismo formato de línea que este ejemplo. No debería haber ninguna razón para cambiar ni la etiqueta de alguno de los botones ni la regla .card para esta tarea.

Usa los controles de permisos de tu sesión para aprobar la edición prevista. Una solicitud de alcance limitado hace que el diff sea más fácil de evaluar, pero no sustituye la revisión del resultado.

El campo de solicitud real muestra un elemento adjunto como “1 selección”. Esta captura de pantalla usa ChatGPT y una solicitud de brillo; para este ejercicio, elige Claude Code y usa la solicitud de espaciado anterior.

Verifica la página después de actualizar

El servidor de Python no proporciona hot reload. Actualiza Chrome después de que cambie el archivo y luego pídele al agente que inspeccione .actions de nuevo.

También puedes comprobar el valor calculado en Chrome DevTools:

getComputedStyle(document.querySelector('.actions')).gap
// Expected: "24px"

Compruébalo tanto en escritorio como en un viewport estrecho. La fila de ejemplo usa flex-wrap: wrap, por lo que los botones pueden pasar a otra línea cuando el espacio es limitado. En cada ancho, confirma que la página no tenga desbordamiento horizontal y que ambas etiquetas sigan siendo visibles.

Usa esta lista de aceptación:

• El código fuente local contiene gap: 24px para .actions.
• Una actualización de la página conserva el nuevo gap.
• El texto y los colores de los botones permanecen sin cambios.
• El margen de .card sigue siendo 32px.
• La página sigue siendo usable en un ancho estrecho.

Si el proyecto usa Git, lee git diff. Para este archivo independiente, la vista de comparación de tu editor puede mostrar el mismo cambio. El ejercicio se completa cuando el archivo y el navegador coinciden.

Por qué un cambio puede desaparecer

Una herramienta del navegador puede cambiar el DOM en vivo o añadir un estilo inline sin cambiar ningún archivo del proyecto. Eso puede ayudar a previsualizar una idea, pero al actualizar el navegador vuelve a cargar el código fuente original.

Si el resultado desaparece, pregunta al agente qué archivo editó. Comprueba que el navegador use el servidor local y que la carpeta seleccionada contenga el archivo servido. Una aplicación también puede tener una regla CSS más específica o un estilo inline que sobrescriba la declaración editada.

Para React u otro framework, el código fuente puede ser un componente, un módulo CSS o una clase utility en lugar de una hoja de estilos independiente. Pídele al agente que encuentre la regla responsable del espaciado. Evita una regla global de botones cuando solo una fila de acciones necesita cambiar.

Usa el mismo método para un problema real de UI

Elige un problema con un resultado que puedas describir: una tarjeta que se desborda a un ancho determinado, un encabezado que debería ajustarse para caber en su contenedor o una fila de botones con la alineación incorrecta. Adjunta el elemento relevante o una captura de pantalla anotada y luego indica qué debe permanecer sin cambios.

Para un bug de comportamiento, pídele al agente que reproduzca la acción e inspeccione la consola y la salida de red. Una captura de pantalla no puede mostrar si se ejecutó un event handler o si falló una solicitud. Lizard Studio incluye esas herramientas del navegador; la comparación con Claude en Chrome explica las distintas configuraciones.

También puedes ejecutar el ejercicio con ChatGPT en el panel lateral. Mantén el mismo archivo inicial y los mismos criterios de aceptación si quieres comparar los dos agentes. Registra los intentos fallidos y las aclaraciones, y evita sacar conclusiones sobre velocidad a partir de una sola ejecución.

Preguntas frecuentes

¿Claude Code necesita una captura de pantalla para editar CSS?

Una captura de pantalla puede ayudar a explicar un problema visual. En este flujo de trabajo, el elemento seleccionado y la inspección de la página en vivo añaden contexto del DOM y de estilos, mientras que la carpeta local proporciona el código fuente. Usa las entradas que ayuden a identificar tu problema concreto.

¿Puedo editar cualquier sitio web de forma permanente?

Necesitas acceso al proyecto fuente para conservar un cambio en el código fuente, y necesitas desplegarlo para actualizar un sitio en producción. Inspeccionar una página de terceros no te concede ni permiso ni acceso al repositorio.

¿Esto sustituye a mi editor?

Puedes seguir usando tu editor para código y diffs. Lizard Studio proporciona el panel lateral del navegador y las herramientas de la página. Compara las otras opciones de interfaz en la guía de GUI de Claude Code.

¿Por dónde empiezo si el panel no se conecta?

Sigue la guía de instalación y solución de problemas. Comprueba el host local, el inicio de sesión de tu agente y la carpeta del proyecto elegida antes de probar una edición del código fuente.