¿Cómo utilizar ChatGPT, Claude o Gemini para modificar el CSS y crear bloques en Waclis?

En este tutorial aprenderás a utilizar herramientas de inteligencia artificial como ChatGPT, Claude o Gemini para personalizar el diseño de tu sitio web en Waclis.

Podrás utilizarlas para:

Modificar colores, tamaños y tipografías.
Ajustar márgenes y espacios.
Mejorar botones, imágenes, menús y formularios.
Corregir problemas de visualización en dispositivos móviles.
Personalizar las tarjetas y fichas de productos.
Mejorar bloques existentes.
Crear nuevas secciones desde cero.
Agregar animaciones o comportamientos especiales.

No necesitas saber programar. La inteligencia artificial puede ayudarte a generar el código, pero es importante brindarle la información correcta y saber en qué herramienta de Waclis debes pegarlo.

Waclis cuenta con un editor visual de bloques que permite arrastrar y soltar componentes, modificar HTML y trabajar con CSS o JavaScript. Además, dispone de editores generales para personalizar la plantilla y sus elementos dinámicos.

Antes de comenzar: HTML, CSS y JavaScript

Para pedir correctamente una modificación, primero debes entender qué función cumple cada tipo de código.

HTML: estructura

El HTML define qué elementos aparecen dentro de una sección:

Títulos.
Textos.
Imágenes.
Botones.
Columnas.
Formularios.
Contenedores.
Enlaces.

Debes solicitar HTML cuando quieras crear una sección nueva o modificar la estructura interna de un bloque.

CSS: diseño

El CSS controla la apariencia visual de los elementos:

Colores.
Tipografías.
Tamaños.
Márgenes.
Espaciados.
Bordes.
Sombras.
Fondos.
Distribución en columnas.
Adaptación a celulares.
Efectos al pasar el cursor.

Debes solicitar CSS cuando el elemento ya existe y solamente quieres modificar su diseño o distribución.

JavaScript: comportamiento

JavaScript permite agregar acciones o comportamientos:

Mostrar u ocultar contenido.
Abrir un menú.
Crear un botón flotante.
Ejecutar una acción al hacer clic.
Agregar animaciones.
Cambiar un elemento al desplazarse por la página.
Crear interacciones que no pueden resolverse únicamente con CSS.

Utiliza JavaScript solo cuando el cambio realmente necesite una acción o comportamiento dinámico.

¿Cuándo usar el Editor CSS y cuándo usar el editor de bloques?

Esta es una de las decisiones más importantes.

Utiliza el Editor CSS cuando quieras modificar:

El encabezado del sitio.
El menú principal.
El logotipo.
El buscador.
El carrito.
Las tarjetas de productos.
El listado de productos.
La ficha de un producto.
Los carruseles automáticos de productos.
Los botones generados por el sistema.
Los formularios generales.
El pie de página.
Cualquier contenido dinámico generado por Waclis.

Estos elementos no se crean manualmente dentro del editor de bloques. Waclis los genera automáticamente utilizando la información del catálogo y la configuración del sitio.

El editor de bloques trabaja principalmente sobre contenido estático. Las fichas, tarjetas, listados y componentes dinámicos del catálogo se personalizan mediante CSS.

Utiliza el editor de bloques cuando quieras:

Crear un banner.
Agregar una sección institucional.
Mostrar beneficios.
Crear una sección de preguntas frecuentes.
Agregar testimonios.
Mostrar imágenes.
Crear un llamado a la acción.
Agregar una sección de servicios.
Crear una galería.
Mostrar un equipo de trabajo.
Agregar textos e imágenes.
Crear una sección personalizada dentro de una página.

Los bloques funcionan como secciones independientes que se agregan una debajo de otra para formar el contenido de una página.

¿Qué inteligencia artificial puedes utilizar?

Puedes realizar este proceso con:

ChatGPT.
Claude.
Gemini.
Copilot.
Cualquier otra inteligencia artificial capaz de analizar código e imágenes.

El procedimiento es prácticamente el mismo en todas:

