Cuando encuentras una sección que te gusta en una captura, diseño o Página web de referencia, es normal querer utilizar una composición similar en tu propia Página web.

Por ejemplo:

┌──────────────────────────────────────────────────────┐
│                                                      │
│  PEQUEÑO TEXTO                     [ IMAGEN ]         │
│                                                      │
│  Título grande                                        │
│                                                      │
│  Descripción breve                                    │
│                                                      │
│  [ CTA PRINCIPAL ]   CTA secundario →                │
│                                                      │
└──────────────────────────────────────────────────────┘

El error más común es pensar:

“Necesito copiar el código de esa sección.”

En la mayoría de los casos, no.

Lo que realmente necesitas reproducir es:

• la estructura;

• las proporciones;

• la jerarquía;

• los espacios;

• el tratamiento visual;

• el comportamiento responsive;

• la intención del diseño.

No necesariamente:

• el HTML original;

• sus Classes;

• su framework;

• sus scripts;

• sus librerías;

• sus efectos;

• sus dependencias.

Primera regla

Copia la lógica visual. No copies ciegamente la implementación técnica.

¿Por qué?

Una referencia puede estar construida con:

• Bootstrap 5;

• Tailwind;

• React;

• Vue;

• Webflow;

• Elementor;

• CSS Grid personalizado;

• JavaScript;

• librerías de animación;

• componentes propios.

Waclis utiliza:

Bootstrap 4

y dispone de su propio:

• Editor de bloques;

• Section;

• Container;

• Grid Row;

• componentes;

• Estilo;

• CSS.

Por eso:

MISMO RESULTADO VISUAL

no significa:

MISMO CÓDIGO

Ejemplo

Una referencia externa puede utilizar:

<div class="grid grid-cols-2 gap-12 items-center">

Eso puede pertenecer a otro sistema.

No necesitas instalar ese sistema en Waclis.

Puedes traducir la idea:

2 columnas
+
separación
+
alineación vertical

a:

Section
↓
Container
↓
Grid Row
↓
Column
+
Column

Ese proceso de traducción es la base de este tutorial

¿Qué fuentes puedes utilizar como referencia?

Puedes partir de:

• una captura de pantalla;

• un diseño de Figma;

• una maqueta;

• una imagen;

• una sección de otra Página web;

• una composición generada por IA;

• un PDF;

• un diseño enviado por un cliente.

Importante

Utilizar una referencia visual no significa que debas copiar:

• textos protegidos;

• fotografías ajenas;

• logotipos;

• contenido;

• identidad de otra marca.

Utiliza la referencia para estudiar:

COMPOSICIÓN
+
JERARQUÍA
+
ESPACIADO
+
ESTRUCTURA

y reemplaza:

• textos;

• imágenes;

• identidad;

por contenido propio y autorizado.

Segunda regla

Referencia visual no significa duplicación literal de otra marca.

¿Qué vamos a aprender?

Vamos a utilizar este método:

1. ANALIZAR
↓
2. DESCOMPONER
↓
3. TRADUCIR A COMPONENTES WACLIS
↓
4. CONSTRUIR ESTRUCTURA
↓
5. CARGAR CONTENIDO REAL
↓
6. AJUSTAR ESTILO
↓
7. AGREGAR CSS SOLO SI HACE FALTA
↓
8. ADAPTAR RESPONSIVE
↓
9. COMPARAR
↓
10. SIMPLIFICAR

Ejemplo de referencia

Supongamos que recibes esta captura:

┌───────────────────────────────────────────────────────┐
│                                                       │
│   NUEVA SOLUCIÓN                                      │
│                                                       │
│   Gestiona todo                                      │
│   desde un solo lugar             ┌───────────────┐   │
│                                   │               │   │
│   Administra tus herramientas     │   CAPTURA     │   │
│   digitales desde una interfaz    │               │   │
│   centralizada.                   └───────────────┘   │
│                                                       │
│   [ CONOCER MÁS ]                                     │
│                                                       │
└───────────────────────────────────────────────────────┘

Antes de hacer nada,

no pienses en CSS.

Paso 1. Identifica las grandes zonas

Pregunta:

¿Cuántos bloques principales veo?

En nuestro ejemplo:

ZONA 1
Texto

ZONA 2
Imagen

Eso sugiere:

2 columnas

Por lo tanto

podemos empezar pensando:

Section
└── Container
    └── Grid Row
        ├── Column Text
        └── Column Image

Ya hemos traducido gran parte del diseño

sin escribir código.

Paso 2. Identifica la jerarquía dentro de cada zona

Columna izquierda:

Paragraph pequeño
Heading
Paragraph
Link

Columna derecha:

Image

Resultado:

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

Esta estructura ya puede crearse con componentes Waclis

Paso 3. Ignora temporalmente los detalles visuales

No empieces preguntando:

¿Cuánto tiene de Border radius?

Primero responde:

¿Qué estructura tiene?

Luego:

¿Qué contenido contiene?

Después:

¿Cómo se adapta?

Finalmente:

¿Cómo se ve?

Tercera regla

Estructura primero. Estilo después.

Paso 4. Determina si la sección utiliza un Container limitado o ancho completo

Observa la referencia.

Si el contenido queda centrado:

| margen | CONTENIDO | margen |

probablemente conceptualmente necesitas:

Boxed

Si el contenido alcanza los extremos:

|           CONTENIDO FULL WIDTH           |

puede necesitar:

Full

No midas primero píxeles exactos.

Pregunta:

¿La composición es contenida o expansiva?

Paso 5. Identifica la proporción entre columnas

No siempre es:

50 / 50

Puede parecer:

55 / 45

O:

60 / 40

En Waclis puedes aproximarlo mediante:

6 + 6

O:

7 + 5

O:

5 + 7

No necesitas reproducir exactamente:

57.37% / 42.63%

si:

7 / 5

produce el mismo equilibrio visual.

Cuarta regla

Busca equivalencia visual, no precisión matemática innecesaria.

Paso 6. Identifica alineación vertical

Observa:

texto

respecto de:

imagen

¿Está arriba?

¿Centrado?

¿Abajo?

Si están centrados verticalmente:

puedes trabajar desde:

Grid Row → Vertical align

Evita:

margin-top: 130px;

para colocar el texto.

Ese valor probablemente fallará:

• con otro texto;

• en tablet;

• en mobile.

Paso 7. Identifica dirección de lectura

Desktop puede mostrar:

TEXT | IMAGE

Pero debes decidir mobile.

Por ejemplo:

TEXT
IMAGE

Si la referencia original en mobile hace otra cosa:

no necesariamente debes copiarla.

Pregunta:

¿Cuál es el orden lógico para mi contenido?

El objetivo no es obedecer la referencia en todo

sino crear una implementación correcta para tu Página web.

Paso 8. Identifica el tipo de contenido visual

Pregúntate:

¿esto es contenido?

Si es:

• producto;

• captura;

• fotografía importante;

utiliza:

Image

Si funciona como:

• textura;

• ambientación;

• fondo decorativo;

puede ser:

Background Image

