6 cosas para que tu web hecha con IA no parezca hecha con IA

Una web hecha con IA se nota: las mismas tarjetas, el mismo degradado, frases que valen para cualquier negocio. Estas seis cosas lo arreglan.

1. Instala skills de diseño

Una skill es una guía que la IA sigue mientras trabaja. Estas cinco le dan criterio de diseño:

• taste-skill: layout, tipografía, espaciado y movimiento con criterio. Audita lo que ya existe antes de rediseñar.
• ui-ux-pro-max: una base de datos de estilos, paletas, parejas de fuentes y reglas de UX que el agente consulta.
• impeccable: comandos para auditar, pulir, animar o simplificar una interfaz que ya tienes.
• emil-design-eng: el criterio de Emil Kowalski sobre animación y detalle: qué animar, con qué curva y cuánto dura.
• apple-design: los muelles, gestos y materiales de las charlas de diseño de Apple, llevados a CSS y JavaScript.

npx skills add https://github.com/Leonxlnx/taste-skill
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max
npx skills add pbakaus/impeccable
npx skills add emilkowalski/skills --skill emil-design-eng
npx skills add emilkowalski/skills --skill apple-design

Instalarlas no basta. Funcionan con referencias, público y contenido concretos, que es lo que viene ahora.

2. Copia componentes con su prompt

En 21st.dev cada componente lleva un botón «Copy prompt». Lo pegas en tu agente y lo adapta a tu web. Hay heros, pricing, navbars, formularios y fondos.

Alternativas que hacen lo mismo:

• Magic UI: más de 150 componentes animados, gratis, hechos para ir con shadcn/ui.
• React Bits: más de 200 componentes y fondos animados, gratis.
• Aceternity UI: efectos y secciones con un estilo parecido a 21st.dev.
• shadcn/ui: la base. Botones, formularios, menús y diálogos que luego adaptas.

Adapta colores, letras y espacios a tu web. Cinco componentes con cinco estilos distintos es peor que no usar ninguno.

3. Capturas y HTML de otras webs

Cuando una sección de otra web te gusta, no la describas. Enséñasela.

• Haz una captura de la sección.
• Guarda su HTML: Cmd+S en el navegador, o copia el nodo desde las herramientas de desarrollador.
• Dale las dos cosas al agente con este prompt. Copias la distribución y el espaciado, no el contenido ni la marca.

4. Pide ideas a ChatGPT

Antes de programar, pide a ChatGPT tres propuestas de interfaz en imagen. Dile público, contenido y botón principal. Eliges una y se la das al agente como referencia junto a las capturas del punto anterior.

5. Anima con Motion o GSAP

El movimiento va de menos a más. Una herramienta para cada cosa:

Empieza con transiciones discretas y una animación protagonista. La web tiene que leerse sin esperar a que termine ningún efecto.

6. Vídeo con IA ligado al scroll

Un vídeo que avanza al bajar y retrocede al subir cambia una web. Se hace así:

• Decide qué enseña la escena: un producto girando, una pantalla abriéndose.
• Prepara una buena imagen inicial y genera un vídeo corto con Kling, con un solo movimiento continuo.
• Comprueba que el producto no cambie de forma durante el vídeo.
• Dale el archivo al agente y pide que el avance del vídeo vaya ligado al scroll. «Reproducir al aparecer» y «controlar con el scroll» son efectos distintos: pide el segundo.
• Pide una imagen fija para móviles y para quien tiene reducido el movimiento.

Si da tirones, el problema es el archivo: optimízalo o pasa a una secuencia de imágenes. Resérvalo para la primera pantalla, no para un panel de trabajo.

El orden para revisar: contenido, primera pantalla, tipografía y espacios, imágenes y componentes, animaciones, móvil. En cada vuelta, los tres problemas más visibles.