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

Las herramientas de inteligencia artificial como ChatGPT, Claude o Gemini pueden ayudarte a personalizar una Página web creada con Waclis, incluso si no tienes experiencia avanzada en programación.

Puedes utilizarlas para:

• modificar colores, tamaños y espacios;

• mejorar la apariencia de una sección;

• adaptar un diseño para celular;

• cambiar cómo se muestran las imágenes;

• crear efectos Hover;

• agregar animaciones personalizadas;

• crear nuevas composiciones;

• generar HTML y CSS;

• corregir problemas de responsive;

• entender un fragmento de código;

• mejorar bloques existentes;

• encontrar errores en una personalización;

• crear una sección completamente nueva.

La clave para obtener buenos resultados no consiste simplemente en copiar todo el código y pedir:

“Mejóralo”.

Cuanto mejor expliques:

• qué quieres modificar;

• qué elemento debe cambiar;

• qué no debe modificarse;

• qué Classes o IDs utiliza;

• cómo debe comportarse en celular;

más seguro y preciso será el resultado.

No necesitas saber programar para utilizar IA con Waclis

Puedes comenzar utilizando únicamente las herramientas visuales del Editor de bloques.

Por ejemplo:

• Secciones;

• Componentes;

• Contenido;

• Estilo;

• Avanzado.

La IA resulta especialmente útil cuando necesitas una personalización que no encuentras directamente en estas herramientas.

Por ejemplo:

Quiero que las tarjetas se eleven suavemente cuando paso el cursor.

Quiero que todas las imágenes tengan la misma altura pero que los productos se muestren completos.

Quiero que en computadora aparezcan cuatro tarjetas y en celular dos.

Quiero que el título tenga un efecto visual específico.

Quiero crear una sección con una distribución que no encuentro en las secciones prediseñadas.

¿Qué herramienta de IA puedo utilizar?

Puedes trabajar con cualquiera de las herramientas que permita analizar y generar código, por ejemplo:

• ChatGPT;

• Claude;

• Gemini.

El procedimiento dentro de Waclis es prácticamente el mismo.

Lo importante no es solamente qué herramienta utilizas, sino la información que le proporcionas y cómo pruebas posteriormente el código generado.

Dos formas principales de utilizar IA con el Editor de bloques

Existen dos escenarios principales.

1. Modificar un bloque existente

Por ejemplo:

Ya tienes:

[ Producto ] [ Producto ] [ Producto ]

y quieres modificar:

• cantidad de columnas;

• tamaño;

• imágenes;

• espacios;

• Hover;

• tipografía.

En este caso conviene trabajar sobre el código o Classes existentes sin reconstruir todo.

2. Crear un bloque nuevo

Por ejemplo:

Quieres crear desde cero:

┌─────────────────────────────────────────┐
│                                         │
│          NUESTRAS CATEGORÍAS            │
│                                         │
│   [ 1 ]   [ 2 ]   [ 3 ]                │
│                                         │
│       [ 4 ]       [ 5 ]                │
│                                         │
└─────────────────────────────────────────┘

Puedes pedirle a una IA que genere:

• HTML;

• CSS;

• responsive;

• interacciones;

y posteriormente incorporar el bloque en Waclis.

Antes de recurrir a IA, comprueba si puedes hacerlo visualmente

Muchas modificaciones no necesitan código.

Por ejemplo:

Cambiar un texto

Utiliza:

Contenido

Reemplazar una imagen

Utiliza:

Set Image

Cambiar color

Utiliza:

Estilo

Modificar Padding

Utiliza:

Estilo → Padding

Cambiar tipografía

Utiliza:

Estilo → Typography

Ocultar en determinado tamaño

Utiliza:

Avanzado → Hide based on device screen width

Crear columnas

Utiliza:

Grid Row

La IA debería ayudarte cuando necesitas ir más allá de estas posibilidades o quieres que te guíe sobre cómo utilizarlas.

La IA también puede explicarte cómo realizar un cambio sin código

No siempre debes pedir:

Dame el CSS.

También puedes preguntar:

Quiero aumentar el espacio interior de esta tarjeta. ¿Puedo hacerlo desde las herramientas visuales del Editor de bloques de Waclis sin utilizar CSS?

Esto puede ayudarte a decidir cuál es la solución más sencilla.

Parte 1: modificar CSS con inteligencia artificial

Supongamos que ya tienes una sección y quieres cambiar su apariencia.

El flujo recomendado es:

IDENTIFICAR EL ELEMENTO
↓
NAVIGATOR
↓
CLASS / ID
↓
EXPLICAR EL OBJETIVO
↓
PEDIR CSS LIMITADO
↓
REVISAR EL CÓDIGO
↓
APLICAR
↓
PROBAR

Paso 1: identifica exactamente qué quieres modificar

Evita pedidos generales como:

Quiero que se vea mejor.

Intenta describir el resultado.

Por ejemplo:

Quiero que las tarjetas tengan esquinas redondeadas de 16 px, una sombra muy suave y que suban 4 px al pasar el cursor.

Esto permite generar una solución concreta.

Paso 2: selecciona el elemento en Waclis

Dentro del Editor de bloques selecciona:

• Card;

• Image;

• Heading;

• Section;

• Grid Row;

• u otro elemento.

Utiliza Navigator si no puedes seleccionarlo fácilmente.

Paso 3: revisa Class e ID

Desde:

Contenido

comprueba:

• Class;

• ID.

Por ejemplo:

Class:
servicio-card

Esto es mucho más útil para una IA que simplemente decir:

“la caja blanca”.

Paso 4: identifica también la sección principal

Cuando trabajas con CSS avanzado es recomendable disponer de una Class general para delimitar el bloque.

Por ejemplo:

servicios-section

y dentro:

servicio-card

Así puedes pedir una regla como:

.servicios-section .servicio-card {
}

en lugar de:

.card {
}