No confundas ambos.

Ejemplo

Referencia:

una captura completa de la interfaz

Debe ser probablemente:

Image

No Background.

Porque el visitante necesita verla.

Paso 9. Identifica Cover vs Contain

Referencia fotográfica:

imagen llena completamente la caja

Puede sugerir:

Cover

Referencia de producto o captura:

se ve completamente dentro del marco

Puede sugerir:

Contain

No copies el recorte sin analizar el contenido real que utilizarás.

Paso 10. Identifica la jerarquía tipográfica

No preguntes todavía:

¿Qué Font exacta usa?

Primero identifica:

Texto pequeño
↓
Heading principal
↓
Paragraph
↓
CTA

Por ejemplo:

Eyebrow
12–14 visual

Heading
grande

Paragraph
medio

CTA
destacado

Después adapta esos niveles al sistema visual del sitio.

No necesitas copiar la misma tipografía externa.

Paso 11. Conserva la identidad de tu Página web

Una referencia puede utilizar:

font-family específica

Pero tu sitio puede tener otra.

No cargues automáticamente la fuente de la referencia.

Pregunta:

¿La jerarquía puede reproducirse con nuestra tipografía?

En la mayoría de los casos:

sí.

Ejemplo

Referencia:

Heading enorme
peso 700

Puedes recrear:

Heading del sistema
+
Font size
+
Font weight

No necesitas la fuente original.

Paso 12. Identifica el sistema de espacios

Observa:

Section top
↓
Eyebrow
↓
Heading
↓
Paragraph
↓
CTA
↓
Section bottom

Pregunta:

• ¿qué elementos están muy próximos?

• ¿qué grupos están separados?

• ¿cuánto aire general hay?

No midas solamente:

37px

Busca relaciones.

Por ejemplo:

Eyebrow → Heading
espacio pequeño

Heading → Paragraph
espacio medio

Paragraph → CTA
espacio medio/grande

Reproduce el ritmo.

Paso 13. No uses <br> para crear espacios

Evita:

<br><br><br>

Utiliza:

• Margin;

• Padding.

Paso 14. Identifica el Padding exterior

La referencia puede tener:

mucho aire vertical

Puedes comenzar, por ejemplo, con:

72px / 80px / 96px

como aproximación visual,

no como valores obligatorios.

Después ajusta.

No necesitas saber el número exacto utilizado por la referencia.

Paso 15. Identifica bordes y radios

Puede existir:

Image con esquinas redondeadas

O:

Card con Border suave

Puedes utilizar:

Estilo → Border / Border radius

Antes de escribir CSS.

Paso 16. Identifica sombras

Pregunta:

¿existe realmente una sombra o solo contraste de Background?

Muchas veces se agrega sombra innecesariamente al intentar “modernizar”.

Si la referencia utiliza una sombra mínima:

no necesitas:

box-shadow gigantesca

Mantén el efecto sutil.

Paso 17. Identifica elementos interactivos

Puede parecer:

Card

Pero:

¿es clicable?

Puede parecer:

Tabs

Pero:

¿realmente cambia contenido?

Puede parecer:

Carousel

Pero:

¿es una imagen estática?

No deduzcas funcionalidad únicamente por apariencia.

Quinta regla

Una captura muestra cómo algo se ve. No necesariamente muestra cómo funciona.

Paso 18. No inventes interacción

Si la referencia muestra:

tres etiquetas

no asumas:

son Tabs

Podrían ser:

• Badge;

• Links;

• texto.

Si no conoces el comportamiento:

reproduce solamente lo que puedes confirmar.

Paso 19. Si tienes acceso a la referencia real

Puedes interactuar con ella para descubrir:

• Hover;

• navegación;

• responsive;

• Tabs;

• Accordion;

• Carousel.

Pero no necesitas copiar su código.

Estudia:

COMPORTAMIENTO

y vuelve a traducirlo a componentes Waclis.

Paso 20. Tabla de traducción conceptual

Esta traducción reduce enormemente la necesidad de copiar HTML

Paso 21. Crea la estructura desnuda

Antes de aplicar colores:

crea:

Section
↓
Container
↓
Grid Row
↓
Columns
↓
Components

Por ejemplo:

Section
└── Container
    └── Grid Row
        ├── Column 7
        │   ├── Paragraph
        │   ├── Heading
        │   ├── Paragraph
        │   └── Link
        │
        └── Column 5
            └── Image

La sección debería funcionar ya

aunque todavía se vea:

básica

Eso es correcto.

Paso 22. Revisa Navigator

Confirma:

• Section;

• Container;

• Grid Row;

• Columns;

• componentes.

Antes de seguir.

No agregues:

Container
dentro de Container
dentro de Container

sin necesidad.

Paso 23. Carga contenido real

No continúes diseñando con:

Lorem ipsum

Sustituye por:

• Heading real;

• Paragraph real;

• Image real;

• CTA real.

Esto es especialmente importante

porque el contenido real define:

• altura;

• saltos;

• proporciones.

Paso 24. No copies el texto de la referencia

La estructura puede inspirar:

Eyebrow
Heading
Description
CTA

Pero utiliza el contenido correspondiente a tu empresa.

No necesitas replicar:

• slogans;

• claims;

• nombres.

Paso 25. No copies imágenes externas

Utiliza:

• imágenes propias;

• recursos autorizados.

La referencia te ayuda a definir:

tipo de imagen

Por ejemplo:

fotografía horizontal

No:

esa misma fotografía

sin derechos para utilizarla.

Paso 26. Ajusta primero con Contenido y Estilo

Antes de CSS personalizado:

utiliza:

Contenido

para:

• Heading level;

• Image;

• Alt;

• Link;

• URL;

• General Id/Class.

Y:

Estilo

para:

• Display;

• Typography;

• Size;

• Margin;

• Padding;

• Border;

• Border radius;

• Background.

Muchísimas referencias pueden reproducirse casi completamente de esta forma.

Paso 27. Solo agrega CSS para lo que realmente falta

Pregunta:

¿qué parte no puedo conseguir con el Editor?

Tal vez:

• un detalle de Hover;

• una variante responsive;

• una transformación concreta.

Agrega solamente eso.

No reemplaces:

80% de herramientas visuales

por:

200 líneas de CSS

sin necesidad.

Sexta regla

Utiliza el menor nivel de código que permita conseguir correctamente el resultado.

Paso 28. Crea Classes propias

Por ejemplo:

reference-feature

Para texto:

reference-feature-content

Para Image:

reference-feature-image

No copies:

css-1a2b3c

O:

jsx-487239

O Classes minificadas de la referencia.

Utiliza nombres propios y comprensibles.

Paso 29. No copies Classes del sitio externo

Una Class como:

tw-flex

puede depender de:

• Tailwind;

• CSS externo.

Si la copias sola:

puede no hacer nada.

O peor:

puede coincidir accidentalmente con otra regla.

Construye tus Classes.

Paso 30. No copies IDs externos

Por ejemplo:

id="hero-section-9f8ab"

No tiene sentido para tu página.

Utiliza IDs propios solo si los necesitas.

