Si dependes de herramientas, puedes obtener rápidamente algo que se vea "bien". Sin embargo, el resultado suele terminar con un aspecto genérico que has visto antes. Esta es la esencia del "look AI", y ahí es donde ahora se marca la mayor diferencia.
Basándome en mi experiencia creando tres sitios diferentes con personalidades distintas a partir de la misma base usando una línea de producción construida sobre Claude Code (el proyecto makeLP), resumiré brevemente un método reproducible.
Una fábrica, no un truco de magia único
Incluso si produces algo bueno una vez, no se convierte en un activo si no es reproducible. Por eso lo ejecutamos a través de cuatro etapas.
Producción → Calidad → Verificación → Mejora.
Hay cuatro tipos de componentes de apoyo:
・Habilidades: Plantillas metodológicas (motion-lp-builder para creación, frontend-design para principios anti-IA, bulk-categorize para clasificación masiva)
・Subagentes: Roles especializados (lp-visual-verifier para dibujar y criticar, design-reference-analyst para convertir referencias en especificaciones, bulk-classifier para categorización)
・Biblioteca de referencia: Un estante de 4.074 listados SANKOU clasificados por "tipo de sitio × industria"
・Reglas en evolución: CLAUDE.md (flujo/disciplina estándar) + Memoria (haciendo permanentes las críticas)
Preparación y requisitos previos
La base está fijada a Vite + React + GSAP (ScrollTrigger) + Lenis. La clave es "vincular el progreso del scroll directamente a la producción". La cantidad de scroll se convierte en la entrada para la expresión (frame scrubbing de video de fondo, pinning, parallax, revelaciones de entrada).
Hay dos tipos de activos, elegidos según el tema:
・Generación con IA (Higgsfield): Cuando se necesitan imágenes realistas como complejos turísticos
・Dibujo con código (SVG/Canvas/CSS): Esto se siente más "correcto" para B2B y tecnología. No requiere créditos
En caso de duda, decide basándote en "¿debería ser una foto o un diagrama?"
PASO 1: Producción
El orden es crucial. No empieces a escribir inmediatamente; primero, solidifica un brief de marca (a quién le prometes qué, color, tipografía, intensidad de movimiento) en una página. Incluso con la misma base, es el brief, no el código, lo que diferencia el resultado.
Si eliges generación con IA, sigue la disciplina de créditos:
- Verificar saldo
- Obtener un estimado preliminar con get_cost
- Crear una imagen hero primero
- Generar otras usando esa como referencia para unificar la textura
- Esperar la finalización y descargar.
Para la implementación, vincula la producción directamente al scroll (frame scrub/pin/parallax/reveal). Y hazlo siempre robusto: fallback estático con prefers-reduced-motion, asegúrate de que npm run dev funcione incluso con activos faltantes, y considera el ahorro de energía para touch y canvas.
PASO 2: Calidad - Alejándose del diseño producido en masa
Descompón y elimina el "aspecto de IA" en seis partes:
- Uso excesivo de degradados (especialmente texto y degradados púrpura) → Reducir a un solo color + un acento
- Simplemente alinear partes estándar en un orden estándar → Crear con un concepto único para la estructura misma (por ejemplo, toda la página como un lienzo de flujo de trabajo)
- Números redondeados "inflados" → Ser específico (por ejemplo, "600 facturas/mes → 0" antes/después)
- Íconos emoji → No los uses. Dibuja SVGs si es necesario
- Barras de color solo en el borde izquierdo de los bloques → No las uses. Usa color en superficies, márgenes y tipografía
- Todo siendo simétrico, uniforme, redondeado y con sombras suaves → Introducir asimetría y variaciones en la fuerza de los márgenes
El principio es: esquema de color es un solo color + un acento, tipografía con una tipografía característica, fuerza en los márgenes, y movimiento por el bien del "enfoque".
PASO 3: Verificación - Construcción exitosa ≠ Bueno
Incluso si el código pasa, los pins, scrubs y reveals podrían estar rotos en la pantalla real. Por lo tanto, el lp-visual-verifier inicia un servidor de desarrollo, opera un Chrome/Edge existente a través de puppeteer-core, renderiza y captura cada sección, y luego "lo critica visualmente".
Tres puntos clave:
・El verificador no corrige el código (para aislar la causa)
・Capturar con prefers-reduced-motion permite visualización estática de áreas fijadas y secciones inferiores esperando reveals
・Siempre capturar también en anchos móviles
Solo una ronda de crítica → corrección eleva significativamente la calidad. No te conformes con una construcción exitosa.
PASO 4: Mejora + Biblioteca de referencia
El design-reference-analyst lee sitios de referencia y los traduce en "patrones comunes" y "especificaciones de mejora (dónde y cómo)" en lugar de solo impresiones. La biblioteca sankou-reference tiene 4.074 elementos clasificados en dos ejes, permitiéndote extraer al instante "solo ejemplos de turismo × LP especial" (el contenido es claro a partir de las notas en cada fila).
La clasificación masiva en sí también está basada en plantillas (bulk-categorize: dividir → paralelización de subagentes → agregación → corrección).
Reglas que crecen
Este es el mayor descubrimiento. No dejes que las críticas del cliente terminen con una corrección única; conviértelas en reglas permanentes.
Ejemplo:
"Los íconos emoji parecen IA" "Las barras de color a la izquierda parecen IA" → Convertir estas en reglas prohibidas en la memoria y CLAUDE.md → Evitarlas automáticamente en todos los sitios a partir de entonces.
En otras palabras, cuanto más lo usas, más desaparece el "aspecto de IA". Tener habilidades y subagentes también permite una fácil expansión horizontal.
Creando tres sitios distintos
・AZURE BAY (LP de piscina de verano / B2C): Turquesa + Dorado. Generado con Higgsfield. Frame scrubbing de video de piscina al hacer scroll.
・FLOWGEAR (soporte de implementación n8n / B2B): Un solo color coral + plano, sin generación de imágenes. Toda la página es un lienzo de flujo de trabajo n8n. Antes/después específicos en lugar de números inflados.
・STATIK (Laboratorio experimental para un estudio ficticio): Casi negro + mono + un color ácido. Cuadrícula de texto cinético en Canvas + cursor personalizado. Una experiencia inmersiva en lugar de solo un LP.
Los puntos en común son "un solo color + un acento", "hablar con especificidad" y "avance a través de un solo concepto". Elegir los medios según el tema es el primer paso para alejarse del promedio.
Configuración mínima para construir tú mismo
- Crear una plantilla de la base vinculada al scroll (no escribir desde cero cada vez)
- Poner principios anti-producción en masa en una sola hoja de reglas (sin degradados/emojis/barras izquierdas...)
- Siempre capturar y mirar la pantalla real después de crear
- Convertir las críticas en reglas cada vez
Errores comunes y contramedidas: Desperdicio de créditos (hero primero + estimado preliminar), omisiones de verificación (capturar pantallas reales), accesibilidad de movimiento (reduced-motion), y roturas en móvil (siempre capturar en diferentes anchos).
Resumen
La IA es una "mano rápida", no un "ojo".
En el momento en que incorporas el ojo (verificación) y las reglas (aprendizaje) al sistema, los sitios hechos con IA se liberan del aspecto de IA.