¿Por qué es importante?

Porque:

.card {
}

puede modificar otras Cards de la Página web.

En cambio:

.servicios-section .servicio-card {
}

limita mucho mejor el cambio.

Paso 5: explícale a la IA qué no debe tocar

Este punto mejora mucho los resultados.

Puedes indicar:

No modifiques otras secciones.

No cambies el Header ni el Footer.

No elimines Classes existentes.

No agregues JavaScript.

No cambies los enlaces.

No cambies el HTML.

Devuélveme solamente el CSS necesario.

Estas restricciones ayudan a mantener el alcance controlado.

Ejemplo de prompt recomendado para CSS

Puedes utilizar un pedido como este:

Estoy trabajando con el Editor de bloques de Waclis.

La sección principal utiliza la clase:

.servicios-section

Cada tarjeta utiliza:

.servicio-card

Necesito realizar los siguientes cambios:

- Border radius de 16 px.
- Una sombra suave.
- Padding interno de 24 px.
- Al pasar el cursor, la tarjeta debe desplazarse 4 px hacia arriba con una transición suave.
- En celular el Padding debe reducirse a 18 px.

No modifiques ninguna otra sección de la Página web.

No cambies el HTML.

No agregues JavaScript.

Devuélveme únicamente el CSS necesario.

Una respuesta posible de la IA

Podría generar algo como:

.servicios-section .servicio-card {
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    transition: transform .3s ease;
}

.servicios-section .servicio-card:hover {
    transform: translateY(-4px);
}

@media (max-width: 768px) {
    .servicios-section .servicio-card {
        padding: 18px;
    }
}

Antes de utilizarlo, revisa que los nombres de las Classes coincidan exactamente con las que existen en tu bloque.

Paso 6: aplica el CSS

Dentro del Editor de bloques puedes utilizar:

Varita → CSS

para trabajar con reglas CSS relacionadas con el contenido.

Agrega solamente el código necesario.

Paso 7: comprueba el resultado

Revisa:

• computadora;

• tablet;

• celular.

Después:

Guardar Cambios → Ver página

Nunca des por correcto un código solamente porque fue generado por una IA

ChatGPT, Claude o Gemini pueden equivocarse.

También pueden:

• utilizar una Class que no existe;

• crear un selector demasiado general;

• agregar propiedades innecesarias;

• asumir una estructura distinta;

• utilizar JavaScript cuando no hacía falta;

• generar código incompatible con tu bloque actual.

La IA es una herramienta de asistencia.

El resultado siempre debe probarse.

Parte 2: pedir modificaciones sobre un CSS existente

Si ya tienes código que funciona, es preferible conservarlo y pedir cambios puntuales.

Por ejemplo:

.producto-imagen {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

Quieres que los productos se vean completos.

Prompt recomendado

Tengo este CSS:

.producto-imagen {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

Necesito que la imagen se muestre completa dentro del espacio y no se recorte.

No cambies el ancho, la altura ni ninguna otra propiedad.

Devuélveme solamente el CSS corregido.

Cambio esperado

.producto-imagen {
    width: 100%;
    height: 300px;
    object-fit: contain;
}

Este enfoque es mucho más seguro que pedir una reescritura completa.

Realiza modificaciones mínimas cuando sea posible

Si una sección ya funciona correctamente salvo por un detalle, indícalo.

Por ejemplo:

Todo funciona correctamente. No reescribas la estructura. Solamente necesito modificar el comportamiento de las imágenes.

Esta información es muy útil para la IA.

Parte 3: copiar HTML de un elemento concreto

Cuando necesitas una modificación estructural puedes utilizar:

Editar código HTML <>

sobre el elemento seleccionado.

Esta opción es preferible cuando quieres trabajar específicamente con:

• una Card;

• un enlace;

• una Section;

• un grupo de elementos.

Primero selecciona el elemento correcto

Utiliza:

Navigator

y comprueba qué nivel quieres modificar.

Por ejemplo:

Section
└── Container
    └── Card
        ├── Image
        ├── Heading
        ├── Paragraph
        └── Button

Si quieres que la IA modifique toda la Card, selecciona Card.

No solamente Heading.

Después abre Editar código HTML

Utiliza:

<>

y copia el fragmento correspondiente.

Ejemplo de prompt para modificar HTML

Este es el HTML de una tarjeta dentro del Editor de bloques de Waclis:

[pegar HTML]

Necesito agregar un pequeño texto "Nuevo" encima del título.

No elimines ninguna Class existente.

No cambies la imagen, el enlace ni el botón.

Mantén la estructura actual.

Devuélveme el HTML completo de esta tarjeta con solamente ese cambio.

¿Por qué indicar que conserve las Classes?

Porque las Classes existentes pueden estar relacionadas con:

• CSS;

• responsive;

• Hover;

• JavaScript;

• estructura.

Si una IA las elimina o cambia, puede romper comportamientos existentes.

Parte 4: no copies todo el Code editor sin necesidad

Este punto es especialmente importante.

El Code editor puede mostrar una estructura mucho más amplia que el bloque que estás viendo.

Puede incluir:

• HTML general;

• <head>;

• <body>;

• CSS;

• scripts;

• dependencias;

• integraciones;

• código de otras funcionalidades.

Si solamente quieres modificar una Card, normalmente no necesitas enviar todo eso a la IA.

¿Por qué no conviene enviar todo?

Porque aumenta el riesgo de que la respuesta:

• modifique código no relacionado;

• elimine dependencias;

• reordene scripts;

• cambie otras secciones;

• genere una respuesta enorme;

• resulte difícil comparar.

Envía solamente el contexto necesario

Para una modificación visual suelen ser suficientes:

1. HTML de la sección;

2. CSS relacionado;

3. explicación del resultado;

4. comportamiento responsive esperado.

Agrega JavaScript solamente si el problema depende realmente de él.

¿Cuándo puede ser útil utilizar Code editor?

Cuando necesitas revisar una personalización avanzada que incluye:

• HTML;

• CSS;

• JavaScript;

• recursos relacionados;

y necesitas comprender cómo se conectan.

Incluso en ese caso, intenta localizar la sección mediante una Class identificable.

Ejemplo

Busca:

servicios-section

en lugar de enviar el documento completo sin saber qué parte corresponde al bloque.

Parte 5: crear una sección completa con IA

También puedes pedir a ChatGPT, Claude o Gemini que construya una sección desde cero.

Por ejemplo:

Quiero una sección de cinco categorías con tres tarjetas arriba y dos más grandes debajo.

La IA puede generar:

• HTML;

• CSS;

• responsive;

• Hover;

• animaciones opcionales.

Antes de pedir código, describe primero el diseño

Cuanta más información proporciones, mejor.

Indica:

• objetivo;

• cantidad de elementos;

• distribución desktop;

• distribución móvil;

• imágenes;

• textos;

• botones;

• colores;

• bordes;

• comportamiento Hover;

• animaciones;

• restricciones.

Ejemplo de prompt completo

Necesito crear una nueva sección para el Editor de bloques de Waclis.

Objetivo:
Mostrar cinco categorías principales.

Desktop:
- Primera fila con tres tarjetas iguales.
- Segunda fila con dos tarjetas más grandes.
- Toda la sección debe ocupar el ancho disponible.

Celular:
- Las cinco tarjetas deben mostrarse una debajo de otra.

Cada tarjeta debe tener:
- Imagen.
- Nombre de categoría.
- Enlace.

Imágenes:
- Deben cubrir el espacio sin deformarse.

Diseño:
- Border radius de 16 px.
- Texto blanco sobre la imagen.
- Overlay oscuro suave.
- Hover con una pequeña ampliación de la imagen.

Código:
- Utiliza una clase principal .categorias-home.
- Todas las demás clases deben comenzar con categorias-.
- No utilices selectores globales como img, h2, a o .card.
- No modifiques Header ni Footer.
- Evita JavaScript si puede resolverse con HTML y CSS.
- Debe funcionar correctamente en desktop, tablet y celular.

Devuélveme el HTML y CSS separados.

¿Por qué pedir una Class principal?

Porque permite aislar el bloque.

Por ejemplo:

categorias-home

Luego el CSS puede utilizar:

.categorias-home .categorias-card {
}

Esto reduce el riesgo de afectar otras partes de la Página web.

Utiliza prefijos para bloques generados por IA

Es una buena práctica.

Por ejemplo, si el bloque es de Categorías:

categorias-home
categorias-grid
categorias-card
categorias-imagen
categorias-titulo
categorias-link

Si el bloque es Promociones:

promo-section
promo-grid
promo-card
promo-imagen
promo-titulo

Evita nombres genéricos generados por IA

Si la IA devuelve:

.container
.card
.title
.image

pregunta si puede reemplazarlos por Classes más específicas.

Por ejemplo:

.categorias-container
.categorias-card
.categorias-title
.categorias-image

Parte 6: crear una sección utilizando Componentes en lugar de HTML completo

La IA no tiene que generar necesariamente todo el HTML.

También puedes pedirle que te indique cómo construirlo visualmente.

Por ejemplo:

Quiero crear una sección dentro del Editor de bloques de Waclis con una imagen a la izquierda y texto + botón a la derecha.

Explícame qué Componentes debo agregar y en qué orden, utilizando Section, Container, Grid Row y Grid Columns.

Quiero hacerlo con las herramientas visuales y utilizar CSS solamente si es imprescindible.

La respuesta puede orientarte hacia:

Section
└── Container
    └── Grid Row
        ├── Grid Column
        │   └── Image
        └── Grid Column
            ├── Heading
            ├── Paragraph
            └── Button

Este enfoque suele resultar más fácil de mantener.

La IA puede actuar como asistente, no solamente como generador de código

Puedes preguntarle:

¿Qué elemento debo seleccionar para cambiar este fondo?

¿Debo utilizar Margin o Padding?

¿Es mejor Cover o Contain en este caso?

¿Por qué cambian tres tarjetas cuando modifico una?

¿Cómo debería organizar estas Classes?

¿Qué selector CSS está afectando otros elementos?

¿Este código puede generar problemas en móvil?

Esto puede ayudarte a aprender mientras realizas la personalización.

Parte 7: pedir ayuda para responsive

Uno de los usos más útiles de una IA es resolver problemas entre desktop y celular.

Por ejemplo:

Desktop:
[ 1 ] [ 2 ] [ 3 ] [ 4 ]

Mobile:
[1][2][3][4]

Las tarjetas quedan demasiado pequeñas.

Quieres:

Mobile:

[ 1 ]

[ 2 ]

[ 3 ]

[ 4 ]

Antes de pedir CSS, revisa Grid Row

Recuerda que Waclis permite configurar columnas responsive desde el propio editor.

Pregunta primero:

¿Puedo resolver esto configurando Grid Row sin CSS?

Si el diseño requiere algo adicional, entonces pide el CSS.

Ejemplo de prompt responsive

Tengo una sección .productos-destacados con cuatro tarjetas .producto-card.

En desktop deben mostrarse cuatro por fila.

En tablet quiero dos por fila.

En celular una por fila.

No quiero ocultar ninguna tarjeta.

No cambies otros elementos de la Página web.

Si puede resolverse con la estructura responsive del Editor de bloques de Waclis, explícame primero cómo hacerlo.

Si es necesario CSS adicional, devuélveme solamente ese CSS.

No ocultes contenido solamente para que el diseño entre

Una IA podría sugerir ocultar elementos en móvil.

Si el contenido sigue siendo importante, indica:

Todos los elementos deben mantenerse visibles en celular.

Esto evita soluciones que reducen información.

Parte 8: pedir ayuda para imágenes

Otro caso frecuente es el comportamiento de las imágenes.

Mostrar una imagen completa

Puedes indicar:

Quiero que la imagen se vea completa dentro de la tarjeta, sin recortarse ni deformarse.

Esto suele llevar a una solución con:

object-fit: contain;

cuando corresponde.

Cubrir todo el espacio

Si quieres que la fotografía llene el contenedor:

Quiero que la imagen cubra toda la tarjeta, mantenga su proporción y se pueda recortar si es necesario.

puede corresponder:

object-fit: cover;

Explica siempre la intención

En lugar de pedir:

Arregla la imagen.

Indica:

El producto debe verse completo.

o:

La fotografía debe llenar toda la tarjeta.

Son necesidades diferentes.

Parte 9: pedir efectos Hover

Puedes pedir:

Quiero que la tarjeta se eleve 5 px al pasar el cursor, con una transición suave de 0,3 segundos.

No modifiques su tamaño ni los textos.

Una solución posible:

.mi-seccion .mi-card {
    transition: transform .3s ease;
}

.mi-seccion .mi-card:hover {
    transform: translateY(-5px);
}

No dependas del Hover para información importante

Al pedir un diseño a una IA aclara:

Toda la información debe permanecer visible sin Hover porque la sección también se utilizará en celulares.

Esto evita propuestas que funcionan solamente con mouse.

Parte 10: pedir animaciones

Waclis ya dispone de:

Avanzado → Animate on scroll

Por eso antes de pedir una animación mediante CSS o JavaScript comprueba si el efecto que necesitas puede configurarse visualmente.

Si quieres una animación especial

Puedes explicar:

Quiero un efecto que no puedo conseguir con Animate on scroll.

Debe ser suave y no debe impedir que el contenido se muestre si el efecto falla.

Evita JavaScript si puede resolverse con CSS.

Mantén siempre visible el contenido importante

Una animación no debería hacer que:

• textos;

• precios;

• botones;

• información importante;

dependan de que el JavaScript se ejecute correctamente.

Parte 11: pedir ayuda para errores de CSS

También puedes utilizar una IA como herramienta de diagnóstico.

Por ejemplo:

Tengo este HTML:

[HTML]

y este CSS:

[CSS]

Cuando cambio el fondo de .servicio-card también se modifica otra sección.

Identifica qué selector está causando el problema y propón el cambio mínimo necesario.

No reescribas el bloque completo.

Pide que explique la causa

Puedes agregar:

Explícame primero por qué sucede y después dame la corrección.

Esto es útil para saber si el problema es:

• Class compartida;

• selector global;

• especificidad;

• estructura;

• ID duplicado.

Parte 12: pedir ayuda con Linked styles

Si Waclis muestra:

Linked styles

puedes explicar:

Tengo tres tarjetas que comparten la clase .servicio-card.

Waclis muestra Linked styles porque el estilo está compartido.

Quiero mantener el estilo común para las tres, pero que solamente la segunda tenga un borde diferente.

¿Cómo debería identificar esa segunda tarjeta sin romper el estilo compartido?

Una solución posible será:

• conservar .servicio-card;

• agregar una Class adicional;

• o un ID único.

Ejemplo con Class adicional

Card 1
class="servicio-card"

Card 2
class="servicio-card destacado"

Card 3
class="servicio-card"

CSS:

.servicio-card.destacado {
    border-width: 3px;
}

Parte 13: pedir ayuda con IDs duplicados

Si clonaste un elemento, puedes pedir:

He clonado esta tarjeta y ambas mantienen el ID "servicio-principal".

Necesito conservar las Classes pero corregir los IDs para que sean únicos.

Propón nombres claros para las tres tarjetas.

La IA puede ayudarte a nombrar Classes e IDs

Por ejemplo, para:

• Diseño;

• Desarrollo;

• Soporte;

puede sugerir:

servicio-diseno
servicio-desarrollo
servicio-soporte

Esto es mucho más claro que:

item1
item2
item3

Parte 14: pedir ayuda con JavaScript

Utiliza JavaScript solamente cuando la necesidad realmente lo requiera.

Antes de pedir un script puedes indicar:

Primero confirma si puede resolverse con HTML o CSS. Utiliza JavaScript solamente si es necesario.

¿Por qué?

Porque JavaScript agrega una capa adicional de mantenimiento.

Un script puede depender de:

• Classes;

• IDs;

• eventos;

• estructura;

• recursos externos.

Si ya existe JavaScript, indícalo

Por ejemplo:

Este bloque ya tiene JavaScript funcionando.

Necesito modificar solamente el comportamiento responsive del CSS.

No elimines, reescribas ni modifiques el JavaScript existente.

Esto es especialmente importante cuando envías un bloque completo.

No permitas que la IA elimine código desconocido solo porque parece innecesario

Si una respuesta elimina:

<script>
...
</script>

o una dependencia y no sabes para qué sirve, no apliques automáticamente ese cambio.

Primero pregunta:

¿Qué función cumple este script y por qué propones eliminarlo?

Parte 15: revisar código generado antes de utilizarlo

Antes de copiar cualquier código, comprueba:

• ¿utiliza las Classes correctas?

• ¿agrega un ID duplicado?

• ¿utiliza selectores globales?

• ¿incluye !important?

• ¿agrega JavaScript sin necesidad?

• ¿agrega librerías externas?

• ¿utiliza Width fijo?

• ¿utiliza Height fijo?

• ¿incluye responsive?

• ¿afectará otros bloques?

Cuidado con selectores globales

Si la IA genera:

img {
    width: 100%;
}

pregúntate:

¿Quiero modificar todas las imágenes?

Probablemente no.

Mejor

.productos-destacados .producto-imagen {
    width: 100%;
}

Cuidado con .card

La IA puede utilizar:

.card {
}

pero Waclis y otros componentes pueden utilizar la misma Class.

Utiliza una identificación más específica.

Cuidado con !important

Si devuelve:

color: red !important;

pregunta si puede resolverse mediante un selector más específico.

No significa que !important esté siempre mal, pero no debería utilizarse automáticamente.

Cuidado con Width fijos

Por ejemplo:

width: 1200px;

puede generar problemas en celular.

Pregunta:

¿Esta regla es responsive?

Cuidado con Height fijos

Una altura fija puede cortar textos que posteriormente sean más largos.

Pregunta si puede utilizar:

• min-height;

• altura automática;

• una estructura flexible;

cuando corresponda.

Parte 16: pedir solamente el código que debes agregar

Una excelente práctica es indicar:

No me devuelvas todo el código. Indícame solamente qué CSS debo agregar.

o:

Muéstrame únicamente las líneas que debo reemplazar.

Esto facilita:

• revisar;

• copiar;

• volver atrás;

• identificar el cambio.

Ejemplo

En lugar de recibir 300 líneas, puedes recibir:

.productos-destacados .producto-imagen {
    object-fit: contain;
}

Si esa era la única modificación necesaria.

Parte 17: indicar la versión y contexto cuando sea relevante

Waclis utiliza actualmente Bootstrap 4 en la Página web.

Si estás solicitando una estructura que depende directamente de la grilla o de clases Bootstrap, puedes aclarar:

La Página web de Waclis utiliza Bootstrap 4.

No utilices clases que dependan exclusivamente de versiones posteriores.

Esto puede evitar que una IA genere una estructura incompatible con el entorno utilizado por la Página web.

No necesitas mencionar detalles técnicos cuando no afectan la solución

Para:

• un color;

• Border radius;

• object-fit;

• Padding;

no es necesario agregar información sobre Bootstrap.

Incluye solamente el contexto relevante.

Parte 18: trabajar con una captura de pantalla

Otra posibilidad muy útil es enviar a la IA:

• una captura de cómo se ve actualmente;

• el código relacionado;

• una explicación del resultado deseado.

Por ejemplo:

Actualmente las Cards tienen mucho espacio entre sí. En la captura marco con rojo el espacio que quiero reducir.

Después adjunta:

• captura;

• HTML o Class;

• CSS relacionado.

Una captura por sí sola puede no ser suficiente para generar CSS seguro

La IA puede reconocer visualmente el problema, pero necesita saber qué selector debe utilizar.

Siempre que sea posible acompaña la captura con:

• Class;

• ID;

• HTML del elemento;

• fragmento CSS.

Parte 19: indicar exactamente qué cambió después de probar

Supongamos que aplicaste CSS y el resultado no fue correcto.

No necesitas comenzar nuevamente desde cero.

Puedes decir:

Apliqué el CSS que me diste.

En desktop funciona correctamente.

En celular sucede esto:

- La imagen se sale del contenedor.
- El título se ve correctamente.
- El botón funciona.
- No quiero modificar desktop.

Te envío el CSS actual.

Corrige solamente el comportamiento móvil.

Esto permite iterar sobre el resultado.

Utiliza el mismo fragmento actualizado

Cuando vuelvas a consultar a la IA, proporciona el CSS que actualmente está aplicado, no necesariamente la primera versión.

De esta manera analiza el estado real.

Parte 20: una modificación por vez cuando el problema es complejo

Supongamos que necesitas:

• cambiar columnas;

• cambiar imágenes;

• agregar Hover;

• modificar tipografía;

• agregar animaciones.

Puedes dividirlo.

Paso 1

Corrige Grid.

Paso 2

Comprueba responsive.

Paso 3

Corrige imágenes.

Paso 4

Agrega Hover.

Paso 5

Agrega animación.

Esto facilita detectar qué cambio causa un problema.

Parte 21: cómo volver atrás si el resultado no funciona

Si realizas una modificación y el resultado no es el esperado:

Si acabas de realizarla visualmente

Utiliza:

Deshacer

Si agregaste un fragmento CSS

Elimina solamente el fragmento recién agregado.

Si reemplazaste código

Restaura el fragmento original que conservaste previamente.

Conserva el original antes de cambios grandes

Antes de sustituir una sección extensa puedes copiar temporalmente el fragmento original.

Por ejemplo:

HTML ORIGINAL

o:

CSS ORIGINAL

Así puedes restaurarlo fácilmente.

No reemplaces una sección grande sin conservar referencia

Especialmente si contiene:

• JavaScript;

• animaciones;

• integraciones;

• código externo.

Parte 22: prueba siempre después de utilizar IA

Una revisión mínima debe incluir:

Desktop

Comprueba composición completa.

Tablet

Comprueba columnas y espacios.

Celular

Comprueba:

• desbordamientos;

• tamaño;

• imágenes;

• botones;

• textos.

Comprueba también interacciones

Si el bloque incluye:

• Hover;

• botón;

• Link;

• Accordion;

• Tabs;

• Carousel;

• formulario;

• iframe;

pruébalos.

Utiliza Ver página

Después de guardar:

Ver página

La validación final no debería realizarse únicamente dentro del Editor de bloques.

Parte 23: detectar si el CSS afectó otras secciones

Después de modificar un bloque revisa también:

• sección anterior;

• sección siguiente;

• otras Cards similares;

• contenido dinámico cercano.

Esto ayuda a detectar selectores demasiado generales.

Ejemplo

Modificaste:

Servicios

pero también revisa:

Beneficios
Servicios
Testimonios

Si Beneficios también cambió, el selector puede tener un alcance excesivo.

Parte 24: pedir a la IA que revise el alcance antes de generar código

Puedes indicarle:

Antes de darme el CSS, identifica qué elementos alcanzará cada selector.

No utilices ningún selector que pueda modificar otros bloques de la Página web.

Esto obliga a la herramienta a considerar el scope.

Parte 25: ejemplos de prompts útiles

Cambiar imágenes a Contain

Las imágenes de esta sección utilizan la clase .producto-imagen.

Quiero que se muestren completas dentro de un contenedor de altura fija, sin deformarse.

Aplica object-fit: contain.

No modifiques ninguna otra imagen de la Página web.

Devuélveme solamente el CSS.

Crear cuatro columnas

Tengo una sección .categorias-section con tarjetas .categoria-card.

En desktop quiero cuatro tarjetas por fila.

En tablet dos por fila.

En celular una por fila.

No ocultes ninguna tarjeta.

Primero indícame si puedo resolverlo con Grid Row del Editor de bloques de Waclis. Si requiere CSS, dame únicamente el CSS adicional.

Quitar negrita de títulos

Los nombres utilizan .producto-nombre.

Quiero eliminar la negrita solamente de esos nombres.

No modifiques otros títulos ni párrafos.

Devuélveme el CSS mínimo necesario.

Mostrar texto completo

Los títulos .producto-nombre se muestran con puntos suspensivos.

Quiero eliminar el truncado y permitir que el nombre completo ocupe varias líneas.

No cambies su tamaño ni color.

Devuélveme únicamente las propiedades que debo agregar o reemplazar.

Mejorar una Card

Tengo tarjetas .servicio-card dentro de .servicios-section.

Quiero:
- Border radius 16 px.
- Padding 24 px.
- Sombra muy suave.
- Hover elevándose 4 px.
- Transición de 0,3 s.

No cambies HTML ni agregues JavaScript.

Limita todos los selectores a .servicios-section.

Corregir solo móvil

Este bloque funciona correctamente en desktop.

En celular el contenido se sale horizontalmente.

Te paso el HTML y CSS relacionados.

No modifiques los estilos desktop.

Identifica qué propiedad provoca el overflow y propón la corrección mínima para móvil.

Parte 26: ejemplos de pedidos que conviene evitar

Demasiado general

Haz mi web más moderna.

No define:

• qué sección;

• qué resultado;

• qué puede cambiar.

Sin alcance

Pon todas las imágenes en contain.

Puede afectar imágenes que no querías modificar.

Reescritura innecesaria

Reescribe todo este código.

si solamente necesitas cambiar un Margin.

Sin responsive

Haz tres columnas.

No indica qué debe ocurrir en celular.

Convierte el pedido en una especificación

En lugar de:

Hazlo más lindo.

Puedes decir:

Quiero mantener la estructura actual.

Solamente modifica:

- Border radius;
- Padding;
- sombra;
- Hover.

No cambies colores, textos, imágenes ni Grid.

En móvil debe conservar una tarjeta por fila.

Parte 27: estructura recomendada para cualquier prompt

Puedes utilizar esta plantilla:

CONTEXTO
Estoy trabajando en el Editor de bloques de Waclis.

ELEMENTO
La sección utiliza:
[CLASS / ID]

OBJETIVO
Quiero:
[CAMBIO]

DEBE MANTENERSE
[LO QUE NO DEBE CAMBIAR]

RESPONSIVE
En desktop:
[COMPORTAMIENTO]

En móvil:
[COMPORTAMIENTO]

RESTRICCIONES
No modificar:
[OTRAS SECCIONES / HTML / JS / ETC.]

SALIDA
Devuélveme:
[CSS / HTML / PASOS / SOLO CAMBIOS]

Ejemplo utilizando la plantilla

CONTEXTO
Estoy trabajando en el Editor de bloques de Waclis.

ELEMENTO
La sección utiliza .beneficios-section.
Las tarjetas utilizan .beneficio-card.

OBJETIVO
Quiero que las tarjetas tengan el mismo alto visual y Border radius de 18 px.

DEBE MANTENERSE
Textos, colores, enlaces e imágenes.

RESPONSIVE
Desktop: tres tarjetas por fila.
Mobile: una tarjeta por fila.

RESTRICCIONES
No modificar otras secciones.
No agregar JavaScript.
No utilizar selectores globales.

SALIDA
Devuélveme solamente el CSS necesario.

Parte 28: crear un bloque desde una referencia visual

También puedes proporcionar:

• una captura;

• un boceto;

• una imagen de referencia.

Y pedir:

Quiero crear una sección visualmente similar a esta referencia dentro del Editor de bloques de Waclis.

No necesito que copies textos ni imágenes de la referencia.

Explícame primero cómo construirla mediante Section, Container, Grid Row y Componentes.

Si alguna parte requiere CSS, dame solamente el CSS adicional.

Esto combina IA + herramientas visuales.

Parte 29: no copies código de cualquier sitio directamente

Una IA puede generar código basado en tecnologías o dependencias que no necesitas.

Antes de incorporarlo comprueba si utiliza:

• librerías externas;

• frameworks adicionales;

• JavaScript innecesario;

• recursos remotos.

Para un bloque sencillo normalmente es preferible:

HTML + CSS existente en Waclis

sin agregar dependencias adicionales.

Parte 30: pedir soluciones sin nuevas dependencias

Puedes agregar:

No agregues librerías externas ni nuevas dependencias.

Utiliza únicamente HTML y CSS, salvo que JavaScript sea estrictamente necesario.

Esto ayuda a mantener el bloque más simple.

Parte 31: si la IA propone una librería externa

Pregunta:

¿Puede conseguirse el mismo resultado sin esta dependencia?

En muchos casos:

• transiciones;

• Hover;

• grids;

• animaciones simples;

pueden resolverse sin incorporar una biblioteca adicional.

Parte 32: preservar el contenido dinámico de Waclis

Cuando trabajas sobre bloques ubicados alrededor de:

• Productos;

• Blog;

• Servicios;

• Contacto;

recuerda que existen contenidos administrados dinámicamente por Waclis.

No pidas a la IA que reemplace esos contenidos mediante HTML estático si tu objetivo es solamente complementar la página.

Ejemplo

Quieres agregar un banner encima de Productos.

Trabaja sobre:

Productos → Bloque editable debajo del menú

y crea allí el banner.

No necesitas recrear el catálogo mediante código.

Indícalo en el prompt

Esta sección se encuentra encima del catálogo dinámico de Productos de Waclis.

El CSS debe afectar exclusivamente .productos-banner.

No debe modificar Cards, imágenes ni textos del catálogo.

Parte 33: Header y Footer

Recuerda:

Header y Footer no se editan mediante el Editor de bloques.

Si quieres pedirle a una IA modificaciones sobre esas áreas, deberás trabajar con las herramientas generales de CSS/JS correspondientes de Waclis.

No mezcles ese tipo de personalización con un bloque concreto.

Parte 34: seguridad al modificar bloques complejos

Antes de realizar una modificación importante:

1. identifica la sección;

2. localiza Classes e IDs;

3. conserva el fragmento original;

4. pide cambios limitados;

5. revisa el código;

6. aplica;

7. prueba;

8. guarda cuando el resultado sea correcto.

No trabajes “a ciegas”

Si la IA te entrega:

body * {
    ...
}

y no comprendes por qué necesita un selector tan amplio, no lo apliques automáticamente.

Pregunta:

¿Puedes limitar este selector exclusivamente a mi sección?

Parte 35: qué hacer cuando no entiendes el código generado

Puedes pedir:

Explícame cada selector de este CSS y qué elementos modificará dentro de mi bloque antes de que lo aplique.

O:

¿Este código puede afectar otras partes de la Página web? Señálame qué reglas tienen riesgo de hacerlo.

La IA también puede ayudarte a revisar su propia propuesta.

Parte 36: pedir una segunda revisión

Antes de aplicar un bloque complejo puedes preguntar:

Revisa nuevamente este código.

Comprueba específicamente:
- selectores demasiado generales;
- IDs duplicados;
- responsive;
- overflow horizontal;
- JavaScript innecesario;
- dependencias externas;
- posibles conflictos con otras secciones.

No modifiques el código todavía. Indícame primero los riesgos.

Esto puede descubrir problemas antes de guardar.

Parte 37: no utilices la IA para agregar complejidad innecesaria

Un buen resultado no es necesariamente el que contiene más código.

Por ejemplo:

Título
Texto
Botón

puede construirse perfectamente con componentes visuales.

No necesitas un bloque personalizado enorme solamente porque una IA puede generarlo.

Utiliza IA donde realmente aporta valor

Especialmente para:

• diseños particulares;

• correcciones CSS;

• responsive complejo;

• efectos;

• diagnóstico;

• organización de código;

• explicación;

• optimización de una sección existente.

Parte 38: IA + Editor de bloques es un proceso iterativo

No esperes necesariamente obtener la solución perfecta en un único mensaje.

Un proceso normal puede ser:

PEDIDO
↓
CÓDIGO
↓
PRUEBA
↓
CAPTURA
↓
AJUSTE
↓
NUEVA PRUEBA

La clave es informar con precisión qué funcionó y qué no.

Ejemplo de seguimiento

Perfecto, ahora desktop funciona.

En celular necesito solamente estos cambios:

1. Reducir el Padding lateral.
2. Hacer el título 4 px más pequeño.
3. Mantener la imagen igual.
4. No modificar desktop.

Dame únicamente la media query necesaria.

Esto permite avanzar sin reconstruir lo que ya funciona.

Parte 39: utiliza capturas para explicar diferencias

Puedes indicar:

La primera captura muestra cómo se ve ahora.

La segunda muestra el resultado que quiero conseguir.

Luego proporciona también la Class o código relacionado.

La combinación:

captura + código + descripción

suele dar resultados mucho más precisos.

Parte 40: buenas prácticas al trabajar con IA

Recomendamos:

• describir claramente el objetivo;

• identificar el elemento;

• utilizar Navigator;

• proporcionar Class o ID;

• limitar el scope;

• indicar qué no debe modificarse;

• definir comportamiento móvil;

• pedir cambios pequeños;

• conservar código original;

• revisar selectores;

• evitar reglas globales;

• evitar nuevas dependencias sin necesidad;

• probar siempre;

• utilizar Ver página;

• iterar sobre el código actual.

Checklist antes de aplicar código generado por IA

• Identifiqué exactamente la sección que quiero modificar.

• Conozco su Class o ID.

• El CSS está limitado a esa sección.

• No utiliza selectores globales innecesarios.

• No elimina Classes existentes importantes.

• No duplica IDs.

• No agrega JavaScript sin necesidad.

• No agrega dependencias externas innecesarias.

• No utiliza Width fijo problemático sin motivo.

• Revisé Height y Min Height.

• Revisé media queries.

• Revisé !important.

• El contenido importante sigue visible en celular.

• El Hover no contiene información indispensable.

• Conservé una copia del fragmento original si el cambio es grande.

• Probé desktop.

• Probé tablet.

• Probé celular.

• Probé enlaces y botones.

• Guardé solamente cuando el resultado fue correcto.

• Revisé el resultado mediante Ver página.

Ejemplo completo: mejorar una sección existente con IA

Supongamos que tienes:

SERVICIOS

[ Diseño ] [ Desarrollo ] [ Soporte ]

La estructura utiliza:

servicios-section

y las Cards:

servicio-card

Quieres:

• Cards más modernas;

• Hover;

• mejor móvil.

Paso 1

Selecciona una Card.

Paso 2

Comprueba Navigator.

Paso 3

Revisa Class.

Paso 4

Envía este pedido:

Estoy trabajando con una sección del Editor de bloques de Waclis.

Sección:
.servicios-section

Tarjetas:
.servicio-card

Todo funciona correctamente y no quiero modificar el HTML.

Necesito:

- Border radius 16 px.
- Padding 24 px.
- Sombra suave.
- Hover elevándose 4 px.
- Transición 0,3 segundos.
- En móvil Padding 18 px.

No modifiques otras secciones.
No utilices selectores globales.
No agregues JavaScript.
No agregues dependencias.

Devuélveme solamente el CSS.

Paso 5

Revisa el código.

Paso 6

Agrégalo en:

Varita → CSS

Paso 7

Comprueba desktop.

Paso 8

Comprueba móvil.

Paso 9

Guarda.

Paso 10

Utiliza:

Ver página

Ejemplo completo: crear una nueva sección con IA

Quieres crear:

Marcas destacadas

con seis logotipos.

Prompt

Quiero crear una sección nueva para el Editor de bloques de Waclis.

Objetivo:
Mostrar seis logotipos de marcas.

Desktop:
6 logotipos en una fila.

Tablet:
3 por fila.

Celular:
2 por fila.

Requisitos:
- Los logotipos deben mostrarse completos.
- No deben deformarse.
- Deben utilizar object-fit: contain.
- Fondo blanco.
- Espaciado uniforme.
- Hover muy sutil.
- Cada logotipo puede tener un enlace.

Clases:
La sección principal debe llamarse .marcas-section.
Todas las demás clases deben comenzar con marcas-.

No utilices selectores globales.
No agregues JavaScript.
No agregues librerías externas.

Devuélveme HTML y CSS separados.

Después de recibir el código

Comprueba:

• clases;

• enlaces;

• imágenes;

• responsive;

• scope.

Después incorpóralo y prueba.

Ejemplo completo: pedir una solución visual antes que código

Puedes indicar:

Quiero crear una sección con imagen a la izquierda y contenido a la derecha.

Antes de darme código, explícame cómo construirla utilizando los Componentes visuales del Editor de bloques de Waclis.

Utiliza:
- Section.
- Container.
- Grid Row.
- Grid Columns.
- Image.
- Heading.
- Paragraph.
- Button.

Luego indícame únicamente qué CSS adicional sería necesario para un Hover suave en el botón.

Esto permite aprovechar el Editor de bloques y utilizar IA solamente donde aporta valor.

Qué herramienta de Waclis utilizar según lo que te devuelve la IA

Errores frecuentes

Pedir “mejora este código” sin explicar el objetivo

Define el resultado esperado.

Enviar todo el Code editor

Aísla primero la sección.

No proporcionar Class o ID

La IA puede crear selectores demasiado generales.

Utilizar .card, img, h2 o a sin revisar el alcance

Puede afectar otras partes.

Aceptar JavaScript para un efecto que CSS puede resolver

Pide una solución más sencilla.

Reemplazar todo el HTML para cambiar un color

Utiliza Estilo o CSS.

No explicar qué debe ocurrir en móvil

Siempre incluye responsive cuando sea relevante.

Permitir que la IA elimine Classes existentes

Pueden formar parte de la estructura o funcionamiento.

Aplicar código sin comprender mínimamente qué modifica

Pide una explicación.

Agregar dependencias externas innecesarias

Pregunta si puede resolverse sin ellas.

No conservar el código original antes de un cambio grande

Guarda el fragmento anterior.

Aplicar diez modificaciones simultáneas

Trabaja de forma incremental.

No comprobar otras secciones

Un selector puede haber alcanzado más contenido.

No utilizar Ver página

La validación final debe hacerse también en el frontend.

Flujo recomendado para modificaciones con IA

1. DEFINIR OBJETIVO
↓
2. SELECCIONAR ELEMENTO
↓
3. NAVIGATOR
↓
4. CLASS / ID
↓
5. COPIAR SOLO EL CÓDIGO NECESARIO
↓
6. EXPLICAR QUÉ PUEDE Y NO PUEDE CAMBIAR
↓
7. DEFINIR RESPONSIVE
↓
8. PEDIR CAMBIO MÍNIMO
↓
9. REVISAR CÓDIGO
↓
10. APLICAR
↓
11. PROBAR
↓
12. GUARDAR
↓
13. VER PÁGINA

Flujo recomendado para crear un bloque con IA

1. OBJETIVO
↓
2. BOCETO / REFERENCIA
↓
3. ESTRUCTURA DESKTOP
↓
4. ESTRUCTURA MOBILE
↓
5. DEFINIR CLASS PRINCIPAL
↓
6. DEFINIR PREFIJO DE CLASSES
↓
7. GENERAR HTML / CSS
↓
8. REVISAR SCOPE
↓
9. INCORPORAR EN WACLIS
↓
10. PROBAR RESPONSIVE
↓
11. AJUSTAR
↓
12. GUARDAR
↓
13. VER PÁGINA

En resumen

ChatGPT, Claude y Gemini pueden convertirse en excelentes asistentes para trabajar con el Editor de bloques de Waclis.

Puedes utilizarlos para:

• aprender a utilizar las herramientas visuales;

• modificar CSS;

• corregir responsive;

• crear efectos;

• analizar Classes e IDs;

• solucionar Linked styles;

• modificar HTML;

• diagnosticar errores;

• crear nuevas secciones.

Pero la calidad del resultado depende en gran medida de cómo plantees la solicitud.

Una buena consulta debería incluir:

Contexto + elemento + Class/ID + objetivo + responsive + restricciones + salida esperada.

La regla más importante es:

No entregues más código del necesario ni permitas que la solución alcance más contenido del necesario.

Antes de utilizar IA:

Navigator → Class/ID → identificar alcance.

Al pedir el cambio:

objetivo concreto → restricciones → responsive → cambio mínimo.

Después:

revisar → probar → desktop → tablet → celular → Guardar Cambios → Ver página.

La inteligencia artificial puede acelerar enormemente la personalización de una Página web, pero funciona mejor cuando se combina con una estructura ordenada y con las herramientas propias del Editor de bloques.

De esta manera puedes crear diseños cada vez más avanzados sin perder el control sobre el resto de tu Página web.