Paso 31. No copies <style> completos de una página externa

Pueden contener:

• cientos de reglas;

• estilos globales;

• variables;

• fuentes;

• breakpoints;

• dependencias.

Podrías afectar:

• Header;

• Footer;

• productos;

• Forms;

• Cards.

Extrae solamente:

la idea necesaria

y reescríbela con scope.

Paso 32. No copies <script> externos

Una referencia puede utilizar scripts para:

• sliders;

• animaciones;

• tracking;

• menús;

• formularios.

No pegues:

<script src="..."></script>

sin comprenderlo.

Waclis ya dispone de componentes para muchas funciones.

Paso 33. No copies CDNs

Especialmente:

Bootstrap

Waclis utiliza:

Bootstrap 4

No agregues:

bootstrap@5

Tampoco:

Tailwind CDN

Solo para reproducir una Section.

Eso puede crear:

• conflictos;

• estilos duplicados.

Paso 34. No copies jQuery adicional

Si un ejemplo de Internet utiliza:

<script src="jquery...">

no significa que debas incluirlo.

Añadir otra versión puede generar conflictos.

Paso 35. No copies React o Vue

Código como:

<Component>

O:

useState(...)

no debe pegarse directamente como si fuese HTML.

Traduce visualmente:

qué estructura produce

Después recrea esa estructura con Waclis.

Paso 36. No copies Tailwind

Ejemplo:

<div class="flex gap-8 lg:grid-cols-2">

No necesitas incorporar Tailwind.

Traduce:

flex
gap
2 columnas desktop

a:

• Grid Row;

• Columns;

• Margin/Padding.

Paso 37. No copies Bootstrap 5 literalmente

Una IA puede devolver:

d-flex
gap-4
rounded-4

Algunas utilidades pueden variar entre versiones.

Recuerda:

Waclis utiliza Bootstrap 4

Pide compatibilidad explícita.

Paso 38. No cargues librerías de iconos solo por un icono

Si la referencia utiliza:

un icono concreto

busca primero:

• Font Icon;

• Svg Icon.

No agregues una librería completa

para un único símbolo.

Paso 39. No cargues una librería de animaciones por un efecto sencillo

Por ejemplo:

fade in

Waclis dispone de:

Animate on scroll

Utiliza primero las herramientas existentes.

Paso 40. Analiza Hover

Supongamos una Card.

Referencia normal:

Card

Hover:

sombra ligeramente mayor

Puedes utilizar:

Estilo → State → hover

No necesitas CSS si el Editor ya permite el efecto.

Paso 41. Hover complejo

Si cambia:

• transform;

• elementos internos;

puede requerir CSS.

Pero pregunta:

¿realmente necesitamos copiar ese efecto?

A veces una versión más simple:

mejora mantenimiento
+
mobile

Paso 42. No copies efectos que dependan solo de mouse

Una referencia desktop puede mostrar:

Hover revela información

En mobile:

puede no existir ese mismo Hover.

Mantén el contenido esencial visible.

Paso 43. Analiza animaciones por separado

Una captura:

no muestra movimiento

No inventes animaciones porque:

“seguro que tenía”.

Si tienes acceso a video o referencia real:

puedes analizarlas.

Después decide si aportan.

Paso 44. Animación no es estructura

Primero:

sección estática correcta

Después:

animación opcional

No al revés.

Paso 45. Analiza el responsive independientemente

Una captura desktop no te dice:

cómo funciona en mobile

Debes diseñarlo.

Pregunta para cada bloque:

¿qué ocurre cuando no caben las columnas?

Por ejemplo:

Desktop:

TEXT | IMAGE

Mobile:

TEXT
IMAGE

No:

TEXT muy estrecho | IMAGE diminuta

Paso 46. No reproduzcas un error de la referencia

Esto es fundamental.

Una referencia puede tener:

• texto demasiado pequeño;

• mala legibilidad;

• mal responsive;

• Hover inaccesible.

No copies:

el error

por fidelidad.

El objetivo es:

reproducir la intención
+
mejorar la implementación

Paso 47. La referencia es una guía, no una ley

Puedes decidir:

desktop igual

pero:

mobile mejorado

Eso es correcto.

Paso 48. Comparación por capas

Después de construir:

no preguntes simplemente:

“¿se parece?”

Compara por capas.

Capa 1: estructura

¿mismas grandes zonas?

Capa 2: proporción

¿el texto y la imagen ocupan una relación parecida?

Capa 3: jerarquía

¿Heading, Paragraph y CTA tienen importancia equivalente?

Capa 4: espacios

¿el ritmo vertical es parecido?

Capa 5: estilo

¿Background, Border radius y detalles son coherentes?

Capa 6: responsive

¿funciona en otros tamaños?

Así corriges de manera ordenada.

Paso 49. No corrijas todo al mismo tiempo

Si la Image parece pequeña:

corrige:

proporción de columnas

antes de:

• aumentar Width;

• usar transform;

• usar margin negativo.

Si el Heading queda bajo:

revisa:

Vertical align

antes de:

margin-top:-60px

Paso 50. Diferencia entre tamaño y espacio

Puede parecer que:

Heading es pequeño

Pero quizá el problema es:

demasiado espacio alrededor

No aumentes Font size automáticamente.

Compara relaciones.

Paso 51. Diferencia entre ancho y Font size

Un Heading puede romper en tres líneas.

Puede deberse a:

columna estrecha

No necesariamente a:

Font size demasiado grande

Revisa Grid primero.

Paso 52. Diferencia entre Image pequeña y Container grande

Una Image puede parecer diminuta porque:

Container es demasiado ancho

No necesariamente necesitas:

width:120%

Revisa:

• Boxed;

• Column proportion.

Paso 53. Diferencia entre Card “plana” y Background

Puede que la referencia no utilice sombra.

Quizá simplemente tenga:

Card blanca
+
Section gris

Eso genera separación visual.

No agregues sombra si no hace falta.

Paso 54. Crea una primera aproximación

No busques:

100% de fidelidad

en el primer intento.

Objetivo inicial:

80% de estructura visual

Después refinamos.

Este enfoque reduce:

• CSS innecesario;

• errores.

Paso 55. Primera pasada: solo estructura

Por ejemplo:

Boxed
7 + 5
Heading
Paragraph
Link
Image

No:

• sombra;

• animación;

• Hover.

Paso 56. Segunda pasada: Typography y espacios

Ajusta:

• Font size;

• Font weight;

• Line height;

• Margin;

• Padding.

Paso 57. Tercera pasada: visuales

Ajusta:

• Background;

• Border;

• Border radius;

• Image.

Paso 58. Cuarta pasada: interacción

Solo después:

• Hover;

• animation;

• Links.

Paso 59. Quinta pasada: responsive

Aunque deberías planificarlo desde el principio,

haz una pasada dedicada a:

• desktop;

• tablet;

• mobile.

Paso 60. Sexta pasada: simplificación

Pregunta:

¿Qué CSS puedo eliminar?

Y:

¿Qué wrapper no necesito?

Una reconstrucción profesional suele terminar:

más simple que el código original

y eso puede ser una ventaja.

Paso 61. Referencia con Cards

Supongamos:

[ Card ][ Card ][ Card ]

Analiza:

Image
Heading
Text
Link

Traducción:

Grid Row
├── Column
│   └── Card
├── Column
│   └── Card
└── Column
    └── Card

No copies:

framework externo de Cards

Paso 62. Referencia con iconos

Puedes utilizar:

• Font Icon;

• Svg Icon.

No necesitas descargar:

la librería completa usada por la referencia

Busca equivalencia conceptual.

Paso 63. Referencia con Tabs

Primero confirma que son Tabs reales.

Si sí:

utiliza:

Tabs

No construyas manualmente:

div
+
display:none
+
JavaScript propio

si existe el componente.

Paso 64. Referencia con Accordion

Utiliza:

Accordeon

cuando exista contenido desplegable.

No copies scripts de otra librería.

Paso 65. Referencia con Carousel

Utiliza:

Carousel

si realmente cambia entre slides.

No confundas:

tres Cards visibles

con:

Carousel

Una captura no demuestra movimiento.

Paso 66. Referencia con Slider

Mismo principio.

Debe existir:

comportamiento de Slider

no simplemente:

imagen grande

Paso 67. Referencia con video

Si debe reproducirse:

Embed Video

Si solo funciona como fondo visual:

puedes evaluar Background Video.

No copies el iframe o script externo

si el componente Waclis ya puede resolverlo.

Paso 68. Referencia con mapa

Utiliza:

• Google Maps;

• Open Street Map.

No copies un mapa de una empresa externa.

Debe mostrar:

tu ubicación real

cuando corresponda.

Paso 69. Referencia con formulario

Aquí debemos ser especialmente cuidadosos.

Puedes copiar:

la composición visual

Por ejemplo:

Nombre | Email
Mensaje
[Enviar]

Pero no copies:

action
API
scripts
integraciones

de otro sitio.

Un Form necesita:

procesamiento propio

Paso 70. No copies formularios completos de sitios externos

Además de no garantizar funcionamiento,

pueden contener:

• endpoints;

• tokens;

• campos ocultos;

• sistemas externos.

Construye o utiliza el Form de Waclis correspondiente.

Y prueba el envío real.

Paso 71. Referencia con tabla de precios

Puedes utilizar:

Tabla de precios

Pero reemplaza:

• precios;

• planes;

• características;

por información real.

No copies:

“Más elegido”

si no corresponde.

Paso 72. Referencia con testimonios

Puedes copiar:

la estructura visual

No:

los testimonios

Utiliza testimonios reales.

Paso 73. Referencia con logos

Puedes recrear:

fila de logos

Pero utiliza solamente:

logos que realmente corresponda mostrar

No copies las marcas de la referencia.

Paso 74. Referencia con números

Por ejemplo:

10K+
CLIENTES

Puedes recrear el diseño.

Pero el número debe ser:

un dato propio y verificable

Si no lo tienes:

no agregues Counter.

Paso 75. Referencia con gradientes

Puedes reproducir un gradiente mediante CSS

si realmente forma parte importante de la composición.

Pero primero pregunta:

¿puedo conseguir un resultado equivalente con un Background simple?

Una versión más simple puede:

• cargar menos;

• mantenerse mejor.

Paso 76. Referencia con blur / glass effect

Puede requerir CSS.

Antes de copiar:

analiza:

• contraste;

• legibilidad;

• compatibilidad.

No hagas:

glassmorphism

solo porque la referencia lo utiliza.

Debe funcionar con el contenido real.

Paso 77. Referencia con elementos superpuestos

Puede utilizar:

• Position absolute;

• transforms.

Pregunta:

¿La superposición es esencial?

Si no:

puedes recrear la composición en Grid.

Esto será más robusto.

Paso 78. Si la superposición es esencial

Entonces:

1. crea primero una versión normal;

2. comprueba responsive;

3. agrega la superposición de manera localizada.

No empieces por:

position:absolute;
top:-83px;
left:427px;

Eso suele ser frágil.

Paso 79. Referencia con elemento “flotante”

Por ejemplo:

Image grande
+
Card pequeña superpuesta

Puedes construir:

visual principal

después:

Card secundaria

Y evaluar:

• Position;

• z-index;

solo para ese detalle.

No posiciones toda la Section manualmente.

Paso 80. Referencia con decoración

Por ejemplo:

• círculo;

• línea;

• mancha;

• patrón.

Pregunta:

¿aporta realmente?

Puede ser omitida

sin perder:

la composición principal

No conviertas cada detalle decorativo en:

20 reglas CSS

Paso 81. Fidelidad visual vs mantenibilidad

Imagina dos opciones.

Opción A

99% igual
+
250 líneas CSS
+
Position absolute
+
5 media queries

Opción B

92% igual
+
Grid Row
+
20 líneas CSS
+
responsive estable

En muchos casos:

B

es mejor para una Página web real.

Séptima regla

No sacrifiques estabilidad y mantenimiento por copiar un detalle visual irrelevante.

Paso 82. Cuándo vale la pena una personalización avanzada

Puede valer la pena cuando:

• forma parte de la identidad;

• mejora claramente el diseño;

• puede mantenerse;

• funciona responsive.

Por ejemplo:

una composición de Hero característica

Pero no necesariamente:

un pequeño punto decorativo

Paso 83. Usa CSS con scope

Ejemplo:

.reference-feature .reference-feature-image {
    border-radius: 20px;
}

No:

img {
    border-radius: 20px;
}

Porque puede afectar:

• logo;

• productos;

• galerías.

Paso 84. Evita selectores Bootstrap globales

No:

.row {
    gap: 40px;
}

Puede afectar otras grillas.

Mejor:

.reference-feature .row {
    /* ajuste */
}

cuando realmente corresponda.

Paso 85. Evita .container global

No:

.container {
    max-width: 1400px;
}

Solo porque la referencia es más ancha.

Utiliza:

• Section;

• Container width;

• Class localizada.

Paso 86. Evita h2 global

No:

h2 {
    font-size: 64px;
}

Si solo quieres copiar el Heading de esta sección.

Agrega una Class:

reference-feature-title

Paso 87. Evita a global

No:

a {
    border-radius: 50px;
}

Puede afectar:

• Header;

• Footer;

• navegación.

Utiliza una Class del CTA.

Paso 88. Evita !important como primera herramienta

Si algo no se aplica:

revisa:

• selector;

• Class;

• Linked styles;

• estado.

No:

!important
!important
!important

Paso 89. Si necesitas ver el HTML

Selecciona el elemento.

Utiliza:

Editar código HTML <>

Esto permite estudiar:

solo el fragmento correspondiente

Antes de modificar:

copia el HTML original.

Paso 90. Utiliza HTML para comprender, no necesariamente para reescribir

Puedes identificar:

Section
Row
Columns
Image

Y después volver a:

• Editor visual;

• Navigator.

No necesitas editar el código.

Paso 91. Code editor global

Utilízalo solo cuando:

el alcance del cambio realmente lo requiera

Para una Section individual:

es preferible trabajar con:

• elemento seleccionado;

• Classes;

• CSS localizado.

No abras el código global para cambiar:

Padding de una Card

Paso 92. Cómo utilizar IA con una captura

ChatGPT, Claude o Gemini pueden ayudar a analizarla.

Pero el prompt debe ser específico.

Prompt recomendado

Analiza esta captura de una sección que quiero recrear en Waclis.

No quiero copiar el código original.

Waclis utiliza Bootstrap 4 y dispone de:
- Section;
- Container;
- Grid Row;
- Heading;
- Paragraph;
- Image;
- Link;
- Card;
- Font Icon;
- Svg Icon.

Primero identifica únicamente:
1. grandes zonas;
2. cantidad de columnas;
3. proporciones aproximadas;
4. jerarquía de contenido;
5. alineaciones;
6. espacios;
7. comportamiento responsive que recomendarías.

No generes HTML ni CSS todavía.

Esto obliga a la IA a pensar en estructura antes de código

Paso 93. IA para traducir a componentes Waclis

Con base en el análisis anterior, traduce la sección a componentes Waclis.

Devuelve solamente una jerarquía como:

Section
└── Container
    └── Grid Row
        ├── Column
        └── Column

No generes código.
No agregues componentes que no sean necesarios.

Paso 94. IA para decidir proporciones

La captura muestra texto a la izquierda e imagen a la derecha.

Texto ocupa aproximadamente un poco más de la mitad.

En Waclis puedo utilizar proporciones de Grid como:
6+6
7+5
5+7

Indica cuál se aproxima mejor y por qué.

No generes CSS.

Paso 95. IA para comparar captura y versión Waclis

Puedes enviar:

• referencia;

• captura de tu versión.

Prompt

Compara estas dos imágenes:

1. Referencia.
2. Mi reproducción en Waclis.

No me interesa una comparación pixel-perfect.

Analiza por orden:
1. estructura;
2. proporciones;
3. jerarquía tipográfica;
4. espacios;
5. alineaciones;
6. imágenes;
7. detalles visuales.

Indica primero las 5 diferencias que más afectan la similitud.

No generes código todavía.

Este enfoque evita corregir detalles irrelevantes primero

Paso 96. IA para modificar únicamente estilos

Mi estructura Waclis ya es correcta.

Necesito acercar el estilo a esta referencia.

HTML actual:
[pegar solo la sección]

Class raíz:
.reference-feature

Waclis utiliza Bootstrap 4.

No cambies:
- estructura;
- textos;
- Bootstrap Classes;
- Links;
- IDs;
- otras Sections.

Genera únicamente CSS localizado a .reference-feature.

Paso 97. IA para evitar frameworks externos

Necesito reproducir este diseño dentro de Waclis.

Restricciones:
- Waclis utiliza Bootstrap 4.
- No agregues Bootstrap 5.
- No agregues Tailwind.
- No agregues React.
- No agregues Vue.
- No agregues jQuery.
- No agregues librerías externas.
- No agregues CDNs.

Utiliza únicamente HTML compatible y CSS localizado cuando sea necesario.

Paso 98. IA para simplificar una propuesta demasiado compleja

La referencia utiliza:
- varios elementos superpuestos;
- animaciones;
- decoraciones;
- sombras.

Necesito una versión más estable para Waclis.

Conserva:
- estructura;
- jerarquía;
- proporción;
- identidad visual general.

Simplifica:
- decoraciones no esenciales;
- posicionamiento absoluto;
- animaciones complejas.

No generes código todavía.
Explica qué conservarías y qué simplificarías.

Paso 99. IA para detectar código innecesario

Este CSS fue generado para reproducir una sección:

[pegar]

Revisa:
- reglas duplicadas;
- Position absolute innecesario;
- tamaños rígidos;
- márgenes negativos;
- selectores globales;
- !important;
- media queries redundantes.

No lo reescribas todavía.
Indica los riesgos.

Paso 100. IA para Bootstrap 4

Revisa este HTML/CSS generado por IA.

Waclis utiliza Bootstrap 4.

Busca:
- Classes exclusivas de Bootstrap 5;
- utilidades que no correspondan;
- dependencias externas;
- frameworks adicionales.

No modifiques todavía.

Paso 101. IA para analizar responsive

Esta sección Waclis se ve así:

Desktop:
[describir]

Tablet:
[describir problema]

Mobile:
[describir problema]

Estructura:
[pegar jerarquía]

Analiza primero si el problema se resuelve mediante:
- Grid Row;
- tamaño de Column;
- Wrap;
- Vertical align;
- Width/Max Width;
- Padding.

No generes CSS hasta descartar las opciones visuales.

Paso 102. IA para orden mobile

Referencia desktop:

IMAGE | TEXT

Para mi contenido, en mobile quiero:

TEXT
IMAGE

Waclis utiliza Bootstrap 4.

Explica la estrategia más simple para mantener orden lógico.

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

Paso 103. IA para identificar qué NO copiar

Quiero utilizar esta página solo como referencia visual.

Analiza estos elementos:
[describir o pegar fragmento]

Clasifica en:

1. Concepto visual que sí puedo recrear.
2. Contenido que debo reemplazar.
3. Código/dependencias que no necesito copiar.
4. Funcionalidad que debo confirmar antes de reproducir.

No generes código.

Paso 104. IA para Font

La referencia utiliza una tipografía diferente de mi Página web.

No quiero instalar otra fuente.

Analiza cómo reproducir la jerarquía mediante:
- Font size;
- Font weight;
- Line height;
- Letter spacing;

usando mi fuente actual.

No sugieras fuentes externas.

Paso 105. IA para adaptar colores a la marca propia

Quiero conservar la composición de esta referencia,
pero utilizar la identidad visual de mi propia marca.

Referencia:
[describir colores]

Mi sistema actual:
[describir]

Indica qué roles visuales debo mantener:
- Background;
- texto principal;
- texto secundario;
- CTA;
- Border.

No copies literalmente los colores de la referencia.

Paso 106. IA para analizar Hover sin implementarlo

Este es el comportamiento Hover que quiero aproximar:

[describir]

La Card:
- sí/no es clicable.

Analiza si el Hover puede generar falsa interacción.

No generes CSS todavía.

Paso 107. IA para convertir un diseño Tailwind a concepto Waclis

Tengo este fragmento Tailwind solamente como referencia:

[pegar]

No quiero utilizar Tailwind.

Traduce su intención a conceptos:
- Container;
- Grid;
- Columns;
- Padding;
- Margin;
- Typography;
- Border;
- Background.

Waclis utiliza Bootstrap 4.

No generes HTML ni CSS.

Paso 108. IA para convertir Bootstrap 5 a Bootstrap 4 conceptualmente

Este ejemplo fue creado con Bootstrap 5:

[pegar]

Waclis utiliza Bootstrap 4.

No lo conviertas línea por línea.

Primero explica:
- estructura;
- columnas;
- alineación;
- spacing;
- componentes.

