Si dependes de herramientas, puedes obtener rápidamente algo que se ve "aceptable". Sin embargo, el resultado suele terminar con un aspecto genérico que ya has visto antes. Esta es la esencia del "look AI", y es donde se marca la mayor diferencia ahora.
Basándome en mi experiencia creando tres sitios web distintos con personalidades diferentes a partir de la misma base, utilizando 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 de Una Sola Vez
Incluso si produces algo bueno una vez, no se convierte en un activo si no es reproducible. Por eso lo ejecutamos en cuatro etapas.
Producción → Calidad → Verificación → Mejora.
Hay cuatro tipos de componentes de apoyo:
・Habilidades: Plantillas metodológicas (motion-lp-builder para la 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 Referencias: Un estante con 4,074 listados SANKOU clasificados por "tipo de sitio × industria"
・Reglas Evolutivas: CLAUDE.md (flujo estándar/disciplina) + Memoria (para hacer permanentes las críticas)
Preparación y Prerrequisitos
La base es fija: Vite + React + GSAP (ScrollTrigger) + Lenis. La clave es "vincular el progreso del desplazamiento directamente a la producción". La cantidad de desplazamiento se convierte en la entrada para la expresión (avance de fotogramas de video de fondo, fijación, paralaje, revelados de entrada).
Hay dos tipos de activos, elegidos según el tema:
・Generación AI (Higgsfield): Cuando se necesitan imágenes realistas como las de resorts
・Dibujo con Código (SVG/Canvas/CSS): Esto se siente más "correcto" para B2B y tecnología. Sin créditos necesarios
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, consolida 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 la generación AI, sigue la disciplina de créditos:
- Verifica el saldo
- Obtén un presupuesto preliminar con get_cost
- Crea una imagen hero primero
- Genera las demás usando esa como referencia para unificar la textura 5. Espera a que termine y descarga.
Para la implementación, vincula la producción directamente al desplazamiento (avance de fotogramas/fijar/paralaje/revelar). Y hazlo siempre robusto: fallback estático con prefers-reduced-motion, asegura que npm run dev funcione incluso con activos faltantes, y considera el ahorro de energía para touch y canvas.
PASO 2: Calidad - Alejarse del Diseño Producido en Masa
Descompón y elimina el "look AI" en seis partes:
- Uso excesivo de degradados (especialmente texto y degradados morados) → 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 "inflados" redondeados → Ser específico (por ejemplo, "600 facturas/mes → 0" antes/después)
- Iconos 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 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 de un solo color + un acento, tipografía impulsada por una tipografía característica, fuerza en los márgenes y movimiento con el propósito de "enfoque".
PASO 3: Verificación - Compilación Exitosa ≠ Bueno
Incluso si el código compila, las fijaciones, los avances de fotogramas y los revelados pueden estar rotos en la pantalla real. Por lo tanto, 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 "la critica visualmente".
Tres puntos clave:
・El verificador no arregla el código (para aislar la causa)
・Capturar con prefers-reduced-motion permite visualización estática de áreas fijadas y secciones inferiores esperando revelados
・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 compilación exitosa.
PASO 4: Mejora + Biblioteca de Referencias
El design-reference-analyst lee sitios de referencia y los traduce a "patrones comunes" y "especificaciones de mejora (dónde y cómo)" en lugar de solo impresiones. La biblioteca sankou-reference tiene 4,074 ítems clasificados en dos ejes, lo que permite extraer instantáneamente "solo ejemplos de turismo × LP especial" (el contenido se aclara en las notas de cada fila).
La clasificación masiva en sí misma también está basada en plantillas (bulk-categorize: dividir → subagentes en paralelo → agregación → corrección).
Reglas Que Crecen
Este es el mayor descubrimiento. No dejes que las críticas del cliente terminen con una solución única; promuévelas a reglas permanentes.
Ejemplo:
"Iconos emoji parecen IA" "Barras de color a la izquierda parecen IA" → Conviértelos en reglas prohibidas en memoria y CLAUDE.md → Automáticamente se evitan en todos los sitios a partir de entonces.
En otras palabras, cuanto más lo usas, más desaparece el "look AI". 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. Avance de fotogramas del video de la piscina al desplazarse.
・FLOWGEAR (Soporte de implementación n8n / B2B): Color coral único + plano, sin generación de imágenes. Toda la página es un lienzo de flujo de trabajo n8n. Antes/después específico en lugar de números inflados.
・STATIK (Laboratorio experimental para un estudio ficticio): Casi negro + monocromático + un color ácido. Cuadrícula de texto cinética 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 el medio según el tema es el primer paso para alejarse del promedio.
Configuración Mínima para Construirlo Tú Mismo
- Plantear la base vinculada al desplazamiento (no escribir desde cero cada vez)
- Poner los 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
- Promover las críticas a reglas cada vez
Errores comunes y contramedidas: Desperdicio de créditos (hero primero + presupuesto 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 por IA se liberan del look AI.
