ChatGPT, Claude, Copilot o Gemini pueden ayudarte a crear y mejorar secciones dentro del Editor de bloques de Waclis, incluso si no sabes programar.

Puedes comenzar con algo tan simple como:

Quiero una sección moderna para mostrar tres servicios.

O:

Quiero una sección con texto a la izquierda
y una captura del producto a la derecha.

También puedes partir de:

• una captura;

• un boceto;

• una Página web de referencia;

• una idea escrita;

• una sección existente;

• un problema responsive;

• HTML que ya tienes;

• CSS que quieres mejorar.

Pero existe una diferencia enorme entre utilizar IA como:

ASISTENTE DE DISEÑO Y DESARROLLO

y utilizarla como:

GENERADOR DE CÓDIGO PARA PEGAR SIN REVISAR

El primer enfoque puede ayudarte muchísimo.

El segundo puede terminar agregando:

• Bootstrap 5;

• Tailwind;

• React;

• Vue;

• librerías externas;

• otro jQuery;

• JavaScript innecesario;

• cientos de líneas de CSS;

• IDs duplicados;

• selectores globales;

• código difícil de mantener.

Regla principal

Primero utiliza la IA para pensar. Después para construir. Y solamente al final, si hace falta, para programar.

El flujo recomendado

Utilizaremos esta secuencia:

1. IDEA / CAPTURA
↓
2. ANÁLISIS CON IA
↓
3. ARQUITECTURA
↓
4. COMPONENTES WACLIS
↓
5. CONSTRUCCIÓN VISUAL
↓
6. CONTENIDO REAL
↓
7. RESPONSIVE
↓
8. COMPARACIÓN
↓
9. CSS MÍNIMO SI HACE FALTA
↓
10. REVISIÓN DEL CÓDIGO
↓
11. GUARDAR CAMBIOS
↓
12. VER PÁGINA
↓
13. AUDITORÍA FINAL

¿Por qué trabajar de esta manera?

Supongamos que escribes:

Hazme una sección moderna para tres servicios.

Una IA podría devolverte:

<div class="grid grid-cols-3 gap-8">
...
</div>

Eso puede pertenecer a Tailwind.

O:

<div class="row g-4">

pensado para otra versión de Bootstrap.

O incluso:

export default function Services() {
...
}

en React.

Ninguno de esos resultados es necesariamente lo que necesitas

Waclis ya dispone de:

• Section;

• Container;

• Grid Row;

• Heading;

• Paragraph;

• Image;

• Link;

• Card;

• Font Icon;

• Svg Icon;

• componentes interactivos;

• herramientas de Estilo;

• CSS.

Y utiliza:

Bootstrap 4

Primera regla

Indica siempre a la IA que estás trabajando dentro de Waclis y que Waclis utiliza Bootstrap 4.

Un buen contexto inicial

Puedes comenzar una conversación con IA utilizando:

Estoy trabajando en el Editor de bloques de Waclis.

Waclis utiliza Bootstrap 4.

El Editor dispone de:
- Section;
- Container;
- Grid Row;
- Heading;
- Paragraph;
- Image;
- Figure;
- Link;
- Html Button;
- Card;
- Font Icon;
- Svg Icon;
- Tabs;
- Accordeon;
- Carousel;
- Gallery;
- formularios;
- Google Maps;
- Open Street Map;
- Embed Video.

También puedo configurar:
- Typography;
- Width y Height;
- Margin;
- Padding;
- Border;
- Border radius;
- Background;
- estados hover;
- responsive mediante Grid;
- visibilidad por dispositivo;
- animaciones;
- CSS personalizado.

Quiero utilizar primero las herramientas visuales del Editor
y agregar código solamente cuando sea necesario.

No agregues:
- Bootstrap 5;
- Tailwind;
- React;
- Vue;
- jQuery adicional;
- frameworks;
- librerías externas;
salvo que yo lo pida expresamente.

Esto crea una base mucho más segura.

Segunda regla

No comiences solicitando HTML o CSS. Primero explica qué quieres lograr.

Escenario 1: comenzar desde una idea

Supongamos:

Quiero mostrar tres servicios de manera moderna.

Prompt recomendado

Quiero crear una sección en Waclis para mostrar tres servicios.

Cada servicio tendrá:
- icono;
- nombre;
- descripción breve;
- Link opcional.

Primero analiza únicamente:
1. qué estructura recomendarías;
2. qué componentes Waclis utilizarías;
3. cuántas columnas usarías en desktop;
4. cómo debería adaptarse en tablet;
5. cómo debería adaptarse en mobile.

No generes HTML.
No generes CSS.

Una respuesta útil debería parecerse conceptualmente a:

Section
└── Container
    ├── Heading
    ├── Paragraph
    └── Grid Row
        ├── Column
        │   └── Card
        │       ├── Font Icon
        │       ├── Heading
        │       ├── Paragraph
        │       └── Link
        │
        ├── Column
        └── Column

Después puedes construirlo visualmente en Waclis

Sin código.

Tercera regla

Haz que la IA traduzca la idea a componentes Waclis antes de generar implementación.

Escenario 2: comenzar desde una captura

Puedes adjuntar una captura a ChatGPT, Claude o Gemini.

En lugar de pedir:

Hazme el código de esto.

utiliza:

Analiza esta captura de una sección que quiero recrear
dentro del Editor de bloques de Waclis.

No quiero copiar su código original.

Waclis utiliza Bootstrap 4.

Primero identifica:
1. Section general;
2. Container;
3. cantidad de columnas;
4. proporción aproximada;
5. componentes visibles;
6. jerarquía de Headings;
7. espacios principales;
8. alineaciones;
9. qué elementos parecen interactivos;
10. cómo debería adaptarse en tablet y celular.

No generes HTML ni CSS todavía.

La IA debería analizar:

ESTRUCTURA

antes que:

IMPLEMENTACIÓN

Escenario 3: comenzar desde una Página web de referencia

Puedes describir o proporcionar la referencia.

El objetivo debe ser:

recrear la lógica visual

No:

copiar el sitio completo

Prompt

Quiero utilizar esta sección únicamente como referencia visual.

Necesito recrear:
- estructura;
- proporciones;
- jerarquía;
- espaciado;
- tratamiento responsive.

No quiero copiar:
- textos;
- imágenes;
- logos;
- HTML;
- CSS;
- JavaScript;
- frameworks externos.

Tradúcela conceptualmente a componentes Waclis.

Escenario 4: comenzar desde un boceto

Incluso un esquema simple sirve.

Por ejemplo:

-----------------------------------
|      TÍTULO                      |
|      descripción                 |
|                                 |
|  [CARD] [CARD] [CARD]           |
|                                 |
|         [BOTÓN]                 |
-----------------------------------

Prompt

Este es mi boceto:

[pegar]

Tradúcelo a una jerarquía de componentes del Editor de bloques de Waclis.

Waclis utiliza Bootstrap 4.

Indica:
- Section;
- Container;
- Grid Row;
- Columns;
- componentes internos.

No generes código.

Escenario 5: comenzar desde contenido

También puedes empezar por:

estos son mis textos reales

Por ejemplo:

Servicio 1:
Diseño de Página web
...

Servicio 2:
...

Servicio 3:
...

Prompt

Estos son los tres servicios reales:

[pegar]

No inventes funcionalidades.

Analiza:
- longitud de cada título;
- longitud de cada descripción;
- equilibrio entre Cards;
- si conviene usar 3 columnas desktop;
- cómo adaptarlas en tablet/mobile.

No reescribas el contenido todavía.

La IA puede ayudarte antes de diseñar

Esto evita construir una grilla pensando en:

títulos cortos

cuando luego uno mide:

dos o tres líneas

Escenario 6: pedir ayuda para redactar contenido

La IA puede ayudarte a:

• resumir;

• ordenar;

• mejorar claridad.

Pero debes proporcionarle información real

Prompt:

Estos son los datos reales de mi servicio:

[datos]

Necesito para una Card:
- Heading máximo 6 palabras;
- Paragraph máximo 30 palabras;
- CTA máximo 4 palabras.

No inventes:
- características;
- beneficios;
- precios;
- resultados;
- tiempos;
- garantías.

Esto es mucho más seguro que:

Escríbeme algo vendedor.

Cuarta regla

Cuando utilices IA para redactar contenido comercial, indica expresamente qué no puede inventar.

Por ejemplo

No inventes:
- clientes;
- cifras;
- funcionalidades;
- descuentos;
- testimonios;
- resultados;
- urgencia.

IA y Heading

Puedes pedir:

Este es el mensaje que necesito comunicar:

[describir]

Genera 5 opciones de H2.

Máximo 8 palabras.
Español neutro.
No agregues afirmaciones que no estén presentes en los datos.

Después eliges tú.

IA y Paragraph

Este es mi H2:

[...]

Estos son los datos reales:

[...]

Redacta un Paragraph de máximo 35 palabras
que amplíe el Heading sin repetirlo.

No agregues información nueva.

IA y CTA

La acción real es:

[describir]

El destino es:
[URL / formulario / WhatsApp / otra sección]

Propón 5 textos de CTA de máximo 4 palabras.

El CTA debe describir correctamente lo que ocurrirá.

Ejemplo

Acción real:

abre WhatsApp

Buen resultado:

CONTACTAR POR WHATSAPP

Mal resultado:

COMPRAR AHORA

si la compra no ocurre allí.

Quinta regla

La IA puede mejorar el CTA, pero debe conocer la acción real.

IA para definir jerarquía H1/H2/H3

Esta página tiene estas Sections:

[listar]

Actualmente utilizo estos Headings:

[listar]

Propón una jerarquía H1/H2/H3.

No cambies el tamaño visual.
Analiza únicamente estructura semántica.

Recuerda

H1 / H2 / H3

no son simplemente tamaños.

IA para elegir Section prediseñada o construcción manual

Quiero crear este contenido:

[describir]

En Waclis tengo secciones prediseñadas como:
- Beneficios;
- Servicios;
- Texto e imagen;
- Portafolio;
- CTA;
- FAQ;
- Testimonios.

Analiza si conviene:
1. comenzar desde una sección prediseñada;
2. construir desde Section + componentes.

Explica el motivo.
No generes código.

IA para decidir entre Gallery, Portfolio y Cards

Contenido que necesito mostrar:

[describir]

Analiza si conviene utilizar:
- Gallery;
- Portfolio;
- Cards personalizadas.

Considera:
- cantidad de texto;
- importancia de Image;
- existencia de Links individuales.

No generes código.

IA para decidir Image vs Background

Tengo esta imagen:

[describir]

Debe cumplir esta función:
[describir]

Analiza si conviene:
- Image;
- Background Image.

Considera:
- si contiene información;
- recorte responsive;
- accesibilidad.

No generes CSS.

IA para decidir Cover vs Contain

Esta imagen es:
[captura / fotografía / logo / producto]

Necesito mostrarla dentro de:
[describir contenedor]

Analiza si conviene:
- Cover;
- Contain.

Explica qué podría recortarse o qué espacio podría aparecer.

IA para planificar Grid

Quiero esta composición:

Desktop:
texto aproximadamente 60%
imagen aproximadamente 40%.

Waclis utiliza Bootstrap 4.

Puedo utilizar:
6+6
7+5
5+7

Indica la proporción más apropiada.

También propón:
- tablet;
- mobile.

No generes CSS.

IA para tres Cards

Tengo tres Cards con:
- icono;
- H3;
- 30 palabras;
- Link.

Necesito:
desktop 3 columnas;
tablet 2;
mobile 1.

Waclis utiliza Bootstrap 4.

Explícame conceptualmente los tamaños de Columns.
No generes CSS.

IA para seis Cards

Tengo 6 Cards.

Analiza si conviene:
Desktop: 3 + 3
Tablet: 2 + 2 + 2
Mobile: 1

Cada Card contiene:
[...]

No generes código.

IA para orden mobile

Uno de los usos más importantes.

Prompt:

En desktop tengo:

IMAGE | TEXT

Pero quiero que en mobile se lea:

TEXT
IMAGE

Estructura actual:
[describir]

Waclis utiliza Bootstrap 4.

Indica la estrategia más simple.

Prioriza:
1. orden real del documento;
2. Grid Row;
3. Direction.

Evita:
- duplicar contenido;
- JavaScript;
- Position absolute.

IA para verificar si la arquitectura ya es correcta

Después de construir visualmente:

Esta es la jerarquía actual en Navigator:

[pegar]

Objetivo visual:
[describir]

Comprueba:
- wrappers innecesarios;
- Containers duplicados;
- Grid incorrecto;
- elementos fuera de la Column correspondiente.

No generes código.

IA para analizar una captura de tu versión

Puedes tomar una captura desde Waclis y pedir:

Esta es mi versión actual.

Objetivo:
[describir]

Analiza visualmente:
1. jerarquía;
2. proporciones;
3. espacios;
4. alineación;
5. equilibrio.

No generes CSS todavía.
Indica solamente las cinco correcciones de mayor impacto.

Esta técnica es especialmente útil

porque la IA puede detectar:

• columna desbalanceada;

• Heading demasiado grande;

• espacios inconsistentes;

• CTA con poco protagonismo.

IA para comparar referencia vs Waclis

Adjunta:

1. captura de referencia;

2. captura de Waclis.

Prompt

Imagen 1:
referencia.

Imagen 2:
mi reproducción en Waclis.

No busco pixel-perfect.

Compara en este orden:
1. estructura;
2. proporciones;
3. jerarquía;
4. espaciado;
5. alineaciones;
6. imágenes;
7. detalles.

Devuélveme las diferencias ordenadas por impacto.

No generes código.

No empieces comparando

Border radius

si:

la proporción de columnas es incorrecta

Sexta regla

Pídele a la IA que priorice diferencias estructurales antes de detalles decorativos.

IA para analizar responsive mediante capturas

Puedes enviar:

• desktop;

• tablet;

• mobile.

Prompt

Estas son tres capturas de la misma Section:

1. desktop;
2. tablet;
3. mobile.

Analiza:
- qué comportamiento es correcto;
- dónde se comprime demasiado;
- dónde debería apilarse;
- posibles desbordamientos;
- orden de lectura.

No generes código todavía.

IA para detectar scroll horizontal

En mobile aparece scroll horizontal.

Jerarquía:
[...]

CSS:
[...]

Busca en este orden:
1. Grid;
2. width;
3. min-width;
4. margin;
5. padding;
6. position;
7. transform;
8. white-space;
9. iframe/image.

No propongas overflow-x:hidden como solución.

IA para detectar espacio excesivo

Existe un espacio vertical demasiado grande entre estas dos Sections.

Datos:
- Padding bottom Section A: [...]
- Margin final: [...]
- Padding top Section B: [...]
- Min Height: [...]

Analiza qué valores están acumulando el espacio.

No uses Margin negativo como primera solución.

IA para Heading mobile

Este H2 se ve bien en desktop
pero ocupa demasiadas líneas en mobile.

Datos:
- texto;
- ancho de Column;
- Max Width;
- Font size;
- Line height;
- Letter spacing.

Analiza en ese orden.

No cambies H2 por otro nivel.

IA para CTA mobile

Este CTA sale de pantalla.

Texto:
[...]

Padding:
[...]

Width:
[...]

Contenedor:
[...]

Analiza primero:
1. longitud del texto;
2. ancho;
3. Padding;
4. white-space.

No generes código todavía.

IA para detectar Position absolute

En desktop una Image está superpuesta de forma correcta,
pero en mobile tapa el texto.

HTML:
[...]

CSS:
[...]

Identifica:
- Position;
- Top/Left/Right/Bottom;
- Transform;
- z-index.

Primero evalúa si puede reconstruirse mediante Grid.