Indica qué partes podrían depender específicamente de Bootstrap 5.

Paso 109. IA para analizar código de referencia sin copiarlo

Este código pertenece a una sección que utilizo únicamente como referencia visual:

[pegar]

No quiero reutilizar el código.

Extrae únicamente:
- jerarquía visual;
- número de columnas;
- orden;
- tipos de componentes;
- estados Hover;
- breakpoints conceptuales.

No devuelvas el código original.

Paso 110. IA para generar CSS mínimo

Solo después de construir la estructura:

Tengo esta sección funcionando en Waclis.

HTML actual:
[pegar]

Class raíz:
.reference-feature

Necesito únicamente:
[describir diferencias visuales]

Waclis utiliza Bootstrap 4.

Genera el CSS mínimo.

Restricciones:
- no cambiar HTML;
- no modificar otras Sections;
- no usar !important salvo necesidad justificada;
- no agregar JavaScript;
- no agregar librerías.

Paso 111. IA para revisar el CSS final

Este es el CSS final de una sección Waclis:

[pegar]

Comprueba:
- scope;
- duplicaciones;
- reglas globales;
- tamaños fijos;
- mobile;
- !important;
- Position absolute;
- márgenes negativos.

Objetivo:
mantener el mismo resultado con la menor complejidad razonable.

No cambies el diseño.

Caso práctico 1: Hero de dos columnas

Referencia:

TEXT | PRODUCT IMAGE

Traducción:

Section
└── Container
    └── Grid Row
        ├── Column 7
        │   ├── Paragraph
        │   ├── Heading
        │   ├── Paragraph
        │   └── Link
        └── Column 5
            └── Image

Desktop:

7 + 5

Mobile:

12
12

Primero:

estructura.

Después:

Typography.

Después:

Image.

Después:

estilos.

No necesitas copiar:

• framework;

• HTML original.

Caso práctico 2: tres Cards

Referencia:

[ CARD ][ CARD ][ CARD ]

Traducción:

Section
└── Container
    ├── Heading
    └── Grid Row
        ├── Column 4
        │   └── Card
        ├── Column 4
        │   └── Card
        └── Column 4
            └── Card

Tablet:

2 columnas

Mobile:

1 columna

Clona:

Card completa

No copies tres veces HTML externo.

Caso práctico 3: sección con Image superpuesta

Referencia:

Imagen principal
+
pequeña Card flotante

Primera versión:

Image
+
Card debajo

Comprueba:

• contenido;

• mobile.

Después,

solo si la superposición es realmente importante:

agrega una variante visual localizada.

No construyas toda la Section con Position absolute.

Caso práctico 4: Cards con iconos

Referencia:

Icono
Heading
Text

Traducción:

Font Icon / Svg Icon
Heading
Paragraph

Utiliza una misma familia visual.

No copies la biblioteca de iconos original.

Caso práctico 5: imagen con texto alternado

Referencia:

TEXT | IMAGE

IMAGE | TEXT

TEXT | IMAGE

Mantén el orden lógico mobile.

No copies la alternancia desktop de manera que termine:

TEXT
IMAGE
IMAGE
TEXT

si resulta confuso.

Caso práctico 6: CTA con Background

Referencia:

BACKGROUND IMAGE
+
OVERLAY
+
HEADING
+
BUTTON

Traducción:

Section
Background: Image
Overlay: on
Heading
Paragraph
Link

No necesitas copiar:

background plugin

Paso 112. Comparación visual final

Coloca mentalmente:

REFERENCIA
vs
WACLIS

Compara primero:

1. Estructura

¿coinciden:

• cantidad de columnas;

• grandes zonas?

2. Proporciones

¿texto e Image ocupan un peso parecido?

3. Jerarquía

¿Heading tiene la importancia correcta?

4. Espacios

¿hay demasiado o poco aire?

5. Alignment

¿está centrado verticalmente?

6. Visuales

¿Image mantiene proporción?

7. CTA

¿tiene la misma presencia relativa?

8. Detalles

Solo al final:

• Border radius;

• sombra;

• línea;

• pequeños efectos.

Paso 113. No empieces por los detalles

Un error habitual:

Border radius perfecto

pero:

columnas incorrectas

El visitante percibe mucho más:

• composición;

• proporción;

que:

2px de diferencia en radius

Paso 114. Crea capturas para comparar

Puedes utilizar:

• vista desktop;

• tablet;

• mobile.

Compáralas con la referencia.

Si solo tienes una referencia desktop:

diseña tablet/mobile según:

• contenido;

• buenas prácticas.

No inventes que:

“así era la versión mobile original”

Paso 115. Prueba contenido más largo

La referencia puede utilizar:

Heading de 4 palabras

Tu contenido:

Heading de 12 palabras

El diseño debe adaptarse.

No recortes el texto únicamente para que se vea idéntico

si necesitas esa información.

Puedes:

• ampliar Column;

• ajustar Typography;

• reformular manteniendo significado.

Paso 116. No fijes Height para conservar la captura

Una referencia es un instante.

Tu Página web debe soportar:

• contenido dinámico;

• diferentes pantallas.

Evita:

height:620px;

si la Section puede ser:

Auto

Paso 117. Prueba Zoom

Una implementación robusta debe permitir:

• texto más grande;

• zoom;

sin cortar.

Por eso:

• Height fija;

• Position absolute excesivo;

son riesgos.

Paso 118. Revisa tablet

Este es uno de los puntos donde una reproducción suele fallar.

Desktop:

7 + 5

Tablet puede necesitar:

6 + 6

O:

12 + 12

No mantengas la referencia desktop a toda costa.

Paso 119. Revisa mobile

Pregúntate:

¿cuál es la información esencial?

Después:

¿en qué orden debe leerse?

El diseño mobile deriva de esas respuestas.

Paso 120. No ocultes elementos esenciales para parecerte a la referencia

Si la referencia móvil:

no muestra Paragraph

pero tu contenido lo necesita,

no lo ocultes automáticamente.

Adapta el diseño a tus necesidades.

Paso 121. El diseño de referencia puede ser específico para otro contenido

Una Card creada para:

2 palabras

puede no funcionar con:

descripción comercial larga

No fuerces el contenido.

Ajusta la estructura.

Paso 122. La referencia no conoce tu Header ni Footer

Puede utilizar:

un ancho

que no encaja con tu plantilla.

Adapta:

• Container;

• Padding;

a tu sitio completo.

No analices la Section aislada.

Paso 123. Comprueba la integración con las Sections vecinas

Una sección puede ser idéntica a la referencia

pero verse mal dentro de tu Página web.

Por ejemplo:

Section anterior
Background oscuro

Referencia:

también oscura

Podrían fusionarse visualmente.

Quizá necesites:

• fondo diferente;

• separador.

Paso 124. Mantén tu sistema de diseño

Si el sitio utiliza:

Border radius 12

y la referencia:

36

Pregunta si realmente debes copiar 36.

Puede ser mejor adaptar la composición al sistema existente.

Paso 125. Lo mismo con Buttons

Si tu Página web utiliza:

CTA principal sólido