Explicas lo que quieres modificar.
Adjuntas una captura de pantalla.
Pegas el código HTML relacionado.
Indicas las limitaciones de Waclis.
Solicitas el código listo para copiar y pegar.
Pruebas el resultado.
Informas cualquier problema para que la IA lo corrija.

ChatGPT, Claude y Gemini permiten trabajar con archivos, documentos, imágenes o fragmentos de código, aunque la disponibilidad y los límites pueden variar según la cuenta o el plan utilizado.

Parte 1: cómo modificar el CSS de un sitio web en Waclis con IA

Paso 1: define exactamente qué quieres cambiar

Antes de abrir la inteligencia artificial, intenta describir el problema de forma concreta.

En lugar de escribir:

Quiero mejorar mi sitio.

Es mejor escribir:

Quiero que las tarjetas de productos se muestren en cuatro columnas en computadora y dos columnas en celular. No quiero modificar el tamaño de las imágenes ni el funcionamiento del botón para agregar al carrito.

Cuanto más precisa sea la solicitud, más preciso será el código generado.

Incluye siempre:

Qué elemento quieres modificar.
Cómo se ve actualmente.
Cómo quieres que se vea.
En qué dispositivos debe aplicarse.
Qué elementos no deben modificarse.

Paso 2: toma capturas de pantalla

Realiza una captura donde se pueda observar claramente:

El elemento que quieres modificar.
El problema actual.
El espacio que lo rodea.
La diferencia entre el resultado actual y el resultado esperado.

Cuando el problema solo ocurre en celular, adjunta una captura de la versión móvil.

Cuando el problema cambia entre computadora y celular, adjunta ambas capturas.

Puedes marcar la captura con flechas, círculos o líneas para señalar exactamente qué parte debe modificarse.

La captura ayuda a la IA a comprender el problema visual, pero generalmente no es suficiente para generar un CSS preciso. También debes enviar el código HTML relacionado.

Paso 3: inspecciona el elemento

Para obtener el código HTML del elemento:

Abre el sitio web publicado en Google Chrome, Microsoft Edge o un navegador similar.
Ubica el elemento que quieres modificar.
Haz clic derecho sobre ese elemento.
Selecciona Inspeccionar o Inspeccionar elemento.
Se abrirán las herramientas para desarrolladores.
Busca el fragmento de HTML que queda seleccionado.
Haz clic derecho sobre ese fragmento.
Selecciona Copiar.
Elige Copiar elemento o Copy outerHTML, según el navegador.
Pega el código en la conversación con la inteligencia artificial.

Waclis recomienda inspeccionar el elemento y copiar su fragmento HTML cuando se necesita generar CSS para una parte específica del sitio.

Recomendación

No copies solamente el texto, la imagen o el botón.

Intenta copiar también el contenedor que lo rodea. Esto permite que la IA conozca:

Las columnas.
Los elementos padres.
Las clases utilizadas.
La relación con otros componentes.
La estructura completa de la sección.

Si el fragmento es demasiado pequeño, la IA puede generar un selector incorrecto o modificar otros elementos por error.

Paso 4: envía la información a ChatGPT, Claude o Gemini

Puedes utilizar el siguiente prompt como base:

Tengo un sitio web creado en Waclis.

Necesito modificar un elemento mediante CSS personalizado.

No puedo modificar el HTML original generado por el sistema. Solo puedo agregar código en el Editor CSS personalizado de Waclis.

Objetivo:
[Explica detalladamente qué quieres modificar].

Comportamiento esperado en computadora:
[Explica cómo debe verse en desktop].

Comportamiento esperado en celular:
[Explica cómo debe verse en mobile].

Importante:
- Utiliza selectores específicos para no afectar otros elementos del sitio.
- Mantén las funcionalidades actuales.
- No elimines ni ocultes elementos que no haya mencionado.
- No cambies el HTML.
- No cambies las clases existentes.
- No agregues JavaScript.
- Incluye las reglas responsive necesarias.
- Genera únicamente el código CSS completo listo para pegar.
- No incluyas etiquetas <style>.
- No incluyas explicaciones dentro del código.