IA para Linked styles

Modifiqué esta Card y cambiaron otras cinco.

El Editor muestra Linked styles.

Selector:
[pegar]

Explícame:
- por qué se comparten;
- si conviene mantener la Class;
- cuándo debería agregar una variante;
- cuándo realmente necesitaría un ID.

No generes CSS todavía.

IA para crear una variante

Tengo una Class base:

.service-card

Todas las Cards deben compartir:
- Padding;
- Border radius;
- Typography.

Solo una debe tener un Background diferente.

Propón una Class adicional de variante.

No utilices ID para el estilo.

IA para detectar IDs duplicados

Cloné esta Section varias veces.

HTML:
[...]

Busca únicamente:
- IDs duplicados;
- href internos afectados;
- relaciones que dependan de esos IDs.

No modifiques nada todavía.

IA para revisar Card clonada

Card original:
[...]

Card clonada:
[...]

Busca contenido que no haya sido actualizado:
- Image;
- Alt;
- Heading;
- Paragraph;
- Link;
- href;
- ID;
- Category.

No inventes reemplazos.

Cuándo pedir CSS a la IA

Solamente después de haber comprobado:

¿PUEDO RESOLVERLO CON:
CONTENIDO?
GRID?
ESTILO?
AVANZADO?

Si la respuesta es:

no

puedes pedir CSS.

Séptima regla

CSS debe resolver una diferencia concreta, no reconstruir todo lo que ya puede hacer el Editor.

Mal prompt

Hazme el CSS completo para que quede moderno.

Mejor

Esta Section ya está construida y funciona.

Class raíz:
.services-section

Necesito únicamente:
1. aumentar ligeramente la separación entre Cards;
2. crear un Hover sutil;
3. reducir el Padding vertical en mobile.

No cambies:
- estructura;
- Bootstrap Classes;
- otras Sections.

Waclis utiliza Bootstrap 4.

No agregues:
- JavaScript;
- frameworks;
- librerías.

Devuélveme únicamente CSS localizado.

Cuanto más limitado el pedido

más control tendrás.

IA para CSS localizado

Class raíz:
.custom-business-section

Elementos:
.custom-business-title
.custom-business-image
.custom-business-cta

Necesito:
[describir]

Restricciones:
- todo debe comenzar desde .custom-business-section;
- no modificar tags globales;
- no modificar Bootstrap globalmente;
- Bootstrap 4;
- no JavaScript.

Devuelve solamente CSS.

Evita que genere:

h2 { ... }
img { ... }
a { ... }
.row { ... }
.container { ... }

sin scope.

IA para revisar CSS antes de pegarlo

Esto es muy recomendable.

Prompt

Antes de utilizar este CSS en Waclis:

[pegar]

Audítalo.

Busca:
- selectores globales;
- Bootstrap modificado globalmente;
- width fija;
- height fija;
- min-width;
- margin negativo;
- position:absolute;
- position:fixed;
- transform;
- overflow;
- !important;
- media queries.

Indica:
1. qué es seguro;
2. qué podría afectar otras Sections;
3. qué debería localizarse.

No reescribas todavía.

IA para detectar Bootstrap 5

Revisa este código antes de usarlo en Waclis.

Waclis utiliza Bootstrap 4.

Busca:
- Classes propias de Bootstrap 5;
- utilidades incompatibles;
- atributos de componentes que correspondan a otra versión.

No lo conviertas todavía.
Solo marca los riesgos.

IA para detectar Tailwind

Revisa este HTML generado por IA.

Indica si contiene:
- Tailwind;
- Classes utilitarias externas;
- dependencias que Waclis no tiene.

Waclis utiliza Bootstrap 4.

No modifiques nada.

IA para detectar frameworks

Revisa este código:

[pegar]

Busca dependencias de:
- React;
- Vue;
- Angular;
- Tailwind;
- Bootstrap 5;
- Alpine;
- jQuery adicional;
- librerías de animación.

Necesito una implementación nativa y simple en Waclis.

IA para detectar CDNs

Revisa este código generado.

Busca:
<script src>
<link href>
@import
CDNs
fuentes externas
librerías.

Indica si alguno es realmente imprescindible
para la Section que quiero crear.

No elimines nada todavía.

IA para simplificar CSS

Este CSS funciona:

[pegar]

Quiero mantener exactamente el comportamiento,
pero reducir complejidad.

Busca:
- reglas duplicadas;
- propiedades por defecto;
- selectores redundantes;
- media queries repetidas.

No cambies el resultado visual.

IA para reducir !important

Este CSS contiene varios !important:

[pegar]

Analiza si pueden reemplazarse mediante:
- scope;
- selector más específico;
- mejor estructura.

No agregues más !important.

IA para detectar tamaños rígidos

Revisa este CSS responsive:

[pegar]

Marca:
- width en px;
- min-width;
- height fija;
- min-height;
- left/right en px;
- margin lateral grande.

Explica cuáles podrían romper tablet/mobile.

IA para generar media query mínima

Si ya confirmaste que hace falta:

Esta Section funciona en desktop.

Solo necesito reducir:
- Padding vertical;
- tamaño visual del H2;

en pantallas pequeñas.

Class raíz:
.custom-section

Waclis utiliza Bootstrap 4.

Genera una única media query localizada.

No cambies otras propiedades.

Ejemplo posible