No crees un Button completamente distinto solamente para imitar la referencia.

Reproduce:

posición y jerarquía

pero conserva:

identidad visual propia

Paso 126. Esto también mejora mantenimiento

Si mañana cambias:

estilo general de CTA

la sección seguirá integrada.

No quedará como:

una isla visual

Paso 127. Revisión de Links

Una referencia puede mostrar:

Get started

Tu CTA debe tener:

tu acción real

No traduzcas automáticamente:

Get started
→ Comenzar

si el flujo real es:

Contactar

Utiliza:

Contactar

El diseño y la función son independientes.

Paso 128. Revisión de contenido comercial

No copies:

“Más de 20.000 clientes”

Aunque visualmente quede perfecto.

Puedes mantener el espacio con:

• beneficio;

• subtítulo;

o eliminarlo.

Paso 129. Revisión de componentes “premium”

Una referencia puede incluir:

dashboard 3D

No necesitas generar una falsa captura.

Utiliza:

• Image real;

• ilustración autorizada.

No hagas parecer una funcionalidad inexistente como parte del producto.

Paso 130. Revisión final del código

Si utilizaste CSS:

pregunta:

¿puedo eliminar alguna regla?

Busca especialmente:

!important

position:absolute

margin-left:-...

width:1270px

height:650px

Cada uno merece una revisión.

No significa que estén siempre prohibidos.

Significa que suelen requerir una justificación clara.

Paso 131. Guarda por etapas

Primero:

estructura
↓
Guardar Cambios

Después:

contenido
↓
Guardar Cambios

Después:

estilos
↓
Guardar Cambios

Después:

responsive
↓
Guardar Cambios

No asumimos autosave.

Paso 132. Utiliza Ver página

Comprueba la Section en:

contexto real

No solamente en el Editor.

Observa:

• Section anterior;

• Section siguiente;

• Header;

• Footer.

Paso 133. Prueba todos los Links

La referencia puede tener un Button decorativo.

Tu implementación debe tener:

URL real

No:

#

Paso 134. Prueba componentes interactivos

Si utilizaste:

• Tabs;

• Accordeon;

• Carousel;

interactúa realmente.

No basta con:

“se ve igual”

Debe:

funcionar correctamente

Paso 135. Revisa desktop

Compara:

• estructura;

• proporción;

• Alignment.

No persigas detalles pequeños todavía.

Paso 136. Revisa tablet

Aquí deja de importar:

copiar desktop

y comienza:

adaptar correctamente

Paso 137. Revisa mobile

Pregúntate:

¿La sección funciona como parte de nuestra Página web, aunque sea diferente del desktop de referencia?

Si sí:

la implementación es correcta.

Paso 138. Prueba con contenido real definitivo

Antes de terminar:

revisa:

• Heading final;

• Image final;

• CTA final.

No cierres el diseño con:

contenido temporal

Paso 139. Criterio de finalización

No preguntes:

¿Es un clon perfecto?

Pregunta:

¿Conserva la intención visual?

Y:

¿encaja con Waclis y con mi Página web?

Y:

¿es responsive?

Y:

¿puedo mantenerla dentro de seis meses?

Si la respuesta es sí:

está terminada.

Buenas prácticas

Recomendamos:

• utilizar referencias para analizar diseño;

• separar estructura de estilo;

• traducir a componentes Waclis;

• construir con Section/Container/Grid;

• utilizar contenido propio;

• utilizar imágenes autorizadas;

• conservar la identidad de tu sitio;

• utilizar herramientas visuales primero;

• agregar CSS solo cuando aporte;

• crear Classes propias;

• mantener CSS localizado;

• utilizar Bootstrap 4;

• comprobar la funcionalidad real;

• diseñar responsive conscientemente;

• simplificar efectos complejos;

• comparar por capas;

• priorizar mantenimiento.

Errores frecuentes

Copiar el HTML completo

Reconstruye la estructura.

Copiar CSS completo

Puede afectar todo el sitio.

Copiar JavaScript

Puede generar dependencias y conflictos.

Copiar Bootstrap 5

Waclis utiliza Bootstrap 4.

Agregar Tailwind

No es necesario.

Agregar React o Vue

No conviertas una referencia en otra arquitectura.

Agregar otro jQuery

Puede generar conflictos.

Copiar CDNs

Utiliza herramientas existentes.

Copiar Classes externas

Pueden no tener significado.

Copiar IDs externos

Utiliza los tuyos.

Copiar fuentes

Mantén la identidad del sitio cuando sea posible.

Copiar colores de otra marca literalmente

Adapta a tu sistema visual.

Copiar imágenes

Utiliza material autorizado.

Copiar textos

Redacta contenido propio.

Copiar logos de clientes

Solo utiliza relaciones reales.

Copiar testimonios

Utiliza testimonios propios y reales.

Copiar estadísticas

Utiliza datos verificables.

Inventar interacción a partir de una captura

Una imagen no muestra comportamiento.

Crear Tabs porque algo parece Tabs

Confirma.

Crear Carousel porque ves varias imágenes

Confirma interacción.

Copiar Hover inaccesible

Mobile debe funcionar.

Empezar con CSS

Empieza por estructura.

Empezar con Position absolute

Utiliza Grid.

Utilizar enormes márgenes negativos

Corrige estructura.

Utilizar Width fija

Utiliza Columns.

Utilizar Height fija

Permite crecimiento.

Buscar fidelidad pixel-perfect innecesaria

Busca equivalencia visual.

Copiar errores de responsive

Mejora la implementación.

Agregar Effects antes del contenido

Primero construye la base.

Agregar Shadow cuando solo existe contraste

Analiza antes.

Agregar Gradient innecesario

Simplifica.

Agregar una librería por un único efecto

Utiliza herramientas Waclis.

Ocultar información importante en Hover

Touch debe funcionar.

No probar tablet

Es un punto crítico.

No probar mobile

La referencia desktop no define mobile.

No revisar la página completa

La Section debe integrarse con el sitio.

Flujo profesional recomendado

1. OBTENER REFERENCIA
↓
2. IDENTIFICAR OBJETIVO
↓
3. ANALIZAR GRANDES ZONAS
↓
4. IDENTIFICAR COLUMNAS
↓
5. ESTIMAR PROPORCIONES
↓
6. IDENTIFICAR JERARQUÍA
↓
7. IDENTIFICAR COMPONENTES
↓
8. DECIDIR ORDEN MOBILE
↓
9. TRADUCIR A WACLIS
↓
10. CREAR SECTION
↓
11. CONFIGURAR CONTAINER
↓
12. CREAR GRID ROW
↓
13. AGREGAR COMPONENTES
↓
14. REVISAR NAVIGATOR
↓
15. CARGAR CONTENIDO REAL
↓
16. CARGAR IMAGES REALES
↓
17. CONFIGURAR LINKS
↓
18. CONFIGURAR TYPOGRAPHY
↓
19. CONFIGURAR ESPACIOS
↓
20. CONFIGURAR BORDES / BACKGROUNDS
↓
21. CREAR CLASSES PROPIAS
↓
22. AGREGAR CSS MÍNIMO SI HACE FALTA
↓
23. CONFIGURAR RESPONSIVE
↓
24. COMPARAR CON REFERENCIA
↓
25. CORREGIR ESTRUCTURA
↓
26. CORREGIR PROPORCIÓN
↓
27. CORREGIR JERARQUÍA
↓
28. CORREGIR ESPACIOS
↓
29. AGREGAR DETALLES FINALES
↓
30. SIMPLIFICAR
↓
31. GUARDAR CAMBIOS
↓
32. VER PÁGINA
↓
33. PROBAR FUNCIONES
↓
34. AUDITAR DESKTOP / TABLET / MOBILE