Te adjunto una captura de pantalla y el fragmento HTML relacionado.

HTML:

[PEGAR AQUÍ EL CÓDIGO HTML]

Adjunta también las capturas correspondientes.

Paso 5: revisa el código recibido

La inteligencia artificial debería devolverte un código parecido a este:

.product-list .product-card {
    width: 25%;
    padding: 12px;
}

@media (max-width: 767px) {
    .product-list .product-card {
        width: 50%;
        padding: 8px;
    }
}

No copies explicaciones, títulos o símbolos adicionales.

Debes copiar solamente el contenido CSS.

Paso 6: pega el CSS en Waclis

Para agregar el código:

Ingresa al administrador de Waclis.
Ve a Configuraciones.
Ingresa en Editar sitio.
Selecciona Diseño.
Haz clic en Personalizar plantilla.
Abre el Editor CSS.
Copia el código que ya tengas guardado como respaldo.
Pega el nuevo código al final.
Guarda los cambios.
Abre el sitio publicado y revisa el resultado.

Esta es la ruta indicada por Waclis para agregar CSS personalizado a la plantilla.

Importante

No elimines el CSS que ya existe, salvo que sepas exactamente qué reglas estás reemplazando.

Lo más seguro es agregar el nuevo código al final del editor y acompañarlo con un comentario:

/* Ajuste de tarjetas de productos - agosto 2026 */

.product-list .product-card {
    /* Nuevas reglas */
}

Esto permite identificar posteriormente qué función cumple cada modificación.

Cómo pedir correcciones cuando el primer código no funciona

Es normal que el primer resultado necesite ajustes.

No debes iniciar una conversación nueva. Continúa en la misma conversación para que la IA conserve:

El HTML.
Las capturas.
El código anterior.
El objetivo del cambio.

El código afectó otros elementos

El CSS funciona, pero también modificó otros elementos del sitio que no debían cambiar.

Necesito que ajustes los selectores para que estas reglas se apliquen únicamente al elemento que te envié.

No modifiques el HTML.

Devuélveme el código CSS completo corregido para reemplazar la versión anterior.

Se ve bien en computadora, pero no en celular

El resultado en computadora es correcto, pero en celular ocurre el siguiente problema:

[Explicar el problema].

Te adjunto una captura de la versión móvil.

Ajusta únicamente las reglas responsive necesarias. Mantén sin cambios el resultado de computadora.

Devuélveme el CSS completo actualizado.

El CSS no produce ningún cambio

Pegué el CSS en el Editor CSS de Waclis, pero no se aplica ningún cambio.

Revisa si los selectores coinciden realmente con el HTML que te envié.

Puedes aumentar la especificidad cuando sea necesario, pero evita utilizar !important de forma innecesaria.

Devuélveme una nueva versión completa del CSS.

Una imagen quedó deformada

La imagen cambió de tamaño, pero quedó deformada.

Necesito conservar su proporción original.

Corrige el CSS utilizando un ancho adaptable, altura automática y, si corresponde, object-fit.

No cambies el tamaño de su contenedor ni otros elementos.

Un modal queda detrás del encabezado

El modal se abre correctamente, pero queda detrás del encabezado fijo del sitio.

Necesito que el modal, el fondo oscuro y su contenido se muestren en una capa superior al encabezado.

Revisa los valores de position y z-index del modal, del backdrop y del header.

Genera CSS específico para no afectar otros componentes.

Parte 2: cómo mejorar un bloque existente con IA

La forma más segura de crear una sección personalizada es partir de una sección prearmada de Waclis.

Las secciones prearmadas ya incluyen una estructura funcional y pueden modificarse desde el editor visual o desde el editor de código.

Paso 1: ingresa al editor de bloques

Ingresa al administrador de Waclis.
Ve a Configuraciones.
Selecciona Editar sitio.
Ingresa en Menúes.
Busca la página que quieres modificar.
Haz clic en el ícono de la paleta de pintor.
Se abrirá el editor visual de bloques.

Desde el editor puedes utilizar las vistas de computadora, tableta y celular para revisar la adaptación del contenido. También puedes acceder al navegador de elementos, las propiedades y el editor de código.

