00:00:00¿Cómo saber qué herramientas de diseño valen la pena cuando sale una nueva cada semana?
00:00:04El problema es que se lanzan herramientas a diario que prometen calidad, pero la mayoría son puro humo.
00:00:09Al probarlas, encontramos algunas que sí cumplen lo que prometen y se adaptan bien a nuestro flujo de trabajo.
00:00:15Un miembro de nuestro equipo trabajaba en la página de un producto para un coche con una animación 3D inicial.
00:00:21El código fuente de este sitio y todas las funciones utilizadas están disponibles en AI Labs Pro.
00:00:25Es nuestra nueva comunidad con plantillas, prompts y comandos listos para usar en tus proyectos de este y otros vídeos.
00:00:36Si valoras lo que hacemos y quieres apoyar al canal, esta es la mejor forma. Enlaces en la descripción.
00:00:42El primer paso para una web así es tener un buen recurso, y para ello usé Tripo3D, el generador de objetos 3D por IA.
00:00:50Al registrarme recibí unos 300 créditos, más que suficientes para unas 10 generaciones.
00:00:54Ahora necesitaba una imagen para convertirla a 3D.
00:00:57Tenía la imagen del coche, pero el fondo estorbaba; a estas herramientas les cuesta separar fondo y figura y no quería malgastar créditos.
00:01:08Así que quité el fondo con la herramienta de Canva, aunque Remove BG es una alternativa gratuita.
00:01:16Con el fondo eliminado, fui a Tripo3D y usé esa imagen como referencia.
00:01:21Tardó un minuto en generar el modelo y se parecía muchísimo a la imagen.
00:01:25Pude revisar todos los ángulos y el modelo mantenía la coherencia por todos los lados.
00:01:31Una vez listo el modelo 3D, lo exporté.
00:01:34En el plan gratuito de Tripo3D solo tienes 15 exportaciones; tras dos intentos, descargué el que mejor funcionó.
00:01:43Configuré la resolución a 4K y lo exporté.
00:01:45Tras descargar el archivo GLB, lo añadí al directorio público de una nueva app de Next.js para acceder a él fácilmente.
00:01:52Exporté en GLB porque incluye texturas y materiales en un solo archivo y es un formato web nativo ideal para librerías.
00:02:04Con el archivo GLB listo, era hora de implementarlo en la aplicación web.
00:02:08Para crear la landing page, elegí la app Codex, recién lanzada y disponible solo para macOS.
00:02:14¿Por qué usar Codex si ya tenemos Claude code?
00:02:19Con su nuevo lanzamiento ofrecen límites ampliados y cuotas generosas en planes gratuitos; es el mejor momento para aprovecharlo.
00:02:29Pero puedes seguir el mismo proceso con cualquier agente que prefieras.
00:02:32Descargué Codex y abrí la carpeta del proyecto en él.
00:02:34La interfaz se parece mucho al gestor de agentes de AntiGravity, pero más centrada en agentes que en código.
00:02:40Lo que más nos gustó fue la función de habilidades (skills).
00:02:43En otros agentes, para crear una habilidad propia necesitas un creador externo de código abierto.
00:02:49Codex ya trae un creador integrado y muchas habilidades listas para usar tras la instalación, algo que otros no tienen.
00:02:56Para simplificar la animación 3D, usé el creador de habilidades detallando cómo debía ser y qué librerías usar.
00:03:06Tras responder unas preguntas, ejecutó los scripts, creó la habilidad y la dejó lista.
00:03:13Hubo un detalle diferente.
00:03:14Los agentes suelen instalar habilidades en su carpeta .agent o .claude, pero Codex la puso en la raíz, así que la moví manualmente.
00:03:24Aun así, seguía el patrón del framework de agentes de Claude, con scripts, referencias y recursos para añadir capacidades.
00:03:33También incluía un archivo yaml con el prompt genérico que sirve de referencia al agente para activar la habilidad.
00:03:40Le pedí a Codex configurar las animaciones con la habilidad recién creada, detallando todo en el prompt.
00:03:47Comenzó la implementación y ejecutó los comandos de instalación.
00:03:49Tras un rato terminó, pero no pudo instalar las dependencias por un tiempo de espera agotado, así que pedí que las escribiera en el package.json.
00:04:01Al instalar manualmente, tuve errores por conflictos de versiones entre las librerías del proyecto.
00:04:08Tuve que depurar con Codex varias veces hasta que la animación de la sección principal funcionó como quería.
00:04:14Como Codex tardaba mucho con funciones individuales, dividí el trabajo en cuatro subtareas.
00:04:21Cada tarea era una función aislada de la landing page con sus propios objetivos, requisitos y restricciones.
00:04:28Usé la función multi-agente de Codex y asigné una tarea a cada agente.
00:04:32Al trabajar en la misma página, usé “work trees” separados para evitar conflictos de código en la rama principal.
00:04:43Casi todos los agentes terminaron sus tareas en un tiempo similar.
00:04:46Fusioné los resultados y obtuve todas las funciones sin conflictos y mucho más rápido que usando Codex solo.
00:04:55Con la web lista, todo menos la cabecera se veía plano y sin animaciones, así que recurrí a GSAP.
00:05:03GSAP es la librería de animaciones en JavaScript que usan los profesionales por su rendimiento constante.
00:05:09Debido a los conflictos previos y el error de tiempo de espera, instalé GSAP manualmente con npm antes de implementar.
00:05:18Di a Codex un prompt muy detallado para añadir animaciones, ordenándole no tocar la sección principal que ya estaba bien.
00:05:27Añadí instrucciones específicas sobre dónde y cómo animar. Esta tarea le llevó bastante tiempo.
00:05:33Hubo pequeños errores que corregí reenviando los mensajes de error a Codex.
00:05:37Tras eso, las animaciones se aplicaron y la sección inicial se mantuvo intacta.
00:05:42Pero las animaciones por scroll en el resto de secciones mejoraron muchísimo la sensación general del sitio.
00:05:48Aunque tenía animaciones, los componentes aún se veían planos comparados con la cabecera.
00:05:54Fui a Aceternity UI y elegí componentes allí, porque ya vienen con microinteracciones y animaciones listas para usar.
00:06:04Pedí a Codex sustituir los componentes actuales por los de Aceternity manteniendo las animaciones.
00:06:10Tras implementarlo, vi que añadió degradados que no encajaban con el tema de la aplicación.
00:06:14Le pasé una captura señalando que los degradados no pegaban y entonces los cambió por colores acordes.
00:06:21Pero al ver las animaciones, los componentes eran estáticos y les faltaban las microinteracciones típicas de Aceternity.
00:06:30Le dije a Codex que usara las versiones con efectos de inclinación al pasar el ratón en lugar de las simples.
00:06:38Tras eso, los componentes ya tenían los efectos de interacción y el sitio se sentía mucho más vivo.
00:06:44Para mejorar lo visual, usé un repositorio público llamado post-processing, disponible como paquete NPM.
00:06:51Es una capa de animación de post-procesado que se aplica tras los efectos al usar React Three Fiber.
00:06:56Permite usar corrección de gamma y otros refinamientos de imagen para resultados de alto rendimiento.
00:07:01Pedí a Codex usar esta librería para crear efectos de luz sutiles y que me guiara en el proceso.
00:07:07No lo logró a la primera y no se notaba ningún cambio en el resultado.
00:07:11Tuve que depurar varias veces hasta que consiguió el efecto: un brillo sutil al modelo 3D que dio un acabado profesional.
00:07:23Con esto llegamos al final del vídeo.
00:07:25Si quieres apoyar al canal y ayudarnos a seguir creando contenido así, puedes usar el botón de “Súper gracias”.
00:07:31Como siempre, gracias por vernos y nos vemos en el próximo vídeo.