00:00:00Hola, el video de hoy trata sobre Paper. Paper es básicamente Figma pero para el código de Claude o
00:00:05Cursor. Aquí pueden ver un ejemplo. Tenemos Paper para escritorio ejecutándose, pero luego puedes
00:00:10controlarlo todo a través del código de Claude, que es lo que están viendo aquí, y es
00:00:14genial porque puedes convertir muy fácilmente entre tus componentes
00:00:19y tu código. Pueden ver que empresas como Vercel lo usan, Z, Dub. Muchos
00:00:24productos geniales lo están usando. Así se ve la aplicación al empezar.
00:00:28Este es el proyecto de demostración que recibirán la primera vez. Podrán
00:00:31descargar la aplicación desde paper.design/downloads y luego el siguiente paso
00:00:35que deben hacer es instalar un servidor MCP. Si quieren instalar esto en
00:00:40Cursor, solo hagan clic en este botón, que de hecho ya lo hice, pero ahora
00:00:43vamos a probarlo en el código de Claude. Así que vamos a copiar esto.
00:00:47Esto añadirá el servidor MCP de Paper al ámbito de usuario, lo que significa que todos
00:00:53los proyectos de la computadora pueden acceder a él. Normalmente se limita al proyecto
00:00:57cuando añades un servidor MCP, y aquí pueden ver que el transporte es local. Esto
00:01:01se conectará a la aplicación de escritorio de Paper. Así que voy a instalarlo
00:01:06aquí y ahora que lo tenemos instalado, vamos a abrir Claude. He abierto
00:01:11cuatro ventanas aquí en Cmux. Básicamente es Ghosty ejecutándose al estilo
00:01:17Tmux donde tenemos cuatro ventanas diferentes, así que vamos a hacer unas
00:01:19cuantas demostraciones. Pensé que por qué no tener varias ventanas. Lo que vamos
00:01:22a hacer a continuación es copiar este prompt a una terminal. Vamos a
00:01:28hacer una app de control de gastos en Paper. Veamos cómo queda. Pueden
00:01:33ver que saldrá una demo como esta, pero veremos cómo queda en realidad.
00:01:36Mientras tanto, voy a poner en marcha otras tareas. Crea
00:01:40una página de aterrizaje de demo en Paper y haz que me impresione. Veamos si lo hace
00:01:44bien. Crea un panel de control para una app de finanzas. Hagamos eso y
00:01:48crea el sistema de diseño para una app social tipo Twitter. Voy a ejecutar
00:01:53todas estas en paralelo. No sé cómo van a quedar, así
00:01:56que veamos qué tal funciona. Aquí pueden ver la ejecución anterior
00:02:00que tenemos en marcha. Hay un informe de diseño, una paleta. Es el código de Claude
00:02:04analizando las cosas y añadiéndolas a la app de bienvenida de Paper, pero vayamos
00:02:08al final. Vale, ha terminado. Veamos cómo se ve esto. Vamos a alejar el zoom
00:02:13y ver si está por aquí. Oh, podemos ver que nuestras otras apps
00:02:17se están construyendo y aquí ven nuestra app de registro de gastos, que es
00:02:22genial. El diseño es bastante sólido y, de hecho, cuando lo ejecuté antes creo
00:02:25que salió una app ligeramente diferente. Aquí pueden ver que estas otras están
00:02:30todas funcionando en paralelo y lo genial de esta app de Paper es que
00:02:34básicamente es Figma. Todo a lo que están acostumbrados en Figma lo verán
00:02:39aquí, se ve muy parecido. Puedo ir y cambiar cosas y también puedo volver
00:02:43y hacer algunas ediciones. Quitar la sección de carga y poner otra cosa en su lugar.
00:02:53Veamos qué pasa cuando hacemos eso; como ven, todas siguen
00:02:56ejecutándose en segundo plano. Si volvemos aquí, espero que esa sección
00:03:00de carga se haya eliminado. Nuestra página de aterrizaje se ve bastante decente.
00:03:04Diseña con intención, crea sin límites. Por cierto, aquí vemos cómo todos nuestros
00:03:09otros componentes van tomando forma. El sistema de diseño se ve muy profesional.
00:03:12Siento que podrías haber pagado miles de dólares a un diseñador para que te diera
00:03:16exactamente esto. Muy genial y agradable y, por supuesto, se puede editar totalmente
00:03:20igual que en Figma. Así es como terminó viéndose la página de aterrizaje y
00:03:24vamos a pasar esto a React en un segundo con Tailwind. Aquí está el
00:03:28panel de control y la otra tarea también está completa. Aquí pueden ver el ancho dividido,
00:03:33así que eso también se ajustó. Tienes estos diseños con un aspecto muy profesional
00:03:36y todo lo que hicimos fue crearlos mediante prompts. Para todo esto podemos usar
00:03:42el ecosistema existente de habilidades que el código de Claude o Cursor ya nos
00:03:46ofrecen, así que podríamos usar la habilidad de diseño front-end para diseñar
00:03:50todo esto si quisiéramos. Voy a pedir una página HTML con este diseño ahora en mi
00:03:54navegador, veamos cómo funciona. Volviendo a Paper, les mostraré
00:03:58unas cuantas cosas más. Aquí tengo este componente y lo que puedo hacer es
00:04:03copiarlo como Tailwind o copiarlo como React CSS, así que normalmente puedo copiar y pegar
00:04:08pero creo que lo que veremos en un segundo es que el código de Claude puede
00:04:13cargarlo por nosotros también, así que podremos abrirlo en el navegador y vaya,
00:04:17ahí ven que realmente lo ha hecho, esto es bastante increíble,
00:04:20aquí ven el botón, quiero decir, esto es genial. Sinceramente, si vamos a
00:04:24inspeccionar la página, veamos qué salió realmente: aquí pueden ver que
00:04:29solo usó HTML y CSS, pero también podríamos haber hecho que lo hiciera con React
00:04:35y Tailwind. Puedes construir cosas como en Figma, es exactamente
00:04:40lo mismo. Aquí al lado podemos cambiar cosas, podemos cambiar
00:04:44el color, esto es básicamente igual que Figma, pero preparé
00:04:48este componente también porque quería ver cómo se vería si
00:04:51simplemente lo copiaba y pegaba en una aplicación normal. Aquí pueden ver que
00:04:55eso fue exactamente lo que hizo, quedó tal como yo quería básicamente y aquí
00:05:00pueden ver lo que se copió y pegó. Este es el componente de fondo, se lo
00:05:05mostraré de nuevo como lo hice antes: voy a darle a copiar como Tailwind, iré
00:05:10a Cursor y simplemente lo pegaré. Pueden ver que esto es lo que me dio.
00:05:14Ahora voy a deshacer parte de esto, este es en realidad un componente que había
00:05:20pegado antes para la app de control de gastos, pueden ver la barra superior, el hero, etc.,
00:05:26así que esto es React y Tailwind para básicamente lo mismo
00:05:29que acabamos de hacer. Aquí ven el código real de React en nuestra app, esta es
00:05:34otra variante de cuando puse el prompt hace 20 minutos. Esta es la versión
00:05:40uno, esta es la otra versión donde lo hicimos con HTML y CSS estándar y
00:05:44ambas quedaron muy bien. Quiero ver cómo salen las otras apps si
00:05:49lo hacemos en el código de Claude; estoy pidiendo una versión HTML de todas las
00:05:53pantallas que diseñamos recién. Lo que también hice fue darle
00:05:58clic derecho, copiar como React CSS, fui a Cursor, lo pegué y esta es una app real,
00:06:04ven que corre en localhost 3001, es parte de Inbox Zero, solo una página
00:06:09de demo que añadí, y se ve que funciona perfectamente también, lo cual es muy
00:06:13bueno. De entrada no es responsivo, pero por lo demás es bastante
00:06:18sólido. Aquí ven que necesita trabajo para ser responsivo, pero el concepto
00:06:22al menos es genial. Esta es la versión HTML que se acaba de
00:06:26cargar, la que también pedimos, y esta es algo más responsiva, empieza a
00:06:33sufrir un poco por aquí, pero al menos es mejor que la otra versión.
00:06:36Sí, eso está genial. Ahora quiero mostrarles que también puede
00:06:41generar imágenes; si presionamos Comando I, veamos si podemos hacerlo y
00:06:46le pediremos que genere una imagen. El prompt que escribí es para crear
00:06:50un anuncio hermoso para Inbox Zero, un asistente de email con IA que te ayuda a llegar
00:06:54rápido a Inbox Zero. Pueden ver que hay diferentes modelos, pueden usar Nano Banana
00:06:59Pro. Hagamos un pack variado para esta primera vez, espero que pueda hacerlo y
00:07:05sí, ven que ha empezado a crear cuatro imágenes. Quiero
00:07:10volver a intentarlo porque tengo curiosidad por ver qué pasa con Nano Banana Pro.
00:07:14Démosle a crear imagen; se está creando otra imagen y espero que pronto
00:07:19salgan. Oh, aquí empiezan los anuncios, que sí, quiero decir,
00:07:25se ven decentes. Obviamente necesitan trabajo, pero como un primer intento
00:07:29está muy bien. Miren este, Inbox Zero, ya saben que podrían encontrar diseñadores que
00:07:35hagan peores diseños que este, y de los cuatro, probablemente este es el que más me gusta.
00:07:39Pero sí, está claro que fue un solo intento, se podría iterar
00:07:43mucho sobre eso. Veamos qué saca Nano Banana Pro, ese podría
00:07:47ser el más impresionante. "Tu vía rápida a la calma, el asistente de email con IA". Me
00:07:51parece bastante sólido sinceramente, para ser un solo intento no es un mal gráfico. También
00:07:55me resulta interesante cómo conoce el logo; ¿la IA ha captado el
00:08:00logo de Inbox Zero o es solo casualidad que se parezca tanto a nuestro texto del logo?
00:08:04Ahora, antes de terminar, quiero mostrarles dos cosas más. Si hago clic en
00:08:09esta imagen y presiono S, puedo darle diferentes efectos. Aquí pueden ver
00:08:13este efecto de agua en la imagen. Si presiono S otra vez, está este metal líquido. No
00:08:18estoy seguro de cómo funciona esto ni de si tiene relación con nuestra imagen,
00:08:21pero ven que pueden crear efectos muy geniales y pueden
00:08:24usarlos en su página de aterrizaje. Aquí hay otra versión de la imagen que
00:08:27creamos. Y una cosa más que es agradable es que supuestamente los colores
00:08:33son consistentes y precisos. Paper tiene el primer selector de color uniforme del mundo
00:08:37que facilita los colores. Si no están familiarizados con esto, puedes tener un color
00:08:41en Figma y luego otro en tu web y no coinciden exactamente, es
00:08:45muy molesto. Nos pasó con los azules en nuestra web, donde Figma
00:08:48mostraba una cosa y la web otra, aunque se suponía que eran
00:08:52idénticos según el código hex. Así que
00:08:56si eres de los que ha tenido este problema como nosotros, es una función
00:08:59muy buena. Y lo último que quiero mostrarles es esto: crea un
00:09:04sistema de diseño en Paper a partir de nuestro código base existente. Ya ven que empezó
00:09:08a analizar el código base; es solo el código estándar de Claude. Ven que ha detectado
00:09:12nuestras fuentes. Ahora, hemos tenido problemas porque al parecer hemos alcanzado el límite semanal
00:09:17de herramientas MCP en este video para Paper Pro, así que no podemos ver realmente
00:09:20cómo habría quedado. Pero en resumen, habríamos podido indicar nuestro código base
00:09:23existente y ver cómo queda en Paper, editarlo ahí y
00:09:28luego devolver el código a nuestro proyecto. Esa es una función realmente
00:09:32buena. Un caso donde esto nos habría ayudado mucho es cuando
00:09:35estamos haciendo estos componentes de diseño para demos, como por ejemplo
00:09:39una captura para una página de aterrizaje. Normalmente lo más fácil
00:09:43es hacer una captura, pero a menudo quiero editarla un poco, cambiar
00:09:47el texto, ocultar emails reales... Tenerlo en Figma o Paper es
00:09:50mucho más fácil porque puedo escribir y editar exactamente lo que necesito
00:09:55y no es una captura, puedo exportarlo como una imagen real, PNG, JPEG o lo que sea.
00:09:58Aquí está la app social tipo Twitter que estábamos construyendo, también son
00:10:03diseños geniales. En fin, espero que hayan disfrutado el video,
00:10:07que no fuera mucho lío saltando de una cosa a otra. Así es como
00:10:10estoy programando mucho últimamente, así que quizá eso se notó un poco en el video,
00:10:14pero espero que les haya sido útil. Cuéntenme
00:10:17qué deciden construir con Paper, creo que es una herramienta muy útil. Me veo
00:10:20pasándome a la versión Pro pronto. No olviden
00:10:24suscribirse para futuros videos.