Checklist de análisis

• Identifiqué las grandes zonas.

• Identifiqué cantidad de columnas.

• Estimé proporciones.

• Identifiqué alineación vertical.

• Identifiqué jerarquía tipográfica.

• Identifiqué grupos de contenido.

• Identifiqué tipo de Image.

• Identifiqué CTA.

• Separé apariencia de funcionalidad.

• No asumí comportamiento que la referencia no demuestra.

Checklist de traducción a Waclis

• Definí Section.

• Definí Boxed o Full.

• Utilicé Grid Row cuando corresponde.

• Utilicé componentes existentes.

• No creé HTML manual si existe un componente.

• Utilicé Image o Background conscientemente.

• Utilicé Link para navegación.

• Utilicé Card cuando realmente corresponde.

• Utilicé Navigator para revisar la jerarquía.

Checklist de contenido

• Utilicé textos propios.

• Utilicé imágenes propias o autorizadas.

• No copié slogans de otra marca.

• No copié logos.

• No copié testimonios.

• No copié estadísticas.

• No inventé funciones.

• El CTA corresponde a mi flujo real.

• No quedan textos de ejemplo.

Checklist de código

• No copié HTML completo.

• No copié CSS completo.

• No copié JavaScript externo.

• No agregué Bootstrap 5.

• No agregué Tailwind.

• No agregué React.

• No agregué Vue.

• No agregué otra versión de jQuery.

• No agregué CDNs innecesarios.

• El CSS personalizado está localizado.

• Utilicé Classes propias.

• No utilicé selectores globales innecesarios.

• Revisé !important.

• Revisé Position absolute.

• Revisé márgenes negativos.

• Revisé Width/Height rígidos.

Checklist visual

• La estructura se parece.

• Las proporciones son equivalentes.

• La jerarquía es equivalente.

• Los espacios tienen un ritmo similar.

• La Image tiene el peso correcto.

• El CTA tiene una importancia similar.

• Border radius es coherente.

• Background es coherente.

• No sacrifiqué mi identidad visual por copiar detalles.

• La Section se integra con el resto del sitio.

Checklist responsive

• Definí mobile antes de finalizar.

• Desktop funciona.

• Tablet funciona.

• Mobile funciona.

• Las Columns se apilan cuando corresponde.

• El orden mobile es lógico.

• Las Images no desbordan.

• Los Headings no quedan excesivamente estrechos.

• Los CTA son utilizables.

• No dependí de Hover.

• No existe scroll horizontal.

• No copié errores responsive de la referencia.

Checklist funcional

• Los Links tienen destino real.

• No existen #.

• Los Tabs funcionan si existen.

• Los Accordions funcionan si existen.

• Carousel funciona si existe.

• Form funciona si existe.

• Mapa muestra ubicación correcta si existe.

• Video funciona si existe.

• La apariencia coincide con el comportamiento.

Checklist de simplificación

• Revisé si cada efecto es necesario.

• Eliminé CSS redundante.

• Eliminé wrappers innecesarios.

• Evité Position absolute cuando Grid era suficiente.

• Evité decoraciones que no aportaban.

• Utilicé herramientas visuales cuando podían resolverlo.

• El resultado puede mantenerse fácilmente.

• La implementación es más simple que el código de referencia cuando puede serlo.

Checklist final

• Guardé los cambios.

• Utilicé Ver página.

• Comparé con la referencia.

• Comparé primero estructura.

• Comparé proporciones.

• Comparé jerarquía.

• Comparé espacios.

• Comparé detalles al final.

• Revisé desktop.

• Revisé tablet.

• Revisé celular.

• Probé todos los Links.

• Probé componentes interactivos.

• Utilicé contenido definitivo.

• La Section conserva la intención visual.

• La Section sigue pareciendo parte de mi propia Página web.

• No depende de frameworks o librerías innecesarias.

En resumen

Cuando ves una sección que quieres reproducir:

no pienses primero:

¿CÓMO COPIO EL CÓDIGO?

Piensa:

¿CÓMO ESTÁ ORGANIZADO EL DISEÑO?

Descompón:

SECTION
↓
CONTAINER
↓
GRID
↓
COMPONENTS

Después identifica:

PROPORCIÓN
+
JERARQUÍA
+
ESPACIADO
+
ALINEACIÓN

Y reconstruye con:

HERRAMIENTAS WACLIS

Solo si falta algo:

CSS LOCALIZADO

No:

COPIAR HTML
+
COPIAR CSS
+
COPIAR JS
+
COPIAR FRAMEWORK

Recuerda:

REFERENCIA
→ INSPIRACIÓN ESTRUCTURAL

No:

REFERENCIA
→ ARQUITECTURA TÉCNICA OBLIGATORIA

Una sección construida con:

Section
+
Container
+
Grid Row
+
Heading
+
Paragraph
+
Image
+
Link

puede reproducir visualmente una sección construida originalmente con:

React
+
Tailwind
+
otras dependencias

sin necesidad de utilizar ninguna de ellas.

Respecto de IA:

primero pide:

ANALIZAR

Después:

TRADUCIR A COMPONENTES

Después:

COMPARAR

Y solamente al final:

GENERAR CSS MÍNIMO

No empieces con:

“dame el código completo”

Respecto de fidelidad:

ESTRUCTURA
>
DETALLE

Y:

MANTENIBILIDAD
>
PIXEL-PERFECT INNECESARIO

Respecto de responsive:

REFERENCIA DESKTOP
≠
OBLIGACIÓN MOBILE

Debes crear:

la mejor adaptación para tu contenido

Respecto de identidad:

COMPOSICIÓN DE REFERENCIA
+
IDENTIDAD PROPIA

Y finalmente:

ANALIZAR
↓
DESCOMPONER
↓
TRADUCIR
↓
CONSTRUIR
↓
ESTILIZAR
↓
SIMPLIFICAR
↓
ADAPTAR
↓
COMPARAR
↓
GUARDAR CAMBIOS
↓
VER PÁGINA

Una reproducción está correctamente realizada cuando puedes afirmar:

“Conservé la lógica y la calidad visual que me interesaban de la referencia, pero la sección fue construida con la estructura, los componentes y la identidad de mi propia Página web, sin agregar dependencias innecesarias.”

Ese es el objetivo.

No crear un clon técnico.

Crear una interpretación visual correcta, estable, responsive y mantenible dentro de Waclis.