00:00:00Este es Pencil, una herramienta de diseño de ambiente que convierte prompts de cualquier asistente de IA
00:00:05en diseños visualmente atractivos frente a tus ojos y que puedes editar como si estuvieras en Figma.
00:00:10Es compatible con componentes, kits de UI, variables CSS y es completamente gratuito.
00:00:15Pero con Sketch y ahora la nueva herramienta MCP de Figma que parece hacer algo similar,
00:00:19¿es Pencil una herramienta que los diseñadores realmente van a usar?
00:00:22Suscríbete y vamos a descubrirlo.
00:00:24No es ningún secreto que la IA no es increíble diseñando.
00:00:28Digo, solo echen un vistazo a esto.
00:00:30Y aunque añadir habilidades con modelos de última generación ayuda,
00:00:33a veces quieres retocar el diseño o recibir la aprobación del cliente antes de pasar al código.
00:00:38Y aquí es donde entra Pencil.
00:00:40Es una herramienta de diseño basada en agentes que funciona localmente en tu IDE o como app independiente.
00:00:46Y es la herramienta de diseño perfecta para gente a la que le gusta usar Claude Code, como a mí.
00:00:51Así que vamos con una demo rápida.
00:00:52Aquí tienen a Pencil en todo su esplendor.
00:00:54Si alguna vez han usado Figma, les resultará muy familiar, con opciones a la izquierda
00:00:59y algunas opciones más específicas para el lienzo o el marco aquí a la derecha.
00:01:03Este es el primer archivo que verás cuando termines de configurar Pencil.
00:01:07Y en lugar de ir por el paso uno y el paso dos,
00:01:09iré directamente al paso tres para que vean qué está pasando.
00:01:12Aquí tenemos un prompt a este lado,
00:01:14y podrías hacer clic en “run” para ejecutarlo dentro de la ventana de chat de aquí.
00:01:18Pero lo que voy a hacer en realidad es usar Claude Code en la terminal,
00:01:22que tiene mis habilidades, mis servidores MCP y todo a lo que estoy acostumbrado
00:01:26para que Pencil pueda beneficiarse de todo eso.
00:01:29Así que voy a copiar este prompt y, dentro de Claude Code (feliz primer cumpleaños, por cierto),
00:01:33voy a pegar el prompt y le diré que use el servidor MCP de Pencil
00:01:37solo para ir sobre seguro.
00:01:39Básicamente, el prompt le dice a Pencil que diseñe un panel para una plataforma de gestión de rovers
00:01:44usando los componentes.
00:01:45Es decir, los componentes que existen aquí abajo dentro de este kit de UI Lunaris.
00:01:50Si vuelvo al marco, pueden ver que está creando el panel para mí en tiempo real.
00:01:56Y si vuelvo a Claude Code, podemos ver exactamente qué está haciendo.
00:01:59Está usando la herramienta de diseño por lotes MCP de Pencil para poblar la barra de navegación.
00:02:05Ya terminó el paso uno, que configuró la estructura del diseño principal.
00:02:08Y si vuelves a Pencil, puedes ver el diseño siendo añadido y modificado en tiempo real.
00:02:13Y ahora que Claude ha terminado, podemos cambiar el diseño al momento.
00:02:17Debo decir que estoy muy impresionado con lo que ha logrado hacer,
00:02:20desde seleccionar los iconos correctos hasta usar los colores adecuados y este bonito selector aquí,
00:02:25hasta tener estos botones geniales.
00:02:27He notado que el texto “mostrar 10 registros” está muy pegado al borde.
00:02:31Así que haré clic en él y cambiaré un poco el padding.
00:02:34Y esa es la belleza de Pencil.
00:02:36Cualquier cosa que quieras cambiar en el diseño, puedes hacerlo igual que en Figma,
00:02:40pero sin estar limitado a este kit de UI.
00:02:42De hecho, hay muchísimos para elegir: desde shadcn hasta este Lunaris, Halo, Nitro,
00:02:48y hay incluso más a partir de ahí.
00:02:49Porque si hago clic en shadcn, pueden ver que tengo más opciones en el área de temas
00:02:54para cambiar a modo oscuro, cambiar algunos colores (amarillo para los botones),
00:02:58e incluso cambiar el fondo general.
00:03:01Pero también hay kits de UI que puedo usar para guiarme en mi diseño.
00:03:05Por ejemplo, hagamos algo completamente desde cero.
00:03:08Voy a hacer clic aquí y, por defecto, usa el chat,
00:03:11pero puedo copiar esto y llevarlo a la ventana de chat.
00:03:13Pero antes de eso, iré a archivo, nuevo, para tener un lienzo en blanco.
00:03:17Luego le daré un ancho de unos 800, quizás 1024, y haré la altura un poco mayor.
00:03:24Ahora, con el marco seleccionado, haré que Claude use la guía de estilo.
00:03:28Y una vez hecho, le daré un prompt: “crea un sitio web
00:03:32para una panadería francesa de estilo bohemio obteniendo imágenes de Unsplash” y demás.
00:03:36Pulsaré enter y veremos qué produce.
00:03:39No tengo idea de qué esperar, así que veamos qué hace.
00:03:42me hace algunas preguntas de seguimiento sobre el sitio web.
00:03:45me hace algunas preguntas de seguimiento sobre el sitio web.
00:03:47Y ahora se pone manos a la obra.
00:03:49De hecho, ha sugerido un marco más ancho que el que puse inicialmente.
00:03:52Voy a acelerar el vídeo para que las cosas vayan un poco más rápido.
00:03:55Parece que Claude ha terminado las tres páginas que dijo que iba a crear.
00:03:59Y si echamos un vistazo a los diseños, honestamente se ve impresionante.
00:04:02Es cierto que hay cosas aquí que yo cambiaría,
00:04:06pero si viera esto en una web, no asumiría que fue creado por una IA,
00:04:10desde el logo hasta las imágenes usadas y todo el diseño.
00:04:14Se ve increíble.
00:04:16Y no me preocupan demasiado los errores
00:04:17porque todo lo que necesito es hacer doble clic en lo que quiero cambiar.
00:04:20Aquí puedo arrastrar el texto de esta forma y cambiarlo un poco.
00:04:24Y listo. Eso está prácticamente arreglado.
00:04:26Le voy a pedir a Claude que programe esto en un sitio web funcional.
00:04:30Y aquí lo tienen. Este es el sitio.
00:04:32No esperaba que añadiera este fondo de pan,
00:04:35ya que no aparece en los diseños, pero está bien.
00:04:38Bajemos un poco.
00:04:39Ha replicado casi todo punto por punto, lo cual es muy impresionante.
00:04:44Vamos a la página de “nuestra historia” y perfecto.
00:04:47Se ve exactamente como en los diseños, con el texto cuidado, los tres pasos
00:04:52y el detalle de que solo usan ingredientes que ellos comerían, que es genial.
00:04:56Todas las imágenes están en su lugar e incluso el menú se ve muy bien.
00:05:00Me gusta la línea horizontal que ha añadido al final de cada artículo.
00:05:04La belleza de este diseño es que, al ser creado por IA,
00:05:07puedo conectarlo a cualquier base de datos. Así usa datos reales.
00:05:10Puedo usar cualquier otra herramienta o habilidad MCP para mejorar la calidad del sitio.
00:05:15Sin mencionar que, si ya tuviera diseños en Figma,
00:05:18podría ir a archivo e importar desde Figma para usarlos también en Pencil.
00:05:22He dejado un enlace a esta web en la descripción para que puedan probarla ustedes mismos.
00:05:25Sinceramente, me he divertido mucho creando diferentes diseños con prompts
00:05:29y ver cómo se construyen ante mis ojos con la opción de editarlos luego se siente mágico.
00:05:35Además, los archivos de Pencil son puro JSON,
00:05:38así que es fácil para un agente de IA entenderlo y traducirlo a código.
00:05:42Pero por muy increíble que sea Pencil, no es perfecto.
00:05:46Tuve un problema con el chat integrado, que por alguna razón no parecía responder.
00:05:50La capa de “generando” en archivos nuevos a veces no desaparecía a menos que guardara o reiniciara Pencil,
00:05:56y se sentía bastante lento al realizar ciertas acciones.
00:05:59Pero honestamente, creo que son detalles menores en los que el equipo probablemente esté trabajando,
00:06:04al igual que en la capacidad de crear o importar kits de UI personalizados como los de Tailwind Plus.
00:06:11Y les recuerdo que esta herramienta es completamente gratuita por ahora.
00:06:15Así que aprovéchenla al máximo, porque no durará siempre al estar respaldada por capital de riesgo.
00:06:19Yo no soy diseñador. Sí, ¡sorpresa!
00:06:22Y aunque no he probado la herramienta MCP de Figma o la de Sketch, por lo que he visto en línea,
00:06:28parece que Pencil es mucho más fácil de configurar por su integración fluida con tantas herramientas.
00:06:34Hablando de fluidez, si alguna vez quisieron que Claude Code diseñara interfaces de terminal al vuelo,
00:06:39en lugar de programarlas a mano, echen un vistazo a este vídeo sobre Claude Canvas,
00:06:42donde les mostraré exactamente cómo hacerlo.