Paso 2: selecciona una sección prearmada

Busca una sección que se parezca a lo que quieres conseguir.

Por ejemplo:

Banner.
Texto e imagen.
Beneficios.
Testimonios.
Preguntas frecuentes.
Galería.
Llamado a la acción.
Tabla de precios.
Servicios.
Equipo.
Formulario.
Portfolio.

No es necesario que tenga los colores, imágenes o textos definitivos.

Lo importante es que su estructura general sea parecida a la que necesitas.

Paso 3: personaliza primero el contenido básico

Antes de utilizar IA, intenta cambiar desde el editor visual:

Textos.
Imágenes.
Enlaces.
Colores básicos.
Alineaciones.
Márgenes.
Espaciados.
Fondos.

No es necesario modificar el código cuando el cambio puede resolverse desde las propiedades visuales.

Paso 4: copia el código del bloque

Cuando necesites una modificación más profunda:

Selecciona el bloque.
Abre la opción Edit HTML Code, identificada con el ícono <>, o utiliza el botón Code Editor.
Copia el código HTML del bloque.
Guarda una copia del código original antes de modificarlo.
Pega el código en ChatGPT, Claude o Gemini.

El editor de código permite modificar contenedores, etiquetas, clases, identificadores y la jerarquía interna del bloque, pero sus cambios se limitan al contenido de ese bloque.

Paso 5: utiliza este prompt para mejorar el bloque

Tengo el siguiente bloque HTML de una página creada con el editor de bloques de Waclis.

Quiero que mejores el diseño y la estructura del bloque sin afectar otras secciones del sitio.

Objetivo del bloque:
[Explica qué debe comunicar o mostrar].

Cambios que necesito:
- [Cambio 1].
- [Cambio 2].
- [Cambio 3].

Diseño esperado:
[Describe colores, estilo, tamaños, distribución, bordes, sombras y espacios].

Comportamiento responsive:
- Debe verse correctamente en computadora, tableta y celular.
- Las columnas deben reorganizarse correctamente en pantallas pequeñas.
- Los textos y botones no deben salir de la pantalla.
- Las imágenes deben mantener su proporción.
- No debe existir desplazamiento horizontal.

Requisitos técnicos:
- Conserva las funcionalidades y enlaces existentes.
- Utiliza una clase principal única para encapsular todo el bloque.
- Utiliza nombres de clases específicos y descriptivos.
- No utilices estilos globales sobre body, section, h1, p, img o button.
- No reutilices IDs.
- No agregues etiquetas html, head o body.
- No cambies ni actualices la versión de Bootstrap.
- Conserva las clases del framework que ya existan en el código.
- No agregues librerías externas salvo que sean indispensables.
- No agregues JavaScript si el resultado puede resolverse con HTML y CSS.
- Incluye atributos alt descriptivos en las imágenes.
- Genera el HTML y el CSS completos.
- Separa claramente el HTML del CSS.
- No incluyas explicaciones adicionales.

Código original:

[PEGAR AQUÍ EL HTML DEL BLOQUE]

Paso 6: pega el nuevo código en el bloque

Cuando recibas el resultado:

Copia el HTML generado.
Vuelve al editor de código del bloque.
Reemplaza el HTML anterior.
Coloca el CSS en el área de CSS correspondiente del bloque o del Code Editor.
Si se generó JavaScript y realmente es necesario, colócalo en el área correspondiente.
Guarda los cambios.
Revisa la sección desde el editor.
Abre la página publicada en una nueva pestaña.

Evita mezclar los códigos:

HTML en el área de HTML.
CSS en el área de CSS.
JavaScript en el área de JavaScript.

Parte 3: cómo crear un bloque nuevo desde cero con IA

También puedes pedirle a la inteligencia artificial que cree una sección completamente nueva.

Paso 1: describe la sección

Antes de pedir el código, define:

Qué objetivo tiene.
Qué contenido mostrará.
Cuántas columnas necesita.
Qué imágenes utilizará.
Qué textos incluirá.
Qué botones necesita.
A qué páginas deben dirigir los botones.
Cómo debe verse en computadora.
Cómo debe reorganizarse en celular.
Qué colores y tipografías debe utilizar.
Si necesita alguna animación.

Por ejemplo:

Necesito una sección para presentar los beneficios de comprar en nuestra empresa. Debe tener un título, una introducción y cuatro tarjetas con íconos. En computadora deben mostrarse cuatro columnas y en celular dos columnas. Cada tarjeta debe tener un título y un texto breve.

Paso 2: utiliza este prompt

Necesito crear una nueva sección HTML para una página construida con el editor de bloques de Waclis.

Objetivo:
[Explica el objetivo de la sección].

Contenido:
- Título: [Título].
- Texto introductorio: [Texto].
- Elementos o tarjetas: [Detallar].
- Botón principal: [Texto y enlace].
- Imágenes: [Detallar].

Diseño:
[Describe el estilo visual].

Responsive:
- Debe adaptarse correctamente a computadora, tableta y celular.
- No debe generar desplazamiento horizontal.
- Las imágenes deben conservar su proporción.
- Los botones deben ser fáciles de utilizar desde una pantalla táctil.
- Las columnas deben reorganizarse de forma ordenada en pantallas pequeñas.

Requisitos técnicos:
- Crea un bloque independiente y encapsulado.
- Utiliza una clase contenedora única con el prefijo "waclis-ai-".
- Todos los selectores CSS deben comenzar desde esa clase principal.
- No utilices selectores globales.
- No incluyas html, head ni body.
- No utilices IDs salvo que sean indispensables.
- No repitas IDs.
- Utiliza HTML semántico.
- Incluye atributos alt en las imágenes.
- No agregues JavaScript si puede resolverse con HTML y CSS.
- No agregues librerías externas.
- No asumas una versión diferente de Bootstrap.
- Evita estilos inline.
- Separa el HTML y el CSS.
- Genera el código completo listo para pegar en Waclis.
- No incluyas explicaciones.

Entrega primero el HTML y después el CSS.

Paso 3: reemplaza los contenidos de ejemplo

La IA puede generar textos, imágenes o enlaces de muestra.

Antes de publicar, revisa y reemplaza:

Textos genéricos.
Enlaces con #.
Imágenes de ejemplo.
Números telefónicos.
Direcciones de correo electrónico.
Enlaces de WhatsApp.
Nombres de productos.
Precios.
Botones.
Atributos alt.

No publiques el bloque hasta confirmar que todos los enlaces dirigen al destino correcto.

Cómo solicitar un bloque tomando una imagen como referencia

También puedes adjuntar una captura de otro sitio web o una referencia visual.

Utiliza este prompt:

Quiero crear una sección para mi sitio web en Waclis tomando como referencia la imagen adjunta.

No necesito una copia exacta. Quiero una sección inspirada en su distribución y estilo general, adaptada a la identidad visual de mi marca.

Mi contenido será:
[Detallar textos, imágenes, botones y enlaces].

Colores de mi marca:
[Detallar colores].

Necesito que:
- Sea completamente responsive.
- Se vea correctamente en computadora y celular.
- Tenga una estructura HTML limpia.
- Utilice una clase contenedora única con el prefijo "waclis-ai-".
- Encapsule todo el CSS dentro de esa clase.
- No utilice selectores globales.
- No agregue librerías externas.
- No incluya html, head ni body.
- No agregue JavaScript salvo que sea indispensable.
- Genere el HTML y el CSS completos y separados.
- No incluya explicaciones.

La captura sirve como referencia visual, pero debes proporcionar también los textos, imágenes y enlaces que utilizará tu sitio.

Buenas prácticas para crear bloques con IA

Utiliza una clase principal única

Cada bloque debería estar contenido dentro de una clase exclusiva:

<section class="waclis-ai-beneficios">
    ...
</section>

El CSS debe comenzar siempre desde esa clase:

.waclis-ai-beneficios {
    padding: 70px 20px;
}

.waclis-ai-beneficios .beneficio-card {
    border-radius: 16px;
}

