00:00:00Claude Code es realmente genial, pero nuestro equipo ha empezado a usarlo para todo.
00:00:03Anthropic se dio cuenta de esto y hace un tiempo introdujeron el concepto de “skills” o habilidades.
00:00:07Pero con el lanzamiento de Nano Banana Pro, la gente empezó a tomar una dirección totalmente distinta,
00:00:12usando productos de Google como anti-gravity para construir mejores sitios.
00:00:15Probamos anti-gravity, pero en nuestra opinión está demasiado verde ahora mismo.
00:00:19Sabemos que los fans de anti-gravity se nos echarán encima.
00:00:21Pero eso es tema para otro vídeo; el caso es que las imágenes que genera son gratuitas.
00:00:25Así que pensamos: ¿por qué no dejar que Claude gestione el código y anti-gravity solo las imágenes?
00:00:30Pero aquí está el detalle.
00:00:31Para estos distintos casos de uso, no deberías estar dándole instrucciones a Claude desde cero cada vez.
00:00:35Deberías entrenarlo y crear una habilidad dedicada.
00:00:37Claude publicó hace poco una guía sobre cómo deben construirse realmente las habilidades.
00:00:41Y la parte más importante es el testeo y la iteración.
00:00:44Sinceramente, la guía cambió por completo nuestra forma de pensar en estas habilidades.
00:00:48Puede que ya hayas oído hablar del Skill Creator.
00:00:50Es la habilidad oficial de Claude Code que te orienta para crear habilidades eficaces.
00:00:55Pero un miembro de nuestro equipo descubrió que todavía está desactualizada
00:00:58según la nueva guía que hemos publicado.
00:01:00Así que hicimos que se actualizara y cambiaron muchas cosas
00:01:02según las nuevas directrices, logrando mejoras muy buenas.
00:01:05Usando este Skill Creator actualizado y tras mucha iteración costosa,
00:01:09hemos creado esta nueva habilidad de interfaz para nano banana.
00:01:12Pero la habilidad con la que empezamos y la que terminamos resultaron ser cosas completamente distintas.
00:01:16Ambas habilidades estarán disponibles en AI Labs Pro.
00:01:19Para quienes no lo sepan, es nuestra comunidad recién lanzada
00:01:22donde obtienes plantillas listas para usar que puedes integrar directamente en tus proyectos
00:01:26para este vídeo y todos los anteriores.
00:01:28Si valoras lo que hacemos y quieres apoyar al canal,
00:01:31esta es la mejor forma de hacerlo. Tienes el enlace en la descripción.
00:01:34Ya teníamos resuelto el proceso de coordinación entre Claude Code y Anti-Gravity.
00:01:38Así que abrimos el mismo directorio tanto en Claude Code como en Anti-Gravity.
00:01:42Claude inicializó el proyecto y lo único que le importaba a Anti-Gravity era esta carpeta pública,
00:01:47que contendría todas las imágenes.
00:01:49Claude nos daría los prompts y los nombres de archivo de las imágenes que
00:01:53Anti-Gravity debía producir. Esos prompts se metieron en Anti-Gravity.
00:01:56Este activó su herramienta de generación de imágenes y, mediante procesamiento en paralelo,
00:02:00generó varias imágenes al mismo tiempo.
00:02:03Pueden ver que generó tres imágenes y las tres se guardaron en esta carpeta de imágenes.
00:02:08Una vez colocadas, Claude supo automáticamente que estaban allí y pudo trabajar con ellas fácilmente.
00:02:12Pero en cuanto empezamos a generar imágenes de verdad, varias cosas empezaron a fallar.
00:02:17Seguro que lo han oído muchas veces, pero la ingeniería de descripciones es de las
00:02:21cosas más importantes al crear estos flujos de trabajo repetitivos. Estas descripciones son el
00:02:26front matter de YAML que siempre se carga en el contexto de Claude Code al abrirlos.
00:02:30Y así es como Claude decide realmente si necesita cargar tu habilidad o no.
00:02:34Pero muchos usuarios informan que las habilidades se cargan en el contexto cuando no son necesarias.
00:02:38Y eso es porque la mayoría de las descripciones solo dicen qué hace la habilidad.
00:02:41Una buena descripción responde en realidad a dos preguntas.
00:02:44¿Qué hace la habilidad? ¿Y cuándo debería usarla Claude?
00:02:46Aquí es donde entran las frases de activación. Son las que realmente piden que se use la habilidad,
00:02:51como “construye una landing page” o cuando mencionamos “nano banana”. Pero no se trata solo de cuándo usarla.
00:02:57La guía también menciona activadores negativos, que le dicen a Claude cuándo NO debe usar la habilidad.
00:03:01Por ejemplo, definimos que no debe cargarse para correcciones de errores simples o trabajo de base de datos.
00:03:05Así que la diferencia entre una descripción buena y una mala está clara.
00:03:08Pueden ver que esta habilidad del nuevo creador tiene múltiples frases de activación y activadores negativos,
00:03:13mientras que esta del antiguo creador solo describe qué hace la habilidad.
00:03:17También hay instrucciones puramente cuantitativas y relacionadas con la sintaxis,
00:03:21pero no hace falta que se preocupen por eso.
00:03:23porque nos ayuda a crear más contenido como este y llegar a más gente.
00:03:27porque nos ayuda a crear más contenido como este y a llegar a más personas.
00:03:31Normalmente, al generar diferentes imágenes, la mayoría debían tener dimensiones
00:03:35distintas porque necesitaban ajustarse o usarse para diferentes casos.
00:03:39Y eso es lo que especificaba el prompt antes de que hiciéramos los cambios.
00:03:42Pero lo que ocurría siempre era que, cada vez que intentábamos usar esas dimensiones personalizadas,
00:03:46la herramienta de generación de imágenes de anti-gravity solo generaba imágenes cuadradas.
00:03:50Normalmente esto no es un problema con el modelo simple de la app Gemini o de Google AI Studio.
00:03:55Pero aquí tuvimos que cambiar el proceso y modificar la habilidad en consecuencia.
00:03:58Se hizo referencia a ello en todo el skill.md en las etapas correspondientes,
00:04:02y también dentro de las reglas de prompts: que siempre que escribiera un prompt,
00:04:06no especificara dimensiones ni relación de aspecto, porque no importaba realmente.
00:04:10Y si necesitaba recortar la imagen para un uso específico,
00:04:12debía hacerlo después con su herramienta de recorte de imágenes.
00:04:15Y por eso la carpeta de scripts es tan importante.
00:04:18Aloja estas herramientas ejecutables que Claude puede llamar con argumentos específicos,
00:04:22y tú descubres estas herramientas según tus diferentes necesidades.
00:04:25Un buen script tiene estos argumentos de CLI con diferentes modos,
00:04:29para que Claude pueda llamarlo fácilmente.
00:04:31Y algo que uno de nosotros descubrió que era muy necesario son los modos de vista previa,
00:04:35que ayudan a Claude a previsualizar el resultado antes de realizar operaciones destructivas.
00:04:40Hagamos una pausa para hablar del patrocinador de hoy.
00:04:42Después de esto, veremos el error estructural que comete
00:04:45la mayoría de la gente al construir sus habilidades.
00:04:47CREAM
00:04:47Para desarrolladores y fundadores de SaaS, el mayor dolor de cabeza no es construir.
00:04:50Es la pesadilla de los impuestos globales y el cumplimiento del IVA.
00:04:53CREAM es un comerciante oficial que se encarga de toda esa carga, permitiéndote centrarte en el desarrollo.
00:04:58Creado para la próxima ola de negocios digitales,
00:05:00CREAM ofrece una configuración ultrarrápida para aceptar pagos en más de 100 países desde el primer día.
00:05:05Han eliminado la confusión de las tarifas ocultas,
00:05:07ofreciendo una tarifa plana transparente del 3,9% + 40 céntimos.
00:05:11Eso es todo.
00:05:11La misma tarifa tanto si el cliente está en Tokio como en Texas, use American Express o Google Pay.
00:05:16Obtienes funciones potentes como repartos automáticos de ingresos para asegurar un lanzamiento fluido.
00:05:20Usa siempre su modo de prueba aislado y el SDK de TypeScript dedicado.
00:05:23Además, CREAM ofrece habilidades oficiales de agentes de IA para Claude Code, Cursor y WinSurf.
00:05:28Solo dile a tu asistente de IA que integre CREAM,
00:05:30y generará al instante código seguro y listo para producción basado en sus mejores prácticas de API.
00:05:36Recuerda: nunca subas tus claves de API al control de versiones.
00:05:39Si estás listo para una pasarela de pagos, haz clic en el enlace del comentario fijado.
00:05:42Deja de preocuparte por los impuestos y empieza a escalar con CREAM.io.
00:05:45Puede que ya nos hayas oído hablar de la divulgación progresiva en muchos de nuestros vídeos
00:05:50anteriores, porque no solo se aplica a habilidades, sino que es vital para la ventana de contexto.
00:05:55Esto significa que el agente solo debe saber algo si lo necesita en ese preciso momento.
00:05:59Ya saben que la descripción siempre se carga dentro del contexto de Claude Code.
00:06:03Y por eso estas habilidades usan una estructura de tres niveles,
00:06:06donde el primer nivel siempre está dentro del contexto de Claude.
00:06:09Luego el segundo nivel es el cuerpo del skill.md, y debe tener referencias al nivel 3,
00:06:14incluyendo el flujo de trabajo completo e instrucciones sobre cómo usar las referencias.
00:06:18Y dentro de esa estructura, la guía oficial define algo llamado la sección crítica.
00:06:23Debes listar la información más importante justo ahí al principio,
00:06:26y no tenerla escondida bajo todas estas instrucciones diferentes.
00:06:29Pueden ver claramente que esta habilidad solo tiene el skill.md y carece de la estructura de nivel 3.
00:06:34Esto se debe a que todo el flujo de trabajo, los consejos, las recomendaciones
00:06:38y las pautas de resolución de problemas están metidos en un solo archivo.
00:06:41No es así como debería estar estructurado,
00:06:43porque puede que no necesite esas pautas en el momento actual.
00:06:45Debería cargar primero solo el flujo de trabajo,
00:06:47y luego traer las reglas de prompts solo cuando sea el momento de escribirlas o usarlas.
00:06:51Por otro lado, esta habilidad está claramente estructurada con referencias
00:06:54y los diferentes scripts que necesita.
00:06:56Y junto al flujo de trabajo, el archivo tiene activadores claros de cuándo ejecutar cada script,
00:07:01y cuándo consultar las referencias para las distintas pautas.
00:07:04Así, en el skill.md, solo tiene el flujo de trabajo para la habilidad nano banana.
00:07:08Y después, en la sección de referencias, tiene las diferentes pautas,
00:07:12donde las reglas de prompts contienen las 13 reglas de prueba distintas
00:07:15que encontramos tras nuestras pruebas de iteración.
00:07:17Pero incluso con toda esta estructura, Claude Code seguía encontrando formas de saltarse pasos.
00:07:22Después de generar el primer lote de imágenes,
00:07:24era inevitable que necesitaran regeneraciones,
00:07:26porque nano banana no siempre genera el resultado más preciso.
00:07:29Lo sorprendente es que Claude no verificó esto por sí mismo.
00:07:33Tuvimos que preguntarle si las imágenes eran buenas según el diseño que quería hacer.
00:07:37De lo contrario, habría seguido adelante e implementado las que produjo.
00:07:41De nuevo, por eso dijimos que la iteración lo es todo al construir estas habilidades.
00:07:45Ya teníamos un paso para validar recursos, que usaba el script validate images,
00:07:49pero eso solo validaba si las imágenes eran correctas estructuralmente,
00:07:52no si las imágenes eran estéticamente correctas.
00:07:55No tenía nada que ver con la estética.
00:07:57Para la estética, Claude tenía que hacer una revisión visual por sí mismo,
00:08:00donde evaluaría estas preguntas y decidiría si la imagen pasaba o fallaba.
00:08:04Y si fallaba, debía proporcionar un motivo también.
00:08:07Esto se debe a que si la imagen fallaba en la revisión visual,
00:08:09tenía que borrarla y luego escribir un nuevo prompt corregido.
00:08:13Y dependiendo de en qué modo estuvieras, si estabas en modo anti-gravity,
00:08:16te daría un nuevo prompt, incluyendo el motivo por el que falló el anterior,
00:08:20para que anti-gravity pudiera generar imágenes nuevas y mejores.
00:08:23Por eso aquí anti-gravity dice que ha regenerado la imagen del cristal,
00:08:27y que esta vez sí cumple con los requisitos.
00:08:29De ahí que si estás creando un flujo de trabajo, sea vital tener estas puertas de validación.
00:08:34Las puertas de validación son bloqueos explícitos que definen qué debe completarse
00:08:39antes de poder pasar a la siguiente parte del flujo de trabajo.
00:08:41Y como vieron, si depende de Claude, construirá felizmente la interfaz con imágenes corruptas o faltantes,
00:08:46y no verificará nada a menos que se lo digas.
00:08:48Así, por ejemplo, en esta habilidad,
00:08:50pueden ver claramente que el flujo tiene múltiples pasos que debe seguir.
00:08:54Y entre otros errores,
00:08:55no ha escrito ninguna puerta de validación antes de pasar al siguiente paso.
00:08:59Ahora, estas puertas de validación siguen siendo prompts.
00:09:01No es que sean unos comandos mágicos de bash.
00:09:04Pero si se va a reutilizar cada vez sin ninguna variación,
00:09:08deberías crear una herramienta y listarla como la puerta de validación.
00:09:11Pero en este caso, entre los múltiples pasos, tenemos estas puertas
00:09:15que no solo ayudan a impedir que pase de una parte del proceso a otra,
00:09:19sino que también forman un miniproceso dentro de cada flujo de trabajo.
00:09:22A medida que experimentes e iteres con tu proceso una y otra vez,
00:09:26verás que te encuentras con muchos errores, algunos de los cuales ya hemos visto.
00:09:30Por ejemplo, imágenes faltantes o corruptas, salidas de API parciales,
00:09:34o scripts que se cierran debido a un fallo parcial.
00:09:36Y por todo ello, mientras iteras en la habilidad,
00:09:39un buen creador de habilidades debe anotar el manejo de errores para cada caso y definirlos claramente.
00:09:44Porque si ya ha pasado una vez, puede volver a pasar.
00:09:46Y debería manejarse en este formato.
00:09:48Definir el error, luego la causa (para que Claude lo sepa),
00:09:51y después los pasos para solucionar el problema.
00:09:54De nuevo, cuando le decimos que cree una landing page, solo carga la habilidad y lee tus archivos.
00:09:58Si ya tienes un proyecto de Next.js, lo detecta y te hace preguntas,
00:10:02como para qué es la página y si quieres imágenes generadas por IA o no.
00:10:06Si dices que no las quieres, simplemente usa sus recursos de front-end para construir la página.
00:10:11Esto es porque, mientras lo construíamos, también le pedimos a Claude que terminara
00:10:16esta habilidad de diseño front-end, que tiene muchísimas pautas excelentes
00:10:19para implementar sitios que se vean realmente bien.
00:10:22Y tras toda la experimentación, esto fue lo que generó para nosotros.
00:10:27Aquí pueden ver la imagen que habíamos generado,
00:10:29y tiene este sutil efecto de animación.
00:10:32Aparte de eso, es una página muy limpia y las imágenes no están recargadas.
00:10:36Solo se aplicaron en los lugares donde realmente hacían falta.
00:10:39Pero cuando se generó por primera vez, hubo problemas con la fuente que usaba.
00:10:43Simplemente no funcionaba bien.
00:10:44Así que buscamos esta fuente tipográfica específica con la que experimentaron,
00:10:48y eso fue lo que realmente nos solucionó los problemas de tipografía.
00:10:51Así que, de nuevo, estamos reclutando diferentes recursos
00:10:54que ni siquiera están relacionados con esta habilidad de diseño de nano banana,
00:10:57y los ponemos ahí para que tenga esas capacidades donde las necesite.
00:11:00En divulgación progresiva, ya hablamos de los archivos adicionales con referencias y scripts.
00:11:06Ahora profundizamos en las referencias, que son inteligencia específica del dominio.
00:11:09Y aunque tu habilidad esté lista para un dominio concreto,
00:11:12puede tener estos pequeños paquetes de conocimiento múltiples como componentes separados.
00:11:16Por ejemplo, en estas referencias, hemos listado patrones de diseño,
00:11:19estética front-end y reglas de prompts.
00:11:21De esta forma, podemos seguir ampliando la base de conocimientos de la habilidad sin saturar el contexto.
00:11:26Hasta ahora, todos los consejos que has visto te dicen cómo entrenar a Claude para que haga mejor las tareas.
00:11:31Pero no te dicen cómo usarlo adecuadamente.
00:11:33Para eso, tenemos otro vídeo donde mostramos las 10 formas
00:11:36más actuales de sacar ventaja con Claude Code.
00:11:39Verás el vídeo en la pantalla final,
00:11:41así que mejor haz clic ahí en lugar de buscarlo.
00:11:43Con esto llegamos al final del vídeo.
00:11:45Si quieres apoyar al canal y ayudarnos a seguir haciendo vídeos como este,
00:11:49puedes hacerlo usando el botón de “super thanks” de abajo.
00:11:51Como siempre, gracias por vernos, y nos vemos en el próximo.