@media (max-width: 576px) {
    .custom-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

No necesitas:

cinco breakpoints

para un solo ajuste.

IA para elegir si realmente hace falta CSS

Necesito conseguir este resultado:

[describir]

Herramientas disponibles en Waclis:
- Grid Row;
- responsive por Column;
- Typography;
- Margin;
- Padding;
- Width;
- Max Width;
- Position;
- Hover.

Indica si puede resolverse visualmente.

Solo si no puede, explica qué CSS faltaría.

No generes código todavía.

Este es uno de los mejores prompts para evitar código innecesario

Cuándo pedir HTML

Mucho menos frecuentemente que CSS.

Puede ser útil cuando:

• necesitas comprender una estructura;

• corregir un wrapper;

• crear algo que los componentes no permiten fácilmente.

Pero primero:

selecciona solamente el elemento

y utiliza:

Editar código HTML <>

Copia ese fragmento.

No copies toda la página.

IA para analizar HTML seleccionado

Este es el HTML de una única Section Waclis:

[pegar]

No quiero modificarlo todavía.

Identifica:
- Section;
- Containers;
- Row;
- Columns;
- componentes;
- Classes;
- IDs;
- estilos inline.

Waclis utiliza Bootstrap 4.

Busca wrappers innecesarios o estructuras que podrían dificultar responsive.

IA para modificación mínima de HTML

Este HTML pertenece a una Section Waclis:

[pegar]

Necesito únicamente:
[describir cambio estructural]

No cambies:
- textos;
- Links;
- IDs salvo necesidad;
- Classes funcionales;
- otras estructuras.

Waclis utiliza Bootstrap 4.

Devuelve:
1. qué cambiarías;
2. después el HTML modificado.

Octava regla

Cuando utilices IA para editar HTML, limita el alcance a una Section o componente específico.

Nunca:

reescribe todo el HTML de mi Página web

para modificar una Card.

IA y formularios

Debemos ser especialmente cuidadosos.

Un Form puede contener:

• Names;

• IDs;

• Types;

• atributos funcionales.

Prompt seguro

Este formulario de Waclis ya funciona:

[pegar Form]

Necesito modificar únicamente su diseño.

Identifica primero:
- Name;
- Id;
- Type;
- Button;
- atributos del Form;
- atributos funcionales.

No modifiques ninguno.

Después:

Necesito CSS para:
- Border;
- Padding;
- espacios;
- Button.

Class raíz:
.contact-section

No cambies HTML.
No cambies Names.
No cambies Types.
No agregues JavaScript.

Nunca pidas:

Haz que este formulario envíe emails con JavaScript.

sin comprender el procesamiento necesario.

JavaScript del navegador:

NO sustituye automáticamente un backend seguro

IA y secretos

Nunca pegues:

• contraseñas;

• tokens privados;

• API secrets;

• claves privadas;

dentro de:

• HTML;

• JavaScript público.

Tampoco es necesario compartirlos para pedir ayuda de diseño.

IA para revisar secretos antes de publicar

Revisa este código antes de publicarlo:

[pegar]

Busca valores que parezcan:
- tokens;
- passwords;
- API secrets;
- claves privadas.

No repitas los secretos completos en tu respuesta.
Solo indica su ubicación.

IA y componentes interactivos

Si quieres Tabs:

no pidas:

haz Tabs con JavaScript

Primero:

Waclis ya dispone de Tabs.

Tengo este contenido:
[...]

Explícame cómo organizarlo usando el componente Tabs.
No generes JavaScript.

Lo mismo con:

• Accordeon;

• Carousel;

• Gallery.

Novena regla

No utilices IA para programar desde cero una función que Waclis ya ofrece como componente.

IA y Google Maps

Si quieres una sección de ubicación:

Waclis dispone de Google Maps y Open Street Map.

Necesito:
- dirección;
- información;
- mapa;
- Link Cómo llegar.

Propón una arquitectura de Section.

No generes una API de mapas ni JavaScript.

IA y Video

Waclis dispone de Embed Video.

Quiero una Section con:
texto + video.

Propón Grid y responsive.

No generes iframe manual si el componente puede resolverlo.

IA y Lottie

Tengo una animación Lottie.

Analiza si conviene:
- utilizarla como complemento;
- sustituirla por una Image estática.

Considera:
- importancia del mensaje;
- rendimiento;
- mobile.

No generes código.

IA y accesibilidad

Puedes pedir una auditoría específica.

Prompt

Revisa esta Section:

[estructura/contenido]

Analiza:
- jerarquía de Headings;
- Alt de Images;
- texto de Links;
- contraste conceptual;
- contenido dependiente de iconos;
- información oculta en Hover.

No modifiques todavía.

IA para Alt

Imagen:
[describir con precisión]

Contexto de la Section:
[...]

Propón un Alt breve que describa la información útil de la imagen.

No utilices:
“imagen de”
salvo que sea necesario para comprender.

IA para Links accesibles

Estos son mis Links:

[listar]

Marca textos poco descriptivos como:
- Haz clic aquí;
- Ver más;
- Más.

Propón alternativas solamente usando el contexto proporcionado.

IA y responsive: método correcto

No pidas:

Hazlo responsive.

Es demasiado amplio.

Explica:

Desktop:
3 Cards.

Tablet:
quiero 2.

Mobile:
quiero 1.

Problema actual:
tablet mantiene 3.

La respuesta será mucho más útil.

Décima regla

Describe el comportamiento esperado por dispositivo, no solamente “hazlo responsive”.

IA para diagnosticar, no adivinar

Si algo se rompe:

proporciona:

• síntoma;

• estructura;

• CSS relacionado.

No:

No funciona, arréglalo.

Mejor:

En mobile aparece scroll horizontal.

Solo ocurre en esta Section.

Navigator:
[...]

CSS:
[...]

La Image sobresale a la derecha.

Diagnostica primero.
No modifiques todavía.

IA para diferenciar problema visual de funcional

Ejemplo:

El Button se ve bien pero no navega.

Componente:
Html Button.

Objetivo:
ir a /contacto.

Analiza si el problema es visual o semántico/funcional.

No agregues JavaScript automáticamente.

Una posible conclusión:

Para navegación conviene utilizar Link.

Es mucho mejor que crear:

onclick = ...

sin necesidad.

IA para detectar “parches”

Este CSS solucionó visualmente el problema:

[pegar]

Comprueba si:
- oculta overflow;
- utiliza margin negativo;
- position absolute;
- width fija;
- !important;
sin eliminar la causa original.

Clasifica:
- solución real;
- posible parche.

IA para revisar antes y después

Adjunta:

• captura anterior;

• captura corregida.

Prompt

Compara estas capturas.

Antes:
[...]

Después:
[...]

Comprueba:
- si desapareció el problema;
- si se cortó contenido;
- si se redujo demasiado Typography;
- si desapareció algún elemento;
- si la estructura sigue coherente.

No generes código.

IA para auditoría de Bootstrap 4

Al final de cualquier desarrollo con código:

Audita este HTML/CSS antes de usarlo en Waclis.

Waclis utiliza Bootstrap 4.

Busca:
1. Classes de Bootstrap 5;
2. dependencias externas;
3. Tailwind;
4. frameworks;
5. JavaScript innecesario;
6. CSS global;
7. IDs duplicados;
8. tamaños rígidos;
9. Position absolute excesivo.

No corrijas todavía.

IA para revisión de dependencias

Este código funciona en una demo externa:

[pegar]

Necesito saber qué depende de:
- CSS externo;
- JavaScript;
- librerías;
- fuentes;
- frameworks.

No quiero copiar dependencias innecesarias.

Clasifica:
- imprescindible;
- reemplazable con herramientas Waclis;
- innecesario.

IA para convertir código externo en conceptos

Este código pertenece a un diseño externo:

[pegar]

No quiero reutilizarlo.

Extrae solamente:
- número de columnas;
- orden;
- alineación;
- spacing;
- componentes;
- Hover;
- responsive.

Después traduce esos conceptos a herramientas Waclis.

No devuelvas el código original.

IA y personalización de una Section prediseñada

Supongamos que utilizaste:

Servicios

Puedes pedir:

Tengo una sección prediseñada de Servicios en Waclis.

Estructura actual:
[describir]

Necesito acercarla a esta referencia:
[describir]

Analiza:
1. qué puedo cambiar con Estilo;
2. qué puedo cambiar mediante Grid;
3. qué requeriría CSS.

No generes código todavía.

Esto evita reconstruir una Section que ya tienes.

IA para mejorar una Section sin cambiar estructura

Mi estructura ya funciona correctamente.

Quiero mejorar solamente:
- jerarquía;
- espacios;
- contraste;
- CTA.

No propongas:
- nuevos componentes;
- nuevo Grid;
- JavaScript.

Analiza primero.

IA para modernizar diseño

Evita:

Hazlo moderno.

“Moderno” puede producir cualquier cosa.

Mejor:

Quiero mejorar esta Section manteniendo una estética:
- limpia;
- profesional;
- pocos efectos;
- espacios generosos;
- Border radius moderado;
- sombras sutiles;
- buena lectura.

No quiero:
- gradientes excesivos;
- glassmorphism;
- neón;
- animaciones permanentes.

Analiza qué cambiarías.
No generes CSS todavía.

Define tú qué significa “moderno”

IA para diseño de alta calidad

Puedes describir:

Necesito que se vea premium,
pero sobrio y profesional.

Prioriza:
1. composición;
2. Typography;
3. espacios;
4. imágenes;
5. detalles.

No agregues efectos solamente para llamar la atención.

IA para detectar exceso visual

Esta Section utiliza:
- sombra;
- gradiente;
- borde;
- Glow;
- Hover;
- animación;
- decoración.

Analiza qué elementos son redundantes.

Quiero conservar el impacto con menos recursos visuales.

IA para crear variantes

Supongamos una Card base.

Prompt

Tengo:

.service-card

Necesito tres variantes de contenido,
pero todas deben compartir el mismo diseño.

Indica qué debe mantenerse en la Class común
y qué debería variar únicamente mediante contenido.

No generes tres CSS distintos.

Esto evita:

.service-card-1
.service-card-2
.service-card-3

con reglas repetidas.

IA para una Card destacada

Tengo:
.service-card

Una sola Card debe aparecer destacada mediante:
- Background diferente;
- Border distinto.

Propón una Class de variante.

No dupliques todos los estilos base.

Resultado conceptual:

service-card
service-card-featured

IA para detectar duplicación CSS

Revisa estas Classes:

[pegar CSS]

Busca propiedades idénticas repetidas entre:
- card-a;
- card-b;
- card-c.

Propón una base compartida y variantes.

No cambies el resultado visual.

IA para componentes personalizados

Si existe un componente personalizado:

no asumas su funcionamiento.

Prompt:

Tengo este componente personalizado en Waclis:

[nombre + HTML si corresponde]

Analiza:
- estructura;
- contenido;
- Classes;
- comportamiento visible.

No inventes funcionalidad que el código proporcionado no demuestre.

IA para código desconocido

Cuando encuentras algo que no comprendes:

Este fragmento ya existe y funciona:

[pegar]

Explícame línea por línea únicamente:
- qué elemento representa;
- qué Classes utiliza;
- qué propiedades afectan layout;
- qué propiedades afectan apariencia.

No propongas cambios.

Antes de eliminar algo desconocido

puedes entenderlo.

IA para cambios pequeños

Este es el uso más seguro.

Ejemplo:

Necesito que esta Card tenga 8px menos de Padding vertical en mobile.

Class:
.card-x

Genera únicamente esa regla.
No cambies nada más.

En lugar de:

Mejora todo el CSS.

Undécima regla

Cuanto más específico sea el cambio solicitado a la IA, menor será el riesgo de alterar otras partes.

IA para revisar alcance

Quiero aplicar este CSS:

[pegar]

Class raíz esperada:
.custom-section

Comprueba si absolutamente todas las reglas
están limitadas a esa Section.

Marca las que puedan escapar del scope.

IA para detectar CSS que afecta Header/Footer

Desde que agregué este CSS,
el Header o Footer cambió:

[pegar]

Busca selectores globales sobre:
- a;
- img;
- p;
- ul;
- nav;
- .container;
- .row.

Explica cuál podría ser responsable.

IA para detectar CSS que afecta productos

Este CSS se creó para una Landing,
pero también cambió las Cards de productos.

[pegar]

Busca especialmente:
.card
img
button
a
.row
.col

No modifiques todavía.

IA para auditoría de media queries

Revisa estas media queries:

[pegar]

Busca:
- mismas reglas repetidas;
- breakpoints muy próximos;
- valores contradictorios;
- reglas que Grid podría resolver.

Waclis utiliza Bootstrap 4.

IA para simplificar responsive

Actualmente tengo 7 media queries para esta Section:

[pegar]

Objetivo responsive:
Desktop:
[...]

Tablet:
[...]

Mobile:
[...]

Analiza si puede simplificarse usando:
- Grid Row;
- Sizes de Columns;
- una o dos media queries solamente.

No reescribas todavía.

IA para detectar mala estrategia responsive

En mobile solucioné el diseño con:
- font-size muy pequeño;
- elementos ocultos;
- overflow hidden.

Analiza si realmente corregí el layout
o solamente escondí los síntomas.

No generes código.

IA y Bootstrap Classes

No copies automáticamente una sugerencia.

Si la IA propone:

gap-4

pregunta:

¿Esta Class existe en Bootstrap 4?

O mejor:

Reescribe la recomendación utilizando solamente
Classes compatibles con Bootstrap 4
o CSS localizado cuando la utilidad no exista.

IA para verificar una Class

¿Esta Class corresponde a Bootstrap 4?

[nombre]

Si no corresponde,
indica cómo lograr conceptualmente el mismo resultado
sin agregar Bootstrap 5.

IA y frameworks externos

Si devuelve:

class="grid grid-cols-3"

puedes responder:

No utilizo Tailwind.

Traduce esta estructura a:
- Grid Row;
- Columns;
- Bootstrap 4.

No agregues ningún framework.

Si devuelve React

No utilizo React.

Describe únicamente el HTML estructural
y los componentes equivalentes de Waclis.

IA y componentes Bootstrap

Recuerda que en el Editor la categoría puede aparecer identificada actualmente como:

Bootstrap 5

Pero el entorno de Waclis utiliza:

Bootstrap 4

Cuando hables con la IA:

utiliza:

Bootstrap 4

como referencia técnica.

No copies componentes externos pensando que la etiqueta visible del Editor implica que el sitio funciona sobre Bootstrap 5.

IA y animaciones

Prompt seguro:

Esta Section ya funciona sin animaciones.

Quiero agregar un movimiento de entrada sutil.

Waclis dispone de Animate on scroll.

Analiza si puedo utilizar esa función
antes de generar CSS o JavaScript.

En muchos casos:

no necesitas programar nada.

IA y Hover

Quiero que esta Card tenga un Hover sutil.

Waclis permite State: hover.

Propón qué propiedades visuales modificar:
- sombra;
- Border;
- Background;
- transform.

No generes CSS todavía.

Después puedes hacerlo visualmente.

IA para comprobar si Hover comunica falsa interacción

Esta Card no es clicable.

Quiero agregar Hover.

Analiza si el efecto que describo:
[describir]
puede hacer pensar que toda la Card es clicable.

No generes código.

IA y animaciones mobile

Esta animación funciona desktop
pero en mobile desplaza demasiado el contenido.

Analiza si conviene:
- reducirla;
- desactivarla en mobile;
- sustituirla.

Prioriza estabilidad y legibilidad.

IA y performance

Mi Landing contiene:
- 10 Images;
- 2 Videos;
- 1 mapa;
- 1 Lottie;
- 3 Embeds.

Analiza qué recursos parecen:
- esenciales;
- útiles;
- decorativos.

No elimines nada automáticamente.

IA para Images

Tengo estas imágenes:

[listar tamaños/proporciones]

Se utilizarán en:
[Hero/Cards/Gallery]

Analiza si alguna parece
desproporcionadamente grande para el uso previsto.

No inventes límites de Waclis.

IA para decidir entre imagen y video

Quiero explicar esta funcionalidad:

[describir]

Dispongo de:
- captura;
- video de 40 segundos.

Analiza cuál sería más apropiado
para esta Section y por qué.

Considera:
- comprensión;
- peso;
- mobile.

IA y mantenimiento

Un buen código no solo debe funcionar hoy.

Prompt:

Revisa esta solución:

[HTML/CSS]

Evalúa mantenimiento futuro.

Busca:
- IDs usados para estilos repetidos;
- valores mágicos;
- Position absolute;
- dependencias;
- duplicación;
- selectores frágiles.

No cambies el resultado todavía.

IA para “valores mágicos”

Ejemplo:

left: 347px;
top: -83px;
width: 614px;

Prompt:

Analiza estos valores.

Indica cuáles dependen demasiado de
una resolución o contenido específico.

Propón qué debería resolverse mediante:
- Grid;
- Flex;
- Margin;
- Padding;
- Max Width.

No generes código todavía.

IA para mantenimiento de contenido

Revisa esta Section e identifica contenido temporal:

[texto]

Busca:
- Nuevo;
- promoción;
- fecha;
- año;
- disponibilidad;
- precio;
- “hasta”.

No cambies nada.
Crea solamente una lista de mantenimiento.

IA para detectar afirmaciones no respaldadas

Datos reales:
[pegar]

Texto de la Section:
[pegar]

Marca cualquier afirmación que no pueda
derivarse de los datos proporcionados.

Busca especialmente:
- mejor;
- líder;
- garantizado;
- más vendido;
- resultados;
- porcentajes.

No reescribas todavía.

IA para proyectos

Estos son nuestros proyectos reales:

[datos]

Necesito 3 Cards.

No inventes:
- clientes;
- métricas;
- funcionalidades.

Redacta únicamente usando información suministrada.

IA para testimonios

Estos son testimonios reales:

[pegar]

Necesito adaptarlos a Cards pequeñas.

Acórtalos sin:
- cambiar el significado;
- agregar elogios;
- alterar atribución.

IA para precios

Estos son mis planes reales:

[datos]

Organízalos para una tabla de precios.

No inventes:
- descuentos;
- “más elegido”;
- precios anteriores;
- características.

IA para FAQ

Estas son preguntas reales que recibimos:

[listar]

Agrúpalas y redacta respuestas
utilizando únicamente la información proporcionada.

Si falta una respuesta,
indícalo en lugar de inventarla.

IA para Landing completa

Puedes utilizar IA para planificar,

pero no pidas todo el código.

Prompt recomendado

Quiero planificar una Landing Page en Waclis.

Objetivo:
[...]

Público:
[...]

Producto/servicio:
[...]

Datos reales:
[...]

CTA:
[...]

Propón:
- Sections;
- orden;
- objetivo de cada una;
- componentes Waclis.

No generes HTML.
No generes CSS.
No inventes información.

Después construyes Section por Section.

IA para página institucional

Tengo estas Sections:

[listar]

Analiza:
- orden;
- repeticiones;
- H1/H2/H3;
- CTA;
- contenido redundante.

No rediseñes toda la página todavía.

IA para detectar una Section innecesaria

Estas Sections contienen:

A:
[...]

B:
[...]

C:
[...]

Indica si alguna repite el mismo objetivo
o mensaje de otra.

No elimines automáticamente.

IA para auditoría final de una página

Esta es una página completa creada en Waclis.

Objetivo:
[...]

Estructura:
[...]

Headings:
[...]

CTA:
[...]

CSS:
[...]

Audita:
1. arquitectura;
2. responsive;
3. Headings;
4. Links;
5. CSS global;
6. Bootstrap 4;
7. dependencias externas;
8. mantenimiento.

No reescribas toda la página.

IA y navegador / código externo

Si una IA encuentra un ejemplo de Internet:

no asumas que puedes copiarlo.

Pídele:

Utiliza este ejemplo solo como referencia.

No copies:
- código;
- assets;
- textos.

Extrae la lógica visual y tradúcela a Waclis.

IA y copyright / identidad

Una captura puede servir para:

• estructura;

• composición.

Pero evita pedir:

Cópialo exactamente con sus textos,
logos e imágenes.

Mejor:

Conserva la composición,
pero reemplaza contenido e identidad por los míos.

Duodécima regla

Utiliza IA para adaptar referencias, no para duplicar identidades ajenas.

Caso práctico 1: idea → sección

Idea:

Quiero mostrar tres razones para elegir nuestro servicio.

Paso A: arquitectura

Prompt:

Necesito 3 beneficios.

Cada uno:
- icono;
- H3;
- Paragraph.

Propón componentes y Grid.
No código.

Resultado:

Section
Container
Heading
Grid Row
3 Columns

Paso B: construir en Waclis

Utilizas:

• Section;

• Grid Row;

• Font Icon;

• Heading;

• Paragraph.

Paso C: responsive

Pides:

Desktop 3.
Tablet 2.
Mobile 1.

Explícame tamaños conceptuales.

Paso D: estilo

Solo después:

Quiero Hover sutil.
¿Puedo hacerlo desde State hover?

Sin HTML.

Caso práctico 2: captura → Hero

Adjuntas una captura.

IA analiza:

7 + 5
text/image

Construyes:

Section
Container
Grid Row
Heading
Paragraph
Link
Image

Después comparas mediante capturas.

Solo si falta:

detalle de CSS

lo pides.

Caso práctico 3: CSS generado demasiado complejo

IA devuelve:

180 líneas CSS

para una Card.

No lo pegues.

Pregunta:

Divide este CSS en:

1. reglas que Waclis puede resolver desde Estilo;
2. reglas realmente necesarias;
3. reglas redundantes.

No reescribas todavía.

Después aplicas visualmente:

• Padding;

• Border;

• Background.

Y quizá solo necesitas:

10 líneas

de CSS.

Caso práctico 4: IA genera Bootstrap 5

Recibes:

<div class="row g-4">

Responde:

Waclis utiliza Bootstrap 4.

No utilices Classes exclusivas de Bootstrap 5.

Traduce primero el diseño a componentes
Grid Row y Columns del Editor.

Caso práctico 5: IA genera Tailwind

<div class="grid grid-cols-3 gap-8">

Responde:

No utilizo Tailwind.

Tradúcelo conceptualmente a:
- Grid Row;
- Columns;
- Margin/Padding;
en Waclis con Bootstrap 4.

No generes nuevo HTML todavía.

Caso práctico 6: IA genera JavaScript para navegación

document.querySelector(...).onclick = ...

Pero lo que necesitas es:

ir a /contacto

Solución:

Link

No JavaScript.

Caso práctico 7: IA propone duplicar mobile

crea una Section desktop
+
otra mobile

Responde:

Quiero evitar contenido duplicado.

Propón primero una única estructura responsive
utilizando Grid Row y orden de Columns.

Caso práctico 8: IA arregla overflow ocultándolo

Propone:

body {
    overflow-x:hidden;
}

Responde:

No quiero ocultar el overflow.

Busca el elemento que lo genera.

Analiza:
- width;
- min-width;
- margin;
- position;
- transform.

Caso práctico 9: IA cambia Heading level

Problema:

H2 demasiado grande mobile

IA propone:

usar h4

Corrige:

Mantén H2 por jerarquía.

Necesito modificar solamente el tamaño visual
mediante Typography.

Caso práctico 10: IA inventa una funcionalidad

Texto original:

Gestión de productos.

IA redacta:

Sincroniza automáticamente millones de productos
en tiempo real.

Esto no estaba en los datos.

No lo utilices.

Repite:

Utiliza exclusivamente los datos proporcionados.

Si una afirmación no está respaldada,
no la agregues.

Caso práctico 11: IA inventa testimonio

Nunca publiques:

“Excelente servicio...”
— Cliente X

generado por IA como si fuera real.

Puedes pedir:

Genera un placeholder claramente identificado
como ejemplo interno.

durante el diseño.

Pero debes reemplazarlo antes de publicar.

Caso práctico 12: IA inventa estadísticas

No:

98% satisfacción

si no existe el dato.

Puedes utilizar:

un beneficio cualitativo real

en lugar del Counter.

Caso práctico 13: IA inventa urgencia

No publiques:

ÚLTIMOS 3 CUPOS

simplemente porque mejora una Landing.

La urgencia debe ser real.

Caso práctico 14: IA genera un formulario completo

Antes de pegarlo:

pregunta:

¿Este código solo crea la apariencia
o también necesita backend/procesamiento?

Separa:
- presentación;
- validación;
- envío;
- procesamiento.

Así evitarás pensar:

HTML de Form
=
Form operativo

Caso práctico 15: IA cambia Names de Form

Nunca permitas una “limpieza” automática:

name="email"
→
name="customerEmailAddress"

si el formulario ya funciona.

El procesamiento puede depender del Name.

Indica:

No modificar Name, Id, Type ni atributos funcionales.

Biblioteca de prompts rápidos

Para convertir una idea en arquitectura

Quiero crear esta Section:

[idea]

Waclis utiliza Bootstrap 4.

Tradúcela únicamente a:
Section
Container
Grid Row
Columns
Componentes

No generes código.

Para analizar una captura

Analiza esta captura.

Identifica:
- estructura;
- columnas;
- proporción;
- jerarquía;
- espaciado;
- responsive recomendado.

No generes código.

Para elegir componentes

Tengo esta estructura visual:

[describir]

Indica qué componentes del Editor de bloques de Waclis
utilizarías para cada elemento.

No generes HTML.

Para responsive

Desktop:
[...]

Tablet:
[...]

Mobile:
[...]

Waclis utiliza Bootstrap 4.

Propón tamaños de Grid Row / Columns.

No generes CSS si Grid puede resolverlo.

Para analizar una Section actual

Navigator:

[estructura]

Objetivo:
[...]

Busca:
- jerarquía innecesaria;
- wrappers;
- Grid incorrecto.

No cambies nada todavía.

Para comparar referencia

Compara:
1. referencia;
2. mi versión Waclis.

Prioriza:
estructura
proporción
jerarquía
espacios
alineación

Detalles al final.

No generes código.

Para CSS mínimo

Mi Section ya funciona.

Class raíz:
[...]

Solo necesito:
[...]

Waclis utiliza Bootstrap 4.

Genera el CSS mínimo y localizado.
No JavaScript.
No frameworks.

Para revisar CSS

Audita este CSS antes de usarlo:

[...]

Busca:
- globales;
- tamaños rígidos;
- absolute;
- negativos;
- !important;
- media queries.

No reescribas todavía.

Para diagnosticar overflow

Mobile tiene scroll horizontal.

HTML:
[...]

CSS:
[...]

Encuentra la causa.
No utilices overflow-x:hidden.

Para detectar Bootstrap 5

Waclis utiliza Bootstrap 4.

Busca en este código
Classes o sintaxis que dependan de Bootstrap 5.

No corrijas todavía.

Para detectar dependencias

Busca:
- Tailwind;
- React;
- Vue;
- jQuery;
- CDNs;
- librerías externas.

Clasifica qué puedo reemplazar con Waclis.

Para revisar contenido comercial

Datos reales:
[...]

Texto:
[...]

Marca afirmaciones no respaldadas.
No reescribas todavía.

Para revisar clonación

Original:
[...]

Copia:
[...]

Busca:
- IDs;
- Links;
- Images;
- Alt;
- texto
sin actualizar.

Para accesibilidad

Audita esta Section:

[...]

Revisa:
- Headings;
- Alt;
- Links;
- contenido en Hover;
- contraste conceptual.

No cambies nada.

Para simplificar

Esta solución funciona:

[...]

Busca qué puede eliminarse
sin cambiar el resultado.

Prioriza mantenimiento.

Prompt maestro para crear una nueva Section con IA

Puedes conservar este prompt como plantilla:

Estoy trabajando dentro del Editor de bloques de Waclis.

Waclis utiliza Bootstrap 4.

Quiero crear:
[describir Section]

Contenido real:
[pegar]

Objetivo:
[describir]

Primero necesito únicamente:

1. objetivo de la Section;
2. jerarquía de contenido;
3. estructura:
   Section
   Container
   Grid Row
   Columns
   Componentes;
4. proporción desktop;
5. adaptación tablet;
6. adaptación mobile;
7. qué puede hacerse desde las herramientas visuales de Waclis;
8. qué podría necesitar CSS adicional.

No generes HTML.
No generes CSS.
No agregues:
- Bootstrap 5;
- Tailwind;
- React;
- Vue;
- jQuery;
- librerías externas.

No inventes:
- funcionalidades;
- clientes;
- métricas;
- resultados;
- testimonios;
- precios;
- promociones.

Prompt maestro para mejorar una Section existente

Estoy trabajando en una Section existente del Editor de bloques de Waclis.

Waclis utiliza Bootstrap 4.

Objetivo:
[...]

Navigator:
[...]

Contenido:
[...]

Problema:
[...]

Analiza en este orden:

1. contenido;
2. estructura;
3. Grid;
4. Size;
5. Margin/Padding;
6. Typography;
7. CSS;
8. efectos.

No generes código todavía.

Indica las 5 mejoras de mayor impacto.

Prompt maestro para una captura

Imagen 1:
referencia visual.

Imagen 2:
mi reproducción actual en Waclis.

Quiero conservar:
- estructura;
- proporciones;
- jerarquía;
- ritmo visual.

No necesito pixel-perfect.

Compara:
1. estructura;
2. proporción;
3. Heading;
4. texto;
5. espacios;
6. alineación;
7. visuales;
8. responsive.

No generes código.
Ordena las diferencias por impacto.

Prompt maestro para CSS

Mi estructura Waclis ya está terminada.

Waclis utiliza Bootstrap 4.

Class raíz:
[...]

Necesito únicamente:
[listar diferencias concretas]

Restricciones:

- CSS localizado a la Class raíz;
- no modificar Bootstrap globalmente;
- no utilizar selectores globales;
- no cambiar HTML;
- no agregar Bootstrap;
- no agregar Tailwind;
- no agregar JavaScript;
- no agregar librerías;
- evitar !important;
- evitar Position absolute salvo necesidad real;
- evitar Width/Height rígidos innecesarios.

Devuelve solamente CSS.

Prompt maestro para auditoría antes de pegar código

Voy a utilizar este código dentro de Waclis:

[pegar]

Waclis utiliza Bootstrap 4.

Audita antes de que lo utilice.

Busca:

1. Bootstrap 5;
2. Tailwind;
3. React/Vue;
4. CDNs;
5. jQuery;
6. JavaScript innecesario;
7. selectores CSS globales;
8. Width fija;
9. Height fija;
10. Min Width;
11. Position absolute/fixed;
12. márgenes negativos;
13. !important;
14. IDs duplicados;
15. media queries excesivas.

No lo corrijas todavía.

Devuelve:
- problema;
- riesgo;
- qué debería revisar.

Prompt maestro para diagnóstico responsive

Tengo un problema responsive en Waclis.

Síntoma:
[describir exactamente]

Desktop:
[estado]

Tablet:
[estado]

Mobile:
[estado]

Navigator:
[pegar]

CSS relacionado:
[pegar]

Waclis utiliza Bootstrap 4.

Diagnostica en este orden:

1. Grid;
2. Column sizes;
3. Width / Min Width / Max Width;
4. Height / Min Height;
5. Margin / Padding;
6. Position;
7. Transform;
8. CSS;
9. Linked styles.

No ocultes el problema con overflow.
No generes código hasta identificar la causa.

Errores frecuentes al trabajar con IA

Pedir “hazme una sección moderna”

Da contexto.

Pedir código completo desde el principio

Primero arquitectura.

No decir que Waclis utiliza Bootstrap 4

La IA puede usar otra tecnología.

Copiar Bootstrap 5

Puede generar incompatibilidades.

Copiar Tailwind

No está siendo utilizado como sistema de la página.

Copiar React/Vue

No corresponde al flujo del Editor.

Copiar otro jQuery

Puede generar conflictos.

Agregar CDNs innecesarios

Utiliza componentes existentes.

Agregar una librería por un efecto

Busca primero una herramienta Waclis.

Pedir “hazlo responsive”

Describe desktop/tablet/mobile.

Corregir responsive únicamente con CSS

Revisa Grid primero.

Ocultar overflow

Encuentra el elemento.

Reducir todo en mobile

Apila.

Duplicar contenido desktop/mobile

Intenta una estructura única.

Utilizar Position absolute para maquetar

Grid es más robusto.

Utilizar Margins gigantes

Corrige estructura.

Utilizar Heights fijas

Permite crecimiento.

Dejar selectores globales

Utiliza scope.

Modificar .row

Puede afectar múltiples Sections.

Modificar .card

Puede afectar Services, Projects, Pricing y otras Cards.

Modificar img

Puede afectar todo el sitio.

Modificar a

Puede afectar Header y Footer.

Utilizar demasiados !important

Revisa especificidad.

Pedirle a IA que invente contenido

Proporciona datos reales.

Inventar clientes

No.

Inventar testimonios

No.

Inventar métricas

No.

Inventar descuentos

No.

Inventar urgencia

No.

Inventar funcionalidades

No.

Cambiar Names de un Form

Puede romper procesamiento.

Agregar JavaScript para enviar un Form

Necesitas comprender la integración real.

Colocar secretos en código

Nunca.

Aceptar el primer resultado

Revisa.

No hacer una segunda auditoría

Utiliza IA también como revisora de su propio código.

Flujo profesional recomendado con IA

1. EXPLICAR CONTEXTO WACLIS
↓
2. EXPLICAR OBJETIVO
↓
3. PROPORCIONAR INFORMACIÓN REAL
↓
4. ANALIZAR
↓
5. DEFINIR ARQUITECTURA
↓
6. TRADUCIR A COMPONENTES
↓
7. DEFINIR RESPONSIVE
↓
8. CONSTRUIR VISUALMENTE
↓
9. CARGAR CONTENIDO REAL
↓
10. REVISAR NAVIGATOR
↓
11. TOMAR CAPTURA
↓
12. COMPARAR CON IA
↓
13. CORREGIR GRID / ESTILO
↓
14. IDENTIFICAR QUÉ FALTA
↓
15. PEDIR CSS MÍNIMO
↓
16. AUDITAR CSS
↓
17. APLICAR
↓
18. REVISAR DESKTOP
↓
19. REVISAR TABLET
↓
20. REVISAR MOBILE
↓
21. REVISAR LINKED STYLES
↓
22. REVISAR LINKS
↓
23. REVISAR FUNCIONALIDAD
↓
24. GUARDAR CAMBIOS
↓
25. VER PÁGINA
↓
26. AUDITAR RESULTADO FINAL

Checklist antes de pedir ayuda a una IA

• Sé qué quiero construir.

• Tengo contenido real.

• Sé qué acción debe realizar el CTA.

• Indiqué que trabajo en Waclis.

• Indiqué Bootstrap 4.

• Expliqué qué componentes existen.

• Pedí análisis antes de código.

• Prohibí frameworks innecesarios.

• Prohibí inventar información.

Checklist de arquitectura

• La IA definió Section.

• Definió Container.

• Definió Grid Row cuando corresponde.

• Definió Columns.

• Utilizó componentes existentes.

• No propuso HTML manual innecesario.

• Definió desktop.

• Definió tablet.

• Definió mobile.

• El orden mobile tiene sentido.

Checklist del contenido generado con IA

• Todo deriva de datos reales.

• No inventó características.

• No inventó clientes.

• No inventó resultados.

• No inventó métricas.

• No inventó testimonios.

• No inventó precios.

• No inventó descuentos.

• No inventó urgencia.

• CTA coincide con la acción real.

• Español y tono corresponden al sitio.

Checklist del código generado

• Es realmente necesario.

• No contiene Bootstrap 5.

• No contiene Tailwind.

• No contiene React.

• No contiene Vue.

• No contiene jQuery adicional.

• No contiene CDNs innecesarios.

• No contiene librerías externas innecesarias.

• No contiene scripts innecesarios.

• No modifica Bootstrap globalmente.

• Tiene scope.

• No utiliza selectores globales peligrosos.

Checklist de CSS

• Tiene Class raíz.

• No modifica body sin necesidad.

• No modifica section globalmente.

• No modifica .container globalmente.

• No modifica .row globalmente.

• No modifica .card globalmente.

• No modifica img globalmente.

• No modifica a globalmente.

• No modifica button globalmente.

• No contiene Width fija innecesaria.

• No contiene Min Width problemática.

• No contiene Height fija innecesaria.

• No utiliza Position absolute innecesariamente.

• No utiliza Margin negativo como parche.

• No abusa de !important.

• Media queries son razonables.

Checklist responsive

• Grid fue revisado antes de CSS.

• Desktop funciona.

• Tablet funciona.

• Mobile funciona.

• No existe scroll horizontal.

• Las columnas se apilan correctamente.

• Headings son legibles.

• Images se adaptan.

• CTA no desborda.

• Forms son utilizables.

• No oculté contenido para tapar errores.

• No dupliqué versiones sin necesidad.

Checklist de formularios

• La IA no cambió Name.

• No cambió Type.

• No cambió atributos funcionales.

• No agregó secretos.

• No inventó un backend.

• No simuló éxito.

• Realicé un envío real.

• Comprobé recepción.

Checklist de IA y seguridad

• No compartí contraseñas.

• No compartí tokens privados.

• No pegué secrets en frontend.

• Revisé scripts externos.

• Revisé URLs externas.

• Comprendo qué código voy a pegar.

• No utilicé código ofuscado que no entiendo.

Checklist de mantenimiento

• Las Classes tienen nombres claros.

• No hay IDs utilizados como sistema general de estilos.

• No existe código duplicado innecesariamente.

• La solución puede editarse posteriormente desde Waclis.

• El CSS está limitado.

• No depende de una librería externa por un detalle.

• Podría explicar qué hace cada regla importante.

Checklist final

• La Section fue construida primero visualmente.

• Utilicé IA como asistente y no como caja negra.

• Revisé Navigator.

• Revisé Linked styles.

• Revisé desktop.

• Revisé tablet.

• Revisé mobile.

• Audité el código generado.

• Probé Links.

• Probé componentes interactivos.

• Probé formularios cuando existen.

• Guardé los cambios.

• Utilicé Ver página.

• Revisé la página completa.

• No agregué tecnologías innecesarias.

• El resultado puede mantenerse desde Waclis.

En resumen

La peor forma de utilizar IA con el Editor de bloques es:

“HAZME TODO EL CÓDIGO”
↓
COPIAR
↓
PEGAR
↓
ESPERAR QUE FUNCIONE

La forma recomendada es:

IDEA
↓
ANALIZAR
↓
ARQUITECTURA
↓
COMPONENTES WACLIS
↓
CONSTRUIR VISUALMENTE
↓
COMPARAR
↓
CORREGIR
↓
CÓDIGO MÍNIMO
↓
AUDITAR

Cuando partes de una idea

pide:

¿CÓMO LA ORGANIZO?

No:

¿CUÁL ES EL HTML COMPLETO?

Cuando partes de una captura

pide:

¿QUÉ ESTRUCTURA VES?

Después:

¿CÓMO LA TRADUZCO A WACLIS?

Cuando la sección ya funciona

pide:

¿QUÉ DIFERENCIAS VISUALES QUEDAN?

Después:

¿PUEDO RESOLVERLAS DESDE EL EDITOR?

Y solamente cuando sea necesario:

GENERA EL CSS MÍNIMO

Recuerda siempre:

WACLIS
=
BOOTSTRAP 4

Por lo tanto:

NO AGREGAR AUTOMÁTICAMENTE:
Bootstrap 5
Tailwind
React
Vue
jQuery adicional
frameworks externos

También:

COMPONENTE WACLIS EXISTENTE
>
REPROGRAMARLO DESDE CERO

Y:

GRID ROW
>
POSITION ABSOLUTE

para layout normal.

Y:

CSS LOCALIZADO
>
SELECTORES GLOBALES

Y:

CONTENIDO REAL
>
COPY INVENTADO POR IA

Respecto del responsive:

DIAGNOSTICAR
>
APLICAR PARCHES

Respecto de Forms:

FORM VISIBLE
≠
FORM FUNCIONAL

Respecto de referencias:

REPRODUCIR COMPOSICIÓN
≠
COPIAR CÓDIGO

Y la regla final

IA
→ AYUDA A PENSAR
→ AYUDA A ANALIZAR
→ AYUDA A PROGRAMAR
→ AYUDA A REVISAR

pero:

TÚ
→ DECIDES QUÉ ENTRA EN WACLIS

El flujo definitivo

IDEA / CAPTURA
↓
CONTEXTO WACLIS
↓
ANÁLISIS
↓
ARQUITECTURA
↓
SECTION
↓
CONTAINER
↓
GRID ROW
↓
COMPONENTS
↓
CONTENIDO REAL
↓
RESPONSIVE
↓
ESTILO
↓
CAPTURA
↓
COMPARACIÓN
↓
CSS MÍNIMO
↓
AUDITORÍA
↓
GUARDAR CAMBIOS
↓
VER PÁGINA
↓
PRUEBA REAL

Estás utilizando correctamente la IA cuando puedes decir:

“La IA me ayudó a analizar, estructurar, mejorar y resolver diferencias concretas, pero la sección sigue construida con las herramientas de Waclis, utiliza Bootstrap 4, no depende de tecnologías innecesarias y puedo comprender y mantener el resultado.”

Ese es el objetivo.

No obtener la mayor cantidad posible de código.

Obtener la solución más clara, estable, compatible y mantenible posible dentro de Waclis.