Esto evita que el código modifique otras secciones.

Evita selectores globales

No es recomendable que el CSS de un bloque contenga reglas como:

h2 {
    font-size: 40px;
}

img {
    width: 100%;
}

button {
    border-radius: 20px;
}

Estas reglas pueden afectar todos los títulos, imágenes y botones del sitio.

Es mejor utilizar:

.waclis-ai-beneficios h2 {
    font-size: 40px;
}

.waclis-ai-beneficios img {
    width: 100%;
    height: auto;
}

.waclis-ai-beneficios .beneficio-button {
    border-radius: 20px;
}

Utiliza clases en lugar de IDs

Las clases pueden repetirse cuando varios elementos comparten un estilo.

Los IDs deben utilizarse únicamente para elementos únicos y no deben repetirse. Waclis permite definir clases e IDs desde el editor visual o desde el editor de código.

Divide correctamente el contenido

No intentes colocar toda una página dentro de un único bloque.

Conviene separar:

Banner principal.
Presentación.
Beneficios.
Productos destacados.
Testimonios.
Preguntas frecuentes.
Llamado a la acción.

Cuando cada sección tiene una función propia, también debe tener un bloque propio.

Separar el contenido facilita la edición y evita que un cambio afecte toda la página.

Conserva el código dinámico

Si un bloque contiene:

Un formulario de Waclis.
Un campo especial.
Una variable.
Un enlace dinámico.
Una integración.
Un código embebido.
Un identificador utilizado por JavaScript.

Indica expresamente a la IA que debe conservarlo.

Puedes agregar al prompt:

Este bloque contiene elementos funcionales de Waclis. Conserva sin cambios todos los formularios, nombres de campos, atributos, enlaces, scripts, variables e identificadores existentes. Modifica únicamente la estructura visual y el CSS.

No agregues JavaScript cuando no sea necesario

Muchos efectos pueden conseguirse con CSS:

Cambio de color al pasar el cursor.
Movimiento suave de una tarjeta.
Sombras.
Transiciones.
Escala de imágenes.
Aparición visual.
Bordes animados.

Utiliza JavaScript únicamente cuando necesites una acción concreta.

Agregar JavaScript innecesario puede:

Generar conflictos.
Duplicar comportamientos.
Afectar otros componentes.
Reducir el rendimiento.
Dificultar futuras modificaciones.

No cambies el framework existente

No le pidas a la IA que convierta el bloque a otra versión de Bootstrap o que reemplace las clases actuales.

Es mejor indicarle:

Conserva el framework, las clases y las dependencias que ya utiliza el código. No actualices ni reemplaces Bootstrap.

De esta manera, el bloque se mantiene compatible con el sitio donde será utilizado.

Recomendaciones de seguridad

Antes de utilizar cualquier código generado por IA:

Guarda una copia del código anterior.
No compartas contraseñas ni credenciales con la IA.
No pegues tokens de acceso, claves privadas o información de clientes.
Revisa cualquier enlace externo incluido en el código.
Evita scripts provenientes de dominios desconocidos.
No incorpores librerías externas si no sabes para qué se utilizan.
Prueba primero el cambio en una página de menor importancia.
Mantén identificados los códigos agregados.

Si la IA genera un script que solicita credenciales, transmite información a otro servidor o carga archivos desde una dirección desconocida, no lo utilices.

Cómo probar correctamente los cambios

Después de guardar el CSS o el bloque, revisa:

En computadora

Que las columnas tengan el ancho correcto.
Que los textos sean legibles.
Que no existan espacios excesivos.
Que las imágenes no estén deformadas.
Que los botones funcionen.
Que los menús y modales continúen funcionando.

En tableta

Que los elementos no estén demasiado juntos.
Que las columnas se reorganicen correctamente.
Que no exista desplazamiento horizontal.

En celular

Que los textos no salgan de la pantalla.
Que las imágenes mantengan su proporción.
Que los botones tengan un tamaño cómodo.
Que no haya elementos superpuestos.
Que los menús puedan abrirse y cerrarse.
Que los formularios puedan completarse.
Que los modales aparezcan por encima del resto del sitio.

El editor de bloques incluye vistas de escritorio, tableta y móvil, pero también es recomendable revisar la página publicada en dispositivos reales.

Lista de verificación antes de publicar

Antes de considerar finalizada una modificación, confirma lo siguiente:

Guardé una copia del código anterior.
Expliqué claramente el objetivo a la IA.
Envié el HTML real del elemento.
Adjunté capturas de pantalla.
Solicité selectores específicos.
El código no afecta otras secciones.
El diseño funciona en computadora.
El diseño funciona en tableta.
El diseño funciona en celular.
Las imágenes no están deformadas.
Los botones y enlaces funcionan.
Los formularios continúan funcionando.
No se eliminaron funciones de Waclis.
No existen IDs repetidos.
El bloque no utiliza selectores globales.
No se agregaron scripts desconocidos.
El resultado conserva la identidad visual de la marca.

Preguntas frecuentes

¿Puedo modificar una tarjeta de producto desde el editor de bloques?

No. Las tarjetas, fichas, listados y carruseles automáticos de productos son contenidos dinámicos generados por Waclis.

Para cambiar su apariencia debes utilizar el Editor CSS.

¿Puedo modificar el encabezado o el pie desde el editor de bloques?

El editor de bloques no modifica directamente el encabezado o el pie general de la plantilla. Para cambiar su apariencia puedes utilizar CSS personalizado y, cuando sea necesario, JavaScript.

¿Es suficiente enviar una captura de pantalla?

La captura ayuda a explicar el objetivo visual, pero para generar un CSS preciso también es recomendable enviar el fragmento HTML inspeccionado.

¿Debo enviar todo el código de la página?

No siempre.

Para modificar un elemento puntual, envía el contenedor relacionado y sus elementos internos.

Cuando el cambio afecta la estructura general o varias secciones, puede ser necesario enviar un fragmento más amplio.

¿Cuál es mejor: ChatGPT, Claude o Gemini?

Las tres herramientas pueden ayudarte a analizar código y generar HTML o CSS.

El resultado dependerá principalmente de:

La claridad del pedido.
La calidad de las capturas.
El HTML enviado.
Las limitaciones explicadas.
Las pruebas posteriores.
Las correcciones que solicites.

¿Qué hago si el cambio rompe el diseño?

Elimina el último código agregado o restaura la copia de seguridad.

Después, vuelve a la misma conversación con la IA, explica qué ocurrió y adjunta una captura del problema.

¿Tengo que aceptar siempre el primer código?

No.

La IA funciona como un asistente. Es habitual realizar varias correcciones hasta conseguir el resultado esperado.

Puedes indicarle:

Esta versión todavía no es correcta. Conserva lo que ya funciona y modifica solamente los siguientes puntos:

1. [Corrección].
2. [Corrección].
3. [Corrección].

Devuélveme el código completo actualizado para reemplazar la versión anterior.

ChatGPT, Claude y Gemini pueden ayudarte a convertir una idea visual en código HTML, CSS o JavaScript listo para utilizar en Waclis.

La clave es elegir correctamente dónde realizar cada modificación:

Utiliza el Editor CSS para personalizar elementos generales o dinámicos del sitio.
Utiliza el editor de bloques para crear y modificar contenido estático dentro de una página.
Utiliza el editor de código del bloque cuando necesites cambiar su estructura HTML.
Utiliza JavaScript únicamente cuando necesites agregar un comportamiento o una interacción.

No necesitas convertirte en programador, pero debes trabajar de manera ordenada:

Define el objetivo.
Toma capturas.
Copia el código real.
Explica las limitaciones.
Solicita código encapsulado y responsive.
Guarda una copia de seguridad.
Prueba el resultado en distintos dispositivos.
Solicita correcciones hasta obtener el resultado esperado.

Combinando las herramientas de edición de Waclis con la inteligencia artificial, puedes crear un sitio mucho más personalizado, moderno y alineado con la identidad de tu negocio.

¿Necesitas más ayuda?

Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.

Crear ticket de soporte