00:00:00¿Por qué el traspaso de diseño a código sigue siendo la parte más deficiente de construir con IA?
00:00:04Uno pensaría que para estas alturas habría una forma limpia de diseñar algo,
00:00:06modificarlo y que el código se actualizara automáticamente.
00:00:08Pero cada herramienta que nuestro equipo ha probado o hace diseño o hace código. Nunca ambos.
00:00:13Stitch y Bolt son de "instrucción a código". No hay un lienzo de diseño al que puedas volver para editar.
00:00:17El MCP de Figma es de solo lectura, así que la IA puede extraer diseños pero no puede diseñar en él.
00:00:22Y si usas un agente de programación directamente, cada cambio de diseño implica volver a dar instrucciones desde cero.
00:00:26Así que, cuando Pencil.dev empezó a ganar terreno afirmando ser un puente bidireccional entre
00:00:31diseño y código, captó nuestra atención. Pero cuando realmente empezamos a construir con él,
00:00:35el puente no era tan fluido como esperábamos. Y lo que empezó como una simple prueba de herramienta,
00:00:40se convirtió en una investigación mucho más profunda de lo planeado para lograr que este flujo funcionara.
00:00:44Probablemente ya hayas oído hablar de Pencil.dev,
00:00:47la nueva herramienta de diseño con IA que se ha vuelto muy popular entre los diseñadores últimamente.
00:00:51Básicamente es un puente entre las herramientas de diseño especializadas
00:00:56y las herramientas de desarrollo de IA optimizadas para implementar esos patrones de diseño.
00:01:00Se conecta a todos los IDEs agénticos populares e incluye muchas funciones que
00:01:04realmente agilizan el flujo de diseño a código, como la generación de componentes,
00:01:08soporte para librerías de UI y generación automática de clases CSS.
00:01:11Para quienes usan Figma, la interfaz les resultará sumamente familiar.
00:01:15Actualmente es gratuita y nuestro equipo la descargó para probarla.
00:01:18Bajamos la aplicación de escritorio y con ella vinieron opciones para conectar todas las plataformas de IA
00:01:23que teníamos instaladas. La conectamos a Claude Code porque era nuestra
00:01:27herramienta principal y Pencil.dev utiliza plataformas de codificación por IA como
00:01:32Claude Code y Codex internamente para funcionar. Una vez instalada la aplicación,
00:01:36el MCP se configuró automáticamente para Pencil.dev y todas las herramientas aparecieron
00:01:41en Claude Code de inmediato. Con todo listo, los modelos de OpenAI y Anthropic estaban disponibles
00:01:46en el chat. Elegimos Opus 4.6 de entre todos los modelos. Esta herramienta tiene capacidades
00:01:51de diseño muy potentes. Guarda los archivos de diseño como un archivo ".pen" dentro de la carpeta del proyecto,
00:01:56que es básicamente un formato basado en JSON que puedes controlar con Git. Pero la función
00:02:01que realmente la distingue es su capacidad de actuar como un puente bidireccional entre
00:02:06el agente de código y el diseño en la aplicación. Sin embargo, no era exactamente lo que esperábamos
00:02:10al pensar en esa sincronización bidireccional. Asumimos que Claude o cualquier agente de IA
00:02:16sincronizaría el diseño al código y viceversa automáticamente, pero no fue así. Tuvimos que pedirle
00:02:21manualmente que sincronizara porque no lo hace de forma automática; analiza el diseño sección por sección
00:02:26y lo implementa en el archivo HTML. El resultado coincidía exactamente con el diseño del lienzo,
00:02:32pero pensamos que hacer eso tras cada modificación de diseño era demasiado trabajo manual.
00:02:37Nuestro equipo trabajaba en una página de aterrizaje para un estudio de dirección creativa que ya habíamos
00:02:41diseñado usando Pencil.dev conectado con Claude Code y, por lo que veíamos, era un sitio web sólido
00:02:46con una dirección creativa clara, justo como queríamos. Implementamos el diseño
00:02:51usando Claude una vez y lo sincronizamos al proyecto de Next.js en el que trabajábamos, pero había
00:02:56muchos elementos en la página que no nos convencían y necesitaban ajustes. Teníamos que cambiar
00:03:01muchas cosas repetidamente, pero no podíamos estar pidiéndole a Claude que sincronizara una y otra vez
00:03:06con el proyecto implementado porque era una tarea tediosa. Así que lo que hicimos fue
00:03:10crear un script para solucionar este problema. Este script usaba varias librerías de JavaScript
00:03:15diseñadas para monitorear cambios en archivos. También incluía periodos de espera para evitar que
00:03:20Claude se activara constantemente gastando tokens y agotando los límites de la sesión. El propósito
00:03:25del script es vigilar el archivo ".pen" que contiene el diseño y, cada vez que hay un cambio,
00:03:29ejecuta la CLI de Claude con una instrucción sobre cómo sincronizarlo con el proyecto.
00:03:34Pero añadimos el periodo de espera para crear un intervalo entre cada guardado y que no se sincronicen
00:03:39todos los pequeños cambios a la vez. Ahora, para usarlo, solo teníamos que ejecutar el comando "npm run sync"
00:03:44y el proceso comenzaba de inmediato a monitorear el archivo ".pen". Si modificábamos
00:03:49cualquier cosa con este script activo, cada vez que guardábamos el archivo se activaba
00:03:54automáticamente la CLI de Claude y empezaba a sincronizar ese cambio al proyecto sin que tuviéramos
00:03:59que pedírselo explícitamente. Pero antes de usar este script, hay que realizar un paso previo.
00:04:04Debes preconfigurar todos los permisos necesarios para realizar la edición, como lectura, escritura y
00:04:10llamadas a herramientas MCP, añadiéndolos en el archivo "setting.json" dentro de la carpeta ".claude";
00:04:15de lo contrario, Claude se detendrá indefinidamente en la solicitud de permisos. Sin eso, Claude no puede
00:04:20hacer cambios en el proyecto ni completar la implementación correctamente. Con el script en marcha,
00:04:24todo fue más fácil porque ya no necesitábamos pedir la sincronización manualmente. Cada iteración
00:04:29era detectada por el script y enviada automáticamente a Claude para su implementación. Este script,
00:04:34junto con el código fuente de esta aplicación, está disponible en AI Labs Pro. Para quienes no lo sepan,
00:04:39es nuestra comunidad recién lanzada donde obtienes plantillas listas para usar en tus propios proyectos,
00:04:43tanto para este video como para los anteriores. Si valoras lo que hacemos y quieres apoyar
00:04:48el canal, esta es la mejor forma de hacerlo. El enlace está en la descripción. Una de las
00:04:52capacidades de Claude Code es usar un sistema multi-agente, que paraleliza y acelera muchas tareas.
00:04:57Pensamos: ¿por qué no probar la configuración multi-agente con Pencil.dev? Como está conectado
00:05:02como un MCP, probamos usar múltiples agentes para la implementación en Next, dejando que cada uno
00:05:07trabajara en un aspecto diferente de la app simultáneamente. Usarlo con Claude Code facilitó todo
00:05:12porque tiene acceso a todos nuestros archivos de contexto, como el PRD y la guía de UI que solemos crear
00:05:18antes de empezar un proyecto. Necesitábamos implementar las demás páginas del sitio en lugar de
00:05:23dejarlo solo como una página de aterrizaje. Le pedimos manejar esta tarea explícitamente, indicando
00:05:28que cada agente se encargara de un aspecto distinto de la app. Empezamos con la exploración
00:05:33y llamamos a las múltiples herramientas MCP. Como teníamos cinco páginas, Claude generó cinco agentes
00:05:39y puso a cada uno a trabajar en una página específica. Tras un momento, se creó la versión inicial
00:05:44del diseño de la aplicación. Generó todas las páginas necesarias y se aseguró de que el diseño
00:05:48coincidiera con la página de aterrizaje usando las mismas fuentes y estilos. Cuando terminó el diseño,
00:05:54presionamos Command+S para guardar y el script entró en acción implementando automáticamente el diseño
00:05:58en la app para acelerar el proceso manual. En ese punto, aunque el sitio se veía bien, le faltaba algo.
00:06:03No había movimiento en la página y necesitaba animaciones de scroll que guiaran la vista a través
00:06:08de lo que de otro modo sería un diseño estático. Para eso recurrimos a GSAP, nuestra librería favorita
00:06:14por sus robustas animaciones de JavaScript y su facilidad para implementar efectos complejos. Para esto,
00:06:19usamos una instrucción muy detallada escrita en XML. Usamos XML porque los modelos de Claude están
00:06:26optimizados para trabajar mejor con instrucciones estructuradas en XML, facilitándoles el análisis.
00:06:31La instrucción contenía los detalles de la tarea, todas las dependencias requeridas y las notas importantes,
00:06:36apuntando a cada elemento específico y detallando cómo debía comportarse cada sección,
00:06:41todo dentro de sus respectivas etiquetas. Al darle esta instrucción a Claude Code, realizó muchas adiciones,
00:06:46añadió componentes con movimiento GSAP e instaló la propia librería. Una vez completada
00:06:51esa parte de la implementación, revisamos el sitio. Con las animaciones, el sitio web se sentía
00:06:56mucho más vivo e interactivo. La experiencia de navegarlo era totalmente distinta a la versión
00:07:00anterior, que era simplemente estática y sin movimiento. Esta instrucción también está disponible
00:07:04en nuestra comunidad AI Labs Pro, donde puedes descargarla y usarla en tus proyectos. Además,
00:07:09si te gusta nuestro contenido, considera pulsar el botón de "hype", ya que nos ayuda a crear más contenido
00:07:14como este y llegar a más personas. Aunque ya habíamos añadido efectos visuales de scroll con GSAP,
00:07:19agregamos otra capa con Lenis sobre el desplazamiento inicial. Lenis es una librería de scroll fluido
00:07:25de código abierto y es una de las herramientas más populares para crear diseños inmersivos.
00:07:30Quizás te preguntes por qué usar otra librería si ya teníamos animaciones de scroll con GSAP,
00:07:35pero el caso es que Lenis y GSAP se complementan perfectamente.
00:07:39GSAP controla qué sucede al hacer scroll y Lenis controla el aspecto y la sensación del scroll mismo.
00:07:44Sin Lenis, el scroll salta entre posiciones; con ella, la página fluye con suavidad y las animaciones
00:07:49de GSAP se sienten más naturales al activarse. Así que preparamos otra instrucción detallada para esto.
00:07:54Seguimos el mismo enfoque de XML que con GSAP. La instrucción de Lenis se centró
00:07:59en mejorar las animaciones de scroll existentes del paso anterior. La instrucción enumeraba
00:08:04las dependencias, establecía todas las indicaciones y contenía una descripción detallada de los elementos,
00:08:09dónde colocar las animaciones y cómo debía funcionar el comportamiento, terminando con las reglas.
00:08:13Le dimos esta instrucción a Claude Code y dejamos que hiciera muchos cambios en todo el repositorio.
00:08:18Tras implementarlo todo, revisamos el sitio y había mejorado significativamente. El cambio principal
00:08:23fue la adición de un scroll más suave, haciendo la navegación una experiencia mucho más inmersiva.
00:08:28Con el sitio web construido y listo con todas sus funciones, lo último que quedaba era
00:08:32asegurarnos de que cumpliera con los estándares de UX antes de darlo por terminado. Para ello,
00:08:38creamos una habilidad usando Skill Creator llamada "UX Audit". Esta habilidad está enfocada
00:08:44en verificar la calidad de los elementos de la interfaz y asegurar que todo cumpla con los estándares de UX.
00:08:49Constaba de varias fases: recolección de contexto, análisis de una lista de 9 puntos y una fase de informe
00:08:54donde se calificaba según ciertos criterios. También incluía referencias con la lista de UX
00:08:59que detalla cada uno de los 9 puntos y scripts de Python diseñados para detectar
00:09:04automáticamente diversos problemas de UX que el ojo humano podría pasar por alto.
00:09:08Al ejecutar la auditoría, recopiló todos los problemas y señaló dos críticos y varios mayores y menores.
00:09:14Los problemas críticos eran el contraste de colores. La métrica de puntuación calificó el sitio con una "C"
00:09:19debido a los problemas identificados. Proporcionó todos los cambios necesarios en detalle y,
00:09:24una vez definidos, le pedimos implementar las soluciones. Tras realizar todos los cambios,
00:09:29aunque el sitio no se viera drásticamente distinto, tuvo una gran mejora en usabilidad,
00:09:34siendo más fácil de navegar y cumpliendo con las normas WCAG. Al repetir la auditoría,
00:09:40la calificación subió de C a B, lo que significaba que los problemas mayores se habían resuelto.
00:09:45Con esto llegamos al final del video. Si quieres apoyar el canal y ayudarnos a seguir
00:09:50creando videos como este, puedes hacerlo usando el botón de "Súper gracias" de abajo. Como siempre,
00:09:55gracias por vernos y los espero en el